Question

我在琐事游戏上重复问题时遇到了麻烦。在被问到问题之后，我需要能够将提问的问题推到一个数组中。但我不确定琐事游戏的设置方式。请帮忙！

HTML：

<div class="container3">
  <div class = "right-or-wrong" style = "display:none"></div>
  </br>
    <div class = "next" style = "display:none">Next question!</div>
      <div id="score again"></div>
        </div>

<div class="cd-popup" role="alert">
    <div class="cd-popup-container">
        <p> OH NO! <br /> You got 0 out of 3 correct. <br /> Brush up on your trivia <br /> and play again.</p>
        <ul class="cd-buttons">
            <li id="reset"><a href="#start">Play Again</a></li>
        </ul>
    </div>
</div>
<div class="cd-popup1" role="alert">
    <div class="cd-popup1-container">
    <img src="css/bronze-rio.png" />
    <p> You got 1 out of 3 correct. </br>Good job!</p>
        <ul class="cd-buttons">
            <li id="reset"><a href="#start">Play Again</a></li>
        </ul>
    </div>
</div>
<div class="cd-popup2" role="alert">
    <div class="cd-popup2-container">
    <img src="css/silver-rio.png" />
    <p>You got 2 out of 3 correct.</br>Awesome job!</p>
        <ul class="cd-buttons">
            <li id="reset"><a href="#start">Play Again</a></li>
        </ul>
    </div>
</div>
<div class="cd-popup3" role="alert">
    <div class="cd-popup3-container">
    <img src="css/gold-rio.png" />
            <p>You got 3 out of 3 correct.</br>Perfection!</p>
        <ul class="cd-buttons">
            <li id="reset"><a href="#start">Play Again</a></li>
        </ul>
    </div>
</div>

JS：

var clickCount = 0;
var questionCount = 0;
var score = 0;
var i = 0;
var clicked = 0;
var setScore = function() {
  if (clickCount < 1) {
    $(".score").html("<p>Score: " + score + "</p>");
  }
};

jQuery(document).ready(function($){
    $('body').on('click', '#reset',function (){
      clicked = 0;
        clickCount = 0;
        questionCount = 0;
        score = 0;
        i = 0;
     $('.is-visible').removeClass('is-visible');
    addQAs();
    setScore();
    chooseAnswer();
  });

  $(document).ready(function(){
      $('.next').on('click');
    });


    $('.cd-popup-trigger').on('click', function(){
        // event.preventDefault();
        $('.cd-popup').addClass('is-visible');
    });


    $('#reset').on('click', function(){
  $('.cd-popup').removeClass('is-visible');
  reset()
})

    $(document).keyup(function(event){
        if(event.which=='27'){
            $('.cd-popup').removeClass('is-visible');
        }
    });
});

var triviaPrompts = [
  [ "How many times have the Olympics been held in South America before 2016?", ["Once", "Twice", "Never"], "C", ["A", "B"] ],

  [ "Which events are included for the <br /> first time in decades?", ["Golf & Cycling-BMX", "Rugby & Golf", "Rugby & Cricket"], "B", ["A", "C"] ],

  [ "What is lit with a flame during <br /> the opening ceremony?", ["The Olympic Cauldron", "The Olympic Mascot", "The Olympic Torch"], "C", ["A", "B"] ],

  [ "The torch relay began on April 21st <br /> in which city?", ["Olympia", "Rio de Janeiro", "London"], "A", ["B", "C"] ],

  [ "Organizers prepare approximately how many meals per day to feed athletes?", ["5,000", "60,000", "30,000"], "B", ["A", "C"] ],

  [ "Which is one of the sports venues for the <br /> Rio Olympics?", ["The Olympic Golf Course", "The Olympic Village", "The Olympic Parade"], "A", ["B", "C"] ],

  ["Which flag represents the first refugee team to ever compete in the Olympics?", ["Olympic", "Greece", "Brazil"], "A", ["B", "C"] ],

  [ "Which two types of martial arts are represented in the Summer Olympics?", ["Kung Fu & Tai Chi Chuan", "Karate & Ninjitsu", "Taekwondo & Judo"], "C", ["A", "B"] ],

  [ "The beach volleyball tournament is held at?", ["Fort Copacabana", "Copacabana Beach", "The Copacabana Club"], "B", ["A", "C"] ],

  [ "Where are the opening and closing ceremonies held?", ["Joao Havelange Olympic Stadium", "Maracana Stadium", "Maracanazinho Arena"], "B", ["A", "C"] ],

  ["How many gold medals will be handed out during at the 2016 Summer Olympics?",
  ["306", "256", "400"], "A", ["B", "C"] ],

  ["What is the motto for the 2016 <br /> Summer Olympics?", ["ONE WORLD. ONE DREAM", "LIGHT THE FIRE WITHIN", "LIVE YOUR PASSION"], "C", ["A", "B"] ],

  ["What is the estimated cost in U.S. dollars of the 2016 Summer Olympics?", ["$6.25 billion", "$11.25 billion", "$22.25 billion"], "B", ["A", "C"] ],

  ["When will the 2016 Summer Games end?", ["October 15th", "September 2nd", "August 21st"], "C", ["A", "B"] ],

  ["Rio's taxi drivers, or 'taxistas', were given the chance to sign up for free online English lessons provided by the Rio 2016 <br /> Organizing Committee?", ["True", "--or--", "False" ], "A", ["B", "C"] ],

  ["There will be a total of 28 sports in the 2016 Summer Olympics?", ["True", "--or--", "False" ], "A", ["B", "C"] ],

  ["The official mascots of the 2016 Summer Olympics are Vinicius and Tom?", ["True", "--or--", "False" ], "A", ["B", "C"] ],

  ["There will be less than 10,000 <br /> athletes participating in the 2016 <br /> Summer Olympics?", ["True", "--or--", "False" ], "C", ["A", "C"] ],
];



