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>';