bixby - 如何将图像添加到测验 Bixby 模板中的问题

Question

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

标签： bixby

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("")
      }
    }
  }
}

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