如何將圖像添加到我的JavaScript/JQuery文件？

Question

我試圖做一個簡單的基於瀏覽器的測驗，其中有一張圖片作爲問題和文本答案，反之亦然（這是一個手語測驗），我在網上發現了一個測驗模板，似乎工作良好，但對於我的生活我不知道如何給這個問題添加一張圖片。

代碼： http://codepen.io/jchamill/pen/garoqg

JS代碼：

$('#quiz').quiz({ 
    //resultsScreen: '#results-screen', 
    //counter: false, 
    //homeButton: '#custom-home', 
    counterFormat: 'Question %current of %total', 
    questions: [ 
    { 
     'q': 'Is jQuery required for this plugin?', // This is where I'd like the photo to be. 
     'options': [ 
     'Yes', 
     'No' 
     ], 
     'correctIndex': 0, 
     'correctResponse': 'Good job, that was obvious.', 
     'incorrectResponse': 'Well, if you don\'t include it, your quiz won\'t work' 
    }, 
    { 
     'q': 'How do you use it?', 
     'options': [ 
     'Include jQuery, that\'s it!', 
     'Include jQuery and the plugin javascript.', 
     'Include jQuery, the plugin javascript, the optional plugin css, required markup, and the javascript configuration.' 
     ], 
     'correctIndex': 2, 
     'correctResponse': 'Correct! Sounds more complicated than it really is.', 
     'incorrectResponse': 'Come on, it\'s not that easy!' 
    }, 
    { 
     'q': 'The plugin can be configured to require a perfect score.', 
     'options': [ 
     'True', 
     'False' 
     ], 
     'correctIndex': 0, 
     'correctResponse': 'You\'re a genius! You just set allowIncorrect to true.', 
     'incorrectResponse': 'Why you have no faith!? Just set allowIncorrect to true.' 
    }, 
    { 
     'q': 'How do you specify the questions and answers?', 
     'options': [ 
     'MySQL database', 
     'In the HTML', 
     'In the javascript configuration' 
     ], 
     'correctIndex': 2, 
     'correctResponse': 'Correct! Refer to the documentation for the structure.', 
     'incorrectResponse': 'Wrong! Do it in the javascript configuration. You might need to read the documentation.' 
    } 
    ] 
}); 

Answer 1

你將不得不叉，並更改插件本身。您想查看src/jquery.quiz.js並更改setup功能。特別是第68行和第79行之間的部分：

quizHtml += '<div id="questions">'; 
$.each(questions, function(i, question) { 
    quizHtml += '<div class="question-container">'; 
    quizHtml += '<p class="question">' + question.q + '</p>'; 
    quizHtml += '<ul class="answers">'; 
    $.each(question.options, function(index, answer) { 
     quizHtml += '<li><a href="#" data-index="' + index + '">' + answer + '</a></li>'; 
    }); 
    quizHtml += '</ul>'; 
    quizHtml += '</div>'; 
}); 
quizHtml += '</div>';