我如何添加一个图像到我的JavaScript/JQuery文件

How can I add an image to my JavaScript/JQuery file?

本文关键字：我的 JavaScript 文件 JQuery 图像 何添加 添加 一个      更新时间：2023-09-26

我想做一个简单的基于浏览器的测验，有图片作为问题和文本答案或反之亦然(这是一个手语测验)，我在网上找到了一个测验模板，似乎工作得很好，但对于我的生活，我不知道如何添加图片到问题。

代码: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.'
    }
  ]
});

你将不得不分叉并更改插件本身。您想要查看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="answerswers">';
    $.each(question.options, function(index, answer) {
        quizHtml += '<li><a href="#" data-index="' + index + '">' + answer + '</a></li>';
    });
    quizHtml += '</ul>';
    quizHtml += '</div>';
});
quizHtml += '</div>';
相关文章：