function addQAs (){
questionCount = Math.floor(Math.random() * triviaPrompts.length);
$(".question").html(triviaPrompts[questionCount][0]);
$("#A").html( triviaPrompts[questionCount][1][0] );
$("#B").html( triviaPrompts[questionCount][1][1] );
$("#C").html( triviaPrompts[questionCount][1][2] );
};


var chooseAnswer = function(){

var rightAnswer = function() {
    if (clickCount < 1) {
      $("#" + triviaPrompts[questionCount][2]).css("color", "green"); // replace this code
      $("#" + triviaPrompts[questionCount][3][0]).css("color", "grey");
      $("#" + triviaPrompts[questionCount][3][1]).css("color", "grey");
      $(".right-or-wrong").show();
      $(".right-or-wrong").html("You are correct!");
      score = score + 1;
    }
    setScore();
    clickCount++;
    $(".next").show();
  };

  var wrongAnswer = function () {
    if (clickCount < 1) {
    $(".answer").css("color", "grey");
    $(this).css("color", "red");
    $(".right-or-wrong").show();
    $(".right-or-wrong").html("That is wrong! The correct answer is " +  $("#" + triviaPrompts[questionCount][2]).html() + ".");
    clickCount++;
    $(".next").show();
    }
  };

  var answerChoices = function() {
    $(".answer").off("click");
    $("#" + triviaPrompts[questionCount][2]).on("click", rightAnswer);
    $("#" + triviaPrompts[questionCount][3][0]).on("click", wrongAnswer);
    $("#" + triviaPrompts[questionCount][3][1]).on("click", wrongAnswer);
  };
  answerChoices();
};

var onNext = function(){
  clicked++;

  if ( questionCount <= (triviaPrompts.length-1)) {
    addQAs();
    $(".right-or-wrong").hide();
    $(".next").hide();
    $(".answer").css("color", "white");
    console.log("questionCount++;")
    clickCount = 0;
    chooseAnswer();
  }

//end after 3 questions
    if ( clicked === 3 ) {
      console.log("Score is 3");
      $(document).ready(function () {
      if (score=== 3){
        $('.cd-popup3').addClass('is-visible');
      } else if ( score === 2) {
      $('.cd-popup2').addClass('is-visible');
    } else if  (score ===1){
      $('.cd-popup1').addClass('is-visible');
    } else {
      $('.cd-popup').addClass('is-visible');
    }

    })
    }
  }

$(".next").on("click", onNext);
$("html").on("keydown", function(e){
  if ($(".next").css("display") !== "none"){
    if (e.keyCode == 13) {
      onNext();
    }
  }
});

addQAs();
setScore();
chooseAnswer();

可以找到代码Here at Codepen

Answer 1

我认为避免挑选重复问题的最好方法是，一旦你选择了一个问题，就把它从数组中移除。

编辑：

也许你可以像这样改变你的数组，所以你不需要每次都随机化一个索引：

How can I shuffle an array?

编辑：

从数组中删除元素：

array.splice(index, 1);

splice将返回一个包含已删除元素的数组，如果需要，可以将其推送到另一个数组。

Javascript Trivia Game - 随机化时有重复的问题

1 个答案: