Javascript在数组上随机而不重复

问题描述

所以我试图将问题随机化，但我一直在失败。我试图使用此代码添加，但它有一些问题。我将currentQuestion更改为randomQuiz，但它仍然有效，但是还有一些问题需要修复。

So I'm trying to randomize the questions but i kept on failing. i tried to use this code to add but there are some issues with it. i changed currentQuestion to randomQuiz and it worked but again there are issues that needed to be fix.

var randomQuiz = Math.floor(Math.random()*quiz.length);

.js file

    var quiz = [{
      "question": "What is the full form of IP?",
      "choices": ["Internet Provider", "Internet Port", "Internet Protocol"],
      "correct": "Internet Protocol"
    }, {
      "question": "Who is the founder of Microsoft?",
      "choices": ["Bill Gates", "Steve Jobs", "Steve Wozniak"],
      "correct": "Bill Gates"
    }, {
      "question": "1 byte = ?",
      "choices": ["8 bits", "64 bits", "1024 bits"],
      "correct": "8 bits"
    }, {
      "question": "The C programming language was developed by?",
      "choices": ["Brendan Eich", "Dennis Ritchie", "Guido van Rossum"],
      "correct": "Dennis Ritchie"
    }, {
      "question": "What does CC mean in emails?",
      "choices": ["Carbon Copy", "Creative Commons", "other"],
      "correct": "Carbon Copy"
    } , {
      "question": "wsxwsxwsxwsxwsxwsx?",
      "choices": ["wsx", "edc", "qaz"],
      "correct": "wsx"
    } , {
      "question": "qazqazqazqazqazqaz?",
      "choices": ["qaz", "wsx", "edc"],
      "correct": "qaz"
    } , {
      "question": "asdasdasdasdasdasd?",
      "choices": ["asd", "qwe", "zxc"],
      "correct": "asd"
    } , {
      "question": "zxczxczxczxczxczxc?",
      "choices": ["zxc", "asd", "qwe"],
      "correct": "zxc"
    } , {
      "question": "qweqweqweqweqweqwe?",
      "choices": ["qwe", "asd", "zxc"],
      "correct": "qwe"
    }];


    // define elements
    var content = $("content"),
      questionContainer = $("question"),
      choicesContainer = $("choices"),
      scoreContainer = $("score"),
      submitBtn = $("submit");

    // init vars
    var currentQuestion = 0,
      score = 0,
      askingQuestion = true;

    function $(id) { // shortcut for document.getElementById
      return document.getElementById(id);
    }

    function askQuestion() {
      var choices = quiz[currentQuestion].choices,
        choicesHtml = "";

      // loop through choices, and create radio buttons
      for (var i = 0; i < choices.length; i++) {
        choicesHtml += "<input type='radio' name='quiz" + currentQuestion +
          "' id='choice" + (i + 1) +
          "' value='" + choices[i] + "'>" +
          " <label for='choice" + (i + 1) + "'>" + choices[i] + "</label><br>";
      }

      // load the question
      questionContainer.textContent = "Q" + (currentQuestion + 1) + ". " +
        quiz[currentQuestion].question;

      // load the choices
      choicesContainer.innerHTML = choicesHtml;

      // setup for the first time
      if (currentQuestion === 0) {
        scoreContainer.textContent = "Score: 0 right answers out of " +
          quiz.length + " possible.";
        submitBtn.textContent = "Submit Answer";
      }
    }

    function checkAnswer() {
      // are we asking a question, or proceeding to next question?
      if (askingQuestion) {
        submitBtn.textContent = "Next Question";
        askingQuestion = false;

        // determine which radio button they clicked
        var userpick,
          correctIndex,
          radios = document.getElementsByName("quiz" + currentQuestion);
        for (var i = 0; i < radios.length; i++) {
          if (radios[i].checked) { // if this radio button is checked
            userpick = radios[i].value;
          }

          // get index of correct answer
          if (radios[i].value == quiz[currentQuestion].correct) {
            correctIndex = i;
          }
        }

        // setup if they got it right, or wrong
        var labelStyle = document.getElementsByTagName("label")[correctIndex].style;
        labelStyle.fontWeight = "bold";
        if (userpick == quiz[currentQuestion].correct) {
          score++;
          labelStyle.color = "green";
        } else {
          labelStyle.color = "red";
        }

        scoreContainer.textContent = "Score: " + score + " right answers out of " +
          quiz.length + " possible.";
      } else { // move to next question
        // setting up so user can ask a question
        askingQuestion = true;
        // change button text back to "Submit Answer"
        submitBtn.textContent = "Submit Answer";
        // if we're not on last question, increase question number
        if (currentQuestion < quiz.length - 1) {
          currentQuestion++;
          askQuestion();
        } else {
          showFinalResults();
        }
      }
    }

    function showFinalResults() {
      content.innerHTML = "<h2>You've complited the quiz!</h2>" +
        "<h2>Below are your results:</h2>" +
        "<h2>" + score + " out of " + quiz.length + " questions, " +
        Math.round(score / quiz.length * 100) + "%<h2>";
    }

    window.addEventListener("load", askQuestion, false);
    submitBtn.addEventListener("click", checkAnswer, false);

.html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">

<meta name="robots" content="noindex">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Quiz app</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="quiz.css">


</head>
  <body>
    <div id="container">
      <h1>Quiz app</h1>
      <p>There will be no points awarded for unanswered questions.</p>
      <div id="content">
        <h3 id="question"></h3>
        <div id="choices"></div>
        <p><button id="submit"></button></p>
        <p id="score"></p>
      </div>
    </div>
    <script src="quiz.js"></script>


</body>
</html>

推荐答案

您可以使用数组存储已存在的问题问
每次随机化时检查数组，然后选择问题

You can use a array for storing question that have been askedCheck array every time during randomization and then select question

var track=new Array();

while(true)//loop until Unique number
{
    var randomQuiz=Math.floor(Math.random()*quiz.length);

     if(track.indexOf(randomQuiz)==-1)//if you have got your unique random number
     {
        track.push(random);
        break;
     }
}

修改：as Stephen P 指出它可能导致性能问题，从 Brent Wagoner 建议中删除数组中的元素更合乎逻辑。

Edit: as Stephen P pointed out it may lead to performance issue, removing element from array is more logical thing to do as suggested by Brent Waggoner.

这篇关于Javascript在数组上随机而不重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！