如何在测验Bixby模板的问题中添加图像

Question

如何将图像添加到胶囊样品测验Bixby模板中的问题中，例如https://github.com/bixbydevelopers/capsule-sample-quiz

Answer 1

向问题添加图像涉及几个步骤。基本上你需要

1. 添加图像数据（图像并修改测验JSON以包括对图像的引用

2. 修改问题模型和代码以加载问题数据以处理新的图像概念。

3. 修改视图以显示图像。

注意：这适用于多项选择题。它不适用于单个文本输入问题（这将需要更重要的重构并可能使用结果视图）

步骤

1）找到每个问题所需的图像并将其添加到assets/images

2）将图像添加到quizzes.js JSON，例如将这些内容添加到问题json中（以有趣的测验为例，将以下图片添加到每个问题中）

image: "/images/cats-eating.jpg" // Add to first question

image: "/images/cold-dog.jpg" // Add to second question

3）将图像添加到“问题”模型中，例如添加此

property (image) {
  description (Question image)
  type (core.Text)
  min (Optional) max (One)
  visibility (Private)
}

4）在问题模型中加载问题数据时加载图像。为此，请修改buildQuestionFromJSON中的util.js方法-注意添加的最后一行

  var question = {
    text: questionJson.question,
    options: options,
    correctAnswer: {
      acceptedAnswers: acceptedAnswers.answers,
      acceptedAlias: acceptedAnswers.alias,
      explanation: questionJson.explanation,
      text: buildCorrectAnswerText(questionJson)
    },
    image: questionJson.image  // Added
  }

5）将图像作为标题添加到UpdateQuiz视图。

之后

 render {
    if (size(action.quiz.questions[action.quiz.index].options) > 0) {
      selection-of (action.quiz.questions[action.quiz.index].options) {

添加：

header {
  image-area {
    aspect-ratio(16:9)
    image-url("[#{value(action.quiz.questions[action.quiz.index].image)}]")
    title-area {
      slot1 {
        text("")
      }
    }
  }
}

现在，图像将立即显示在对话框下方和选择多项之前。像这样：