javascript - 如何为这些问题拍照

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

标签： javascripthtmlcss

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>

你可以使用一个叫做地图的东西，假设每个问题都有一张独特的图片，你必须得到随机问题的图片，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

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