vendredi 16 octobre 2020

How method question(parent element) can get option(child element) in both random condition?

$(function() {
  $("#question2").hide();
  $("#question3").hide();
  $("#question1").hide();
  const options = [$(".option1"), $(".option2"), $(".option3"), $(".option4")];
  let randomOption = function() {

    const texts = options
      .map(opt => opt[0].textContent)
      .sort(() => .5 - Math.random());

    $(".option1").text(texts[0]);
    $(".option2").text(texts[1]);
    $(".option3").text(texts[2]); 
    $(".option4").text(texts[3]);
   
  }

  let questions = [$("#question1"), $("#question2"), $("#question3")]
  const randomQuestion = questions.sort(() => .5 - Math.random());
  randomQuestionCount = 0;
  let QuestionsChoose = function(nowPage) {
    nowPage.fadeOut();
    randomQuestionCount++;
    console.log(randomQuestionCount);
    if (randomQuestionCount < questions.length) {
      if (randomQuestion[randomQuestionCount].is(nowPage)) {
        randomQuestion[randomQuestionCount++].fadeIn();
      } else {
        randomQuestion[randomQuestionCount].fadeIn();
      }
    }

  }
  randomQuestion[0].fadeIn();
  $("#question1 button").click(function() {
    randomOption();
    QuestionsChoose($("#question1"));
  })
  $("#question2 button").click(function() {
    randomOption();
    QuestionsChoose($("#question2"));
  })
  $("#question3 button").click(function() {
    randomOption();
    QuestionsChoose($("#question3"));
  })
})
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div id="question1">question 1
  <button class="option1">question1-1</button>
  <button class="option2">question1-2</button>
  <button class="option3">question1-3</button>
  <button class="option4">question1-4</button>
</div>
<div id="question2">question 2
  <button class="option1">question 2-1</button>
  <button class="option2">question 2-2</button>
  <button class="option3">question 2-3</button>
  <button class="option4">question 2-4</button>
</div>
<div id="question3">question 3
  <button class="option1">question 3-1</button>
  <button class="option2">question 3-2</button>
  <button class="option3">question 3-3</button>
  <button class="option4">question 3-4</button>
</div>
How method question(parent element) can get option(child element) in both random condition? i want question2 get 2-1,2-2,2-3,2-4 And so on. because i try many time only question1 1-1~4 show screen. this is difficult to me.hope some body help me. randomOption seems add some code. but i no have idea. thanks everyone.


Aucun commentaire:

Enregistrer un commentaire