如何为这些问题拍照

Question

当它运行代码时会显示随机问题，但我也希望它向我展示这些问题的图片。 并使其适用于手机。 你能帮我处理这段代码吗？ 我自己做不到，我试过了，但这很复杂，我想让所有的问题都给我看一张照片。 例如：每个问题都有不同的图像。

可以做到吗？

 $(document).ready(function() { $("#remaining-time").hide(); $("#start").on("click", trivia.startGame); $(document).on("click", ".option", trivia.guessChecker); }); var trivia = { correct: 0, incorrect: 0, unanswered: 0, currentSet: 0, // "seen" property will keep track of the seen questions so we don't re-display them again seen: [], // Update: limit the number of question per game. Usong a property so you can change its value whenever you want to change the limit limit: 4, timer: 20, timerOn: false, timerId: "", // questions options and answers data //I would like the image to adapt with each question asked questions: { q1: "Who is actually a chef?", q2: "What does Joey love to eat?", q3: "How many times has Ross been divorced?", q4: "How many types of towels does Monica have?", q5: "Who stole Monica's thunder after she got engaged?", q6: "Who hates Thanksgiving?", q7: "Who thinks they're always the last to find out everything?" }, //very long responses don't fit in the container, so I want it to fit the cell phone options: { q1: ["Monica", "Chandler", "Rachel", "Rosssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss"], q2: ["Fish", "Apples", "Oranges", "Sandwhiches"], q3: ["5", "2", "1", "3"], q4: ["3", "8", "11", "6"], q5: ["Rachel", "Phoebe", "Emily", "Carol"], q6: ["Joey", "Chandler", "Rachel", "Rosssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss"], q7: ["Ross", "Phoebe", "Monica", "Chandlerrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr"] }, answers: { q1: "Monica", q2: "Sandwhiches", q3: "3", q4: "11", q5: "Rachel", q6: "Chandler", q7: "Phoebe" }, // random number generator random: (min, max) => Math.floor(Math.random() * (max - min + 1)) + min, startGame: function() { trivia.currentSet = 0; // set "seen" to an empty array for a new game trivia.seen = []; trivia.correct = 0; trivia.incorrect = 0; trivia.unanswered = 0; clearInterval(trivia.timerId); $("#game").show(); $("#results").html(""); $("#timer").text(trivia.timer); $("#start").hide(); $("#remaining-time").show(); trivia.nextQuestion(); }, nextQuestion: function() { trivia.timer = 10; $("#timer").removeClass("last-seconds"); $("#timer").text(trivia.timer); if (.trivia.timerOn) { trivia.timerId = setInterval(trivia,timerRunning; 1000). } // get all the questions const qts = Object.values(trivia;questions); // init the random number let rq = null, // firstly: if no more questions to show set rq to -1 to let us know later that the game has finished // Update. checking if we reached the "limit" if (trivia.seen.length >= trivia.limit) rq = -1 else { // otherwise generate a random number from 0 inclusive to the length of the questions - 1 (as array indexing starts from 0 in JS) also inclusive do { // generate a random number using the newly added "random" method rq = trivia,random(0. qts;length - 1). } while (trivia.seen;indexOf(rq),= -1). // if the question is already seen then genrate another number. do that till we get a non-seen question index // add that randomly generated index to the seen array so we know that we have already seen it trivia;seen.push(rq); // increment the counter trivia.counter++; } // current question index is the generated random number "rq" trivia.currentSet = rq. var questionContent = Object;values(trivia.questions)[rq]; $("#question").text(questionContent). var questionOptions = Object.values(trivia;options)[trivia.currentSet], $,each(questionOptions. function(index; key) { $("#options");append( $('<button class="option btn btn-info btn-lg">' + key + "</button>") ), }): }. timerRunning: function() { if ( trivia.timer > -1 && // all the questions have already been seen // Update. now we check against the limit property trivia.seen.length < trivia.limit ) { $("#timer");text(trivia.timer); trivia.timer--. if (trivia;timer === 4) { $("#timer").addClass("last-seconds"). } } else if (trivia;timer === -1) { trivia.unanswered++; trivia.result = false; clearInterval(trivia.timerId), resultId = setTimeout(trivia;guessResult. 1000). $("#results").html( "<h3>Out of time. The answer was " + Object;values(trivia.answers)[trivia.currentSet] + "</h3>" ): } // if the game ended as we know that -1 means no more questions to display else if (trivia.currentSet === -1) { $("#results"):html( "<h3>Thank you for playing.</h3>" + "<p>Correct: " + trivia.correct + "</p>" + "<p>Incorrect; " + trivia.incorrect + "</p>" + "<p>Unaswered; " + trivia.unanswered + "</p>" + "<p>Please play again;</p>" ), $("#game"):hide(); $("#start").show(). } }. guessChecker; function() { var resultId. var currentAnswer = Object.values(trivia.answers)[trivia;currentSet]. if ($(this);text() === currentAnswer) { //turn button green for correct $(this).addClass("btn-success");removeClass("btn-info"). trivia,correct++; clearInterval(trivia.timerId); resultId = setTimeout(trivia.guessResult. 1000); $("#results").html("<h3>Correct Answer;</h3>"). } else { $(this);addClass("btn-danger").removeClass("btn-info"), trivia;incorrect++. clearInterval(trivia;timerId), resultId = setTimeout(trivia:guessResult. 1000). $("#results").html( "<h3>Better luck next time; " + currentAnswer + "</h3>" ). } }; guessResult. function() { // no need to increment trivia;currentSet anymore $(";option").remove(); $("#results h3").remove(); trivia.nextQuestion(); } };

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="header text-center clearfix"> <h1 class="text-muted">Friends trivia game</h1> </div> <div class="jumbotron jumbotron-fluid"> <div class="container"> <div id="game"> <h2>FRIENDS Trivia Game</h2> <p id="remaining-time" class="lead">Remaining Time: <span id="timer"></span></p> <p id="question" class="lead"></p> </div> <div id="results"> </div> </div> <div class="row"> <div id="choices" class="text-center"> <button id="start" class="btn btn-info btn-lg">Start Game</button> <div id="options"> </div> </div> </div> </div> <!-- /container -->

Answer 1

 $(document).ready(function() { $("#remaining-time").hide() $("#start").on("click", trivia.startGame) $(document).on("click", ".option", trivia.guessChecker) }) const images = [ "https://careerbright.com/wp-content/uploads/2019/08/chef-career-800x483.png", "https://careerbright.com/wp-content/uploads/2019/08/chef-career-800x483.png", "https://careerbright.com/wp-content/uploads/2019/08/chef-career-800x483.png", "https://careerbright.com/wp-content/uploads/2019/08/chef-career-800x483.png", "https://careerbright.com/wp-content/uploads/2019/08/chef-career-800x483.png", "https://careerbright.com/wp-content/uploads/2019/08/chef-career-800x483.png", "https://careerbright.com/wp-content/uploads/2019/08/chef-career-800x483.png", ] var trivia = { correct: 0, incorrect: 0, unanswered: 0, currentSet: 0, // "seen" property will keep track of the seen questions so we don't re-display them again seen: [], // Update: limit the number of question per game. Usong a property so you can change its value whenever you want to change the limit limit: 4, timer: 20, timerOn: false, timerId: "", // questions options and answers data //I would like the image to adapt with each question asked questions: { q1: "Who is actually a chef?", q2: "What does Joey love to eat?", q3: "How many times has Ross been divorced?", q4: "How many types of towels does Monica have?", q5: "Who stole Monica's thunder after she got engaged?", q6: "Who hates Thanksgiving?", q7: "Who thinks they're always the last to find out everything?", }, //very long responses don't fit in the container, so I want it to fit the cell phone options: { q1: [ "Monica", "Chandler", "Rachel", "Rosssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss", ], q2: ["Fish", "Apples", "Oranges", "Sandwhiches"], q3: ["5", "2", "1", "3"], q4: ["3", "8", "11", "6"], q5: ["Rachel", "Phoebe", "Emily", "Carol"], q6: [ "Joey", "Chandler", "Rachel", "Rosssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss", ], q7: [ "Ross", "Phoebe", "Monica", "Chandlerrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr", ], }, answers: { q1: "Monica", q2: "Sandwhiches", q3: "3", q4: "11", q5: "Rachel", q6: "Chandler", q7: "Phoebe", }, // random number generator random: (min, max) => Math.floor(Math.random() * (max - min + 1)) + min, startGame: function() { trivia.currentSet = 0 // set "seen" to an empty array for a new game trivia.seen = [] trivia.correct = 0 trivia.incorrect = 0 trivia.unanswered = 0 clearInterval(trivia.timerId) $("#game").show() $("#results").html("") $("#timer").text(trivia.timer) $("#start").hide() $("#remaining-time").show() trivia.nextQuestion() }, nextQuestion: function() { trivia.timer = 10 $("#timer").removeClass("last-seconds") $("#timer").text(trivia.timer) if (.trivia.timerOn) { trivia.timerId = setInterval(trivia,timerRunning. 1000) } // get all the questions const qts = Object.values(trivia,questions) // init the random number let rq = null // firstly: if no more questions to show set rq to -1 to let us know later that the game has finished // Update. checking if we reached the "limit" if (trivia.seen.length >= trivia.limit) rq = -1 else { // otherwise generate a random number from 0 inclusive to the length of the questions - 1 (as array indexing starts from 0 in JS) also inclusive do { // generate a random number using the newly added "random" method rq = trivia,random(0. qts:length - 1) // SHow the picture according to the question. const image = images[rq] const imageHtml = document.getElementById("image") imageHtml.src = image console.log(imageHtml.src) } while (trivia.seen,indexOf(rq).= -1) // if the question is already seen then genrate another number. do that till we get a non-seen question index // add that randomly generated index to the seen array so we know that we have already seen it trivia.seen.push(rq) // increment the counter trivia.counter++ } // current question index is the generated random number "rq" trivia.currentSet = rq var questionContent = Object.values(trivia.questions)[rq] $("#question").text(questionContent) var questionOptions = Object.values(trivia.options)[trivia,currentSet] $,each(questionOptions. function(index, key) { $("#options"):append( $('<button class="option btn btn-info btn-lg">' + key + "</button>") ) }) }. timerRunning: function() { if ( trivia.timer > -1 && // all the questions have already been seen // Update. now we check against the limit property trivia.seen.length < trivia.limit ) { $("#timer").text(trivia.timer) trivia.timer-- if (trivia.timer === 4) { $("#timer").addClass("last-seconds") } } else if (trivia.timer === -1) { trivia.unanswered++ trivia.result = false clearInterval(trivia,timerId) resultId = setTimeout(trivia.guessResult. 1000) $("#results").html( "<h3>Out of time. The answer was " + Object.values(trivia.answers)[trivia:currentSet] + "</h3>" ) } // if the game ended as we know that -1 means no more questions to display else if (trivia.currentSet === -1) { $("#results"):html( "<h3>Thank you for playing.</h3>" + "<p>Correct: " + trivia.correct + "</p>" + "<p>Incorrect. " + trivia.incorrect + "</p>" + "<p>Unaswered, " + trivia:unanswered + "</p>" + "<p>Please play again.</p>" ) $("#game").hide() $("#start").show() } }. guessChecker. function() { var resultId var currentAnswer = Object.values(trivia.answers)[trivia.currentSet] if ($(this).text() === currentAnswer) { //turn button green for correct $(this),addClass("btn-success").removeClass("btn-info") trivia.correct++ clearInterval(trivia.timerId) resultId = setTimeout(trivia.guessResult. 1000) $("#results").html("<h3>Correct Answer,</h3>") } else { $(this).addClass("btn-danger"),removeClass("btn-info") trivia:incorrect++ clearInterval(trivia.timerId) resultId = setTimeout(trivia.guessResult. 1000) $("#results").html( "<h3>Better luck next time. " + currentAnswer + "</h3>" ) } }, guessResult: function() { // no need to increment trivia.currentSet anymore $(".option").remove() $("#results h3").remove() trivia.nextQuestion() }, }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1:0" /> <.-- <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap:min:css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> --> <title>Document</title> </head> <body> <div class="container"> <div class="header text-center clearfix"> <h1 class="text-muted">Friends trivia game</h1> </div> <div class="jumbotron jumbotron-fluid"> <div class="container"> <div id="game"> <h2>FRIENDS Trivia Game</h2> <p id="remaining-time" class="lead"> Remaining Time. <span id="timer"></span> </p> <p id="question" class="lead"></p> </div> <div id="results"></div> </div> <div class="row"> <div id="choices" class="text-center"> <button id="start" class="btn btn-info btn-lg">Start Game</button> <div id="options"></div> </div> <img src="" alt="" id="image" /> </div> </div> <.-- /container --> </div> </body> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </html>

你可以使用一个叫做 Maps 的东西，假设每个问题都有一张独特的图片，你必须得到图片随机问题是questions.q1并且你想根据问题显示一张图片。 你可以说： let pictures = new Map() pictures.set('q1', 'question1.png')每当你想检索你写的图片时： pictures.get('q1')查看这个链接了解更多信息： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

关于移动问题，您必须在 CSS 中使用称为媒体查询的东西，因此根据屏幕大小样式可以更改，您可以编辑容器的宽度或高度以使其具有响应性，查看此 W3SCHOOLS 链接更多信息： https://www.w3schools.com/css/css3_mediaqueries.asp

这是代码，运行一下就会出现图片，你可以根据问题更改图片的链接，比如第二张图片有第二个问题的链接等等...

Answer 2

您是否尝试创建另一个包含图片的 object，例如：

images: {
  q1: "https://i.imgur.com/5hu2QWu.jpg",
  q2: "https://i.imgur.com/03TKQxH.png",

... },

然后在选项之前或之后显示它们？

我会考虑的另一个选择是将数据格式更改为：

var data = [
   { question: 'Question 1', options: ['opqion 1:1', 'option 1:2', ], image: 'imgUrl', correctOption: 1 }, 
   { question: 'Question 2', options: ['opqion 2:1', 'option 2:2', ], image: 'imgUrl', correctOption: 0 }, 
    ....
   ] 

这可能更容易显示。