Добавление изображения к вопросу включает в себя несколько шагов. В основном вам нужно
добавить данные изображения (изображения и изменить тест JSON, чтобы включить ссылки на изображение
изменить модель вопроса икод для загрузки данных вопросов для обработки новой концепции изображения.
- измените представление, чтобы показать изображение.
Примечание. Это работает с вопросами с несколькими вариантами ответов. работать с одним вопросом ввода текста (который потребует более значительного рефакторинга и, вероятно, с использованием просмотра результатов)
Шаги
1) Найдите изображения, которые вы хотите для каждого вопроса, и добавьте к assets/images
2) Добавьте изображения в jiz quizzes.js, например, добавьте их в вопросы 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("")
}
}
}
}
И изображения теперь будут отображаться непосредственно под диалоговым окном и перед выбором с множественным выбором. Вот так:
