javascript - 如何使用 Javascript 将图像添加到我的调查问卷中？

Question

在尝试将图像添加到我的测验中时，我已经尝试了所有我能想到的方法。我对 HTML 编码还很陌生，我很茫然。我试图获取它，以便当打开网页时，图像会显示在问题上方。

var myQuestions = [
    {
        question: "1. What are the warning signs of a phishing email?",
        answers: {
            A: 'Spelling errors',
            B:'Unfamiliar links',
            C: 'Asking for personal details',
            D: 'A, B and C'
        },
        correctAnswer: 'D'
    },
];

我不确定将生成测验图像所需的代码放在哪里。

var quizContainer = document.getElementById('quiz');
var resultsContainer = document.getElementById('results');
var submitButton = document.getElementById('submit');

generateQuiz(myQuestions, quizContainer, resultsContainer, submitButton);

function generateQuiz(questions, quizContainer, resultsContainer, submitButton) {

    function showQuestions(questions, quizContainer) {
        var output = [];
        var answers;
        for (var i = 0; i < questions.length; i++) {
            answers = [];
            for(letter in questions[i].answers) {
                answers.push(
                    '<label>'
                        + '<input type="radio" name="question'+i+'" value="'+letter+'">'
                        + letter + ': '
                        + questions[i].answers[letter]
                    + '</label>'
                );
            }
            output.push(
                '<div class="question">' + questions[i].question + '</div>'
                + '<div class="answers">' + answers.join('') + '</div>'
            );
        }
        quizContainer.innerHTML = output.join('');
    }
}

这是我必须展示的结果，以防万一需要。

function showResults(questions, quizContainer, resultsContainer) {
    var answerContainers = quizContainer.querySelectorAll('.answers');
    var userAnswer = '';
    var numCorrect = 0;

    for (var i = 0; i < questions.length; i++) {

        userAnswer = (answerContainers[i].querySelector('input[name=question'+i+']:checked')||{}).value;

        if(userAnswer===questions[i].correctAnswer) {
            numCorrect++;
            answerContainers[i].style.color = 'lightgreen';
        }
        else {
            answerContainers[i].style.color = 'red';
        }
    }
    resultsContainer.innerHTML = numCorrect + ' out of ' + questions.length;
}

showQuestions(questions, quizContainer);
submitButton.onclick = function() {
    showResults(questions, quizContainer, resultsContainer);
}

Answer 1

我告诉您，如果您想在每个问题上方添加图像，请在您使用的每个问题标签上方使用此代码。

<img src="source" border="n" align="top/bottom/left/right" width="n/n%" height="n/n%" >