How to put a photo to those questions

Question

When it runs the code shows random questions, but I would also like it to show me a picture on those questions. And make it work for a cell phone. Can you help me with this code? I couldn't do it myself, I tried but it's complicated, I want all the questions to show me a photo. For example: that each question has a different image.

It could be done?

 $(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>

You can use something called Maps, let's say each question has a unique picture, and you have to get the picture the random question is questions.q1 and you want to show a picture according to the question. you could say: let pictures = new Map() pictures.set('q1', 'question1.png') and whenever you want to retreive the picture you write: pictures.get('q1') check out this link for more info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

And about the mobile issue, you have to use something called media query in CSS, so according to a screen size the styling can change, you can edit the width or the height of a container to make it resposive, check out this W3SCHOOLS link for more info: https://www.w3schools.com/css/css3_mediaqueries.asp

here is the code just run it and it will make the picutre appear, you can change the link of the picutres according to the questions, for example the 2nd picture has the link of the 2nd quesion and so on...

Answer 2

Did you try creating another object that holds the pictures, like:

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

... },

And then displaying them before or after the options?

Another option I would consider, is changing the data format to something like:

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 }, 
    ....
   ] 

And that might be easier to display.