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

如何将图像添加到JavaScript / JQuery文件中？

1 个答案: