How do I add an image to questions in the quiz Bixby template

Question

How do I add an image to the questions in the capsule-sample-quiz Bixby template e.g. https://github.com/bixbydevelopers/capsule-sample-quiz

Answer 1

Adding an image to a question involves several steps. Basically you need to

1. add the image data (images and modify quiz JSON to include references to the image

2. modify the question model and the code to load question data to handle the new image concept.

3. modify the view to show the image.

Note: This works with multiple choice questions. It does not work with a single text input question (that would require more significant refactoring and likely using a result-view)

Steps

1) Find the images you want for each question and add to assets/images

2) Add images to quizzes.js JSON e.g. add these to the questions json (Using Funny Quiz as an example to add the following image to each question)

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

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

3) Add images to the Question model e.g add this

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

4) Load the images when loading question data in the the question model. Do this by modifying the buildQuestionFromJSON method in util.js - note last line added

  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) Add images as header to UpdateQuiz view. After

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

add:

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

And images will now show up just underneath the dialog and before the multiple choice selection. Like this: