0

Есть код теста в котором пять вопросов от балды. Когда нажимается кнопка "проверить" правильные ответы подсвечиваются зеленым, а неправильные красным. То есть, если пользователь ответил неправильно, то его ответ становится красным, а нужный зеленым.

Хотелось бы реализовать тес так, чтобы из пяти вопросов рандомно выбирались три из них (в данном примере). При этом каждый выбранный из списка вопрос выводился на экран отдельно и правильный ответ также подсвечивался зеленым, а неправильный - красным.

window.onload = function() {

  $(".questionsubmit").click(function(e) {
    e.preventDefault();
    $('.correct').parent('p').addClass('checked-right');
    $('.wrong:checked').parent('p').addClass('checked-wrong');
  });

}
<style type="text/css">.checked-wrong {
  background-color: #E12F52;
}

.checked-right {
  background-color: #4CE12F;
}
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.js"></script>

<form action="">
  <div class="question">
    <p>Сколько сантиметров в метре?</p>
    <p><input type="checkbox" class="correct" value="100"> 100</p>
    <p><input type="checkbox" class="wrong" value="1680"> 1680</p>
    <p><input type="checkbox" class="wrong" value="10"> 10</p>
  </div>
  <div class="question">
    <p>Сколько ног у улитки?</p>
    <p><input type="checkbox" class="wrong" value="Две"> Две</p>
    <p><input type="checkbox" class="correct" value="Одна"> Одна</p>
    <p><input type="checkbox" class="wrong" value="Три"> Три</p>
  </div>
  <div class="question">
    <p>Сколько месяцев в году?</p>
    <p><input type="checkbox" class="wrong" value="10"> 10</p>
    <p><input type="checkbox" class="correct" value="12"> 12</p>
    <p><input type="checkbox" class="wrong" value="11"> 11</p>
  </div>
  <div class="question">
    <p>Сколько г в кг?</p>
    <p><input type="checkbox" class="wrong" value="10000"> 10000</p>
    <p><input type="checkbox" class="wrong" value="100"> 100</p>
    <p><input type="checkbox" class="correct" value="1000"> 1000</p>
  </div>
  <div class="question">
    <p>Сколько музыкантов в квинтете?</p>
    <p><input type="checkbox" class="wrong" value="Шесть"> Шесть</p>
    <p><input type="checkbox" class="wrong" value="Три"> Три</p>
    <p><input type="checkbox" class="correct" value="Пять"> Пять</p>
  </div>


  <p><input type="submit" class="questionsubmit" value="Проверить"></p>
</form>

2
  • Попробуйте составьте массив из вопросов, затем рандомно достаньте от туда вопросы (если текущий вопрос == предыдущий, то достать другой вопрос). После чего вывести их на экран. А проверка на правильный и неправильный думаю сможете реализовать. 3 июн 2018 в 16:03
  • Не совсем понимаю, как это сделать... Можете привести пример функции вывода?
    – Хомяк
    3 июн 2018 в 18:44

1 ответ 1

1

'use strict';

var questions = [{
    id: 0,
    question: "Something 0"
  },
  {
    id: 1,
    question: "Something 1"
  },
  {
    id: 2,
    question: "Something 2"
  },
  {
    id: 3,
    question: "Something 3"
  },
  {
    id: 4,
    question: "Something 4"
  }
];
var show = [];
var rnd;
var i = 0;

while (i < 3) {
  rnd = Math.floor(Math.random() * 4); // 0 to 4
  // Find if question is in show array
  var found = show.find(function(cur) {
    return cur.id === questions[rnd].id;
  });
  // Push the question
  if (typeof found === 'undefined') {
    show.push(questions[rnd]);
    ++i;
  } else { // Found generate next random number
    continue;
  }
}

console.log("Show: ", show);


UPD:

window.onload = function() {
  var questions = [{
      id: 0,
      question: "Сколько сантиметров в метре?",
    },
    {
      id: 1,
      question: "Сколько ног у улитки?",
    },
    {
      id: 2,
      question: "Сколько месяцев в году?",
    },
    {
      id: 3,
      question: "Сколько г в кг?",
    },
    {
      id: 4,
      question: "Сколько музыкантов в квинтете?",
    }
  ];
  //----------------------------------------------------------------
  // Randomize questions
  //----------------------------------------------------------------
  var show = [];
  var rnd;
  var i = 0;
  var found = 'undefined';

  while (i < 3) {
    rnd = Math.floor(Math.random() * 5); // 0 to 4

    // Find if question is in 
    found = show.find(function(cur) {
      return cur.id === questions[rnd].id;
    });
    // Push the question
    if (typeof found === 'undefined') {
      show.push(questions[rnd]);
      ++i;
    } else {
      continue;
    }
  }
  //----------------------------------------------------------------

  $(".questionsubmit").click(function(e) {
    e.preventDefault();
    $('.correct').parent().addClass('checked-right');
    $('.wrong:checked').parent().addClass('checked-wrong');
  });
  //----------------------------------------------------------------
  // Get all div elements
  //----------------------------------------------------------------
    var ques = $('form > div');
  for (var i = 0; i < show.length; i++) {
    // Show hide element
    $(ques[show[i].id]).removeClass('hide');
  }
}
.checked-wrong {
  background-color: #E12F52;
}

.checked-right {
  background-color: #4CE12F;
}


/******************** Demo ********************/

label {
  width: 100px;
  margin: 5px 10px;
}

input {
  min-width: 50px;
}

.hide {
  display: none;
}

.show {
  display: block;
}


/******************** Demo End ********************/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <div class="question hide">
    <p>Сколько сантиметров в метре?</p>
    <!-------- p changed to labels -------->
    <label><input type="checkbox" class="correct" value="100"> 100</label><br>
    <label><input type="checkbox" class="wrong" value="1680"> 1680</label><br>
    <label><input type="checkbox" class="wrong" value="10"> 10</label><br>
  </div>
  <div class="question hide">
    <p>Сколько ног у улитки?</p>
    <!-------- p changed to labels -------->
    <label><input type="checkbox" class="wrong" value="Две"> Две</label><br>
    <label><input type="checkbox" class="correct" value="Одна"> Одна</label><br>
    <label><input type="checkbox" class="wrong" value="Три"> Три</label><br>
  </div>
  <div class="question hide">
    <p>Сколько месяцев в году?</p>
    <!-------- p changed to labels -------->
    <label><input type="checkbox" class="wrong" value="10"> 10</label><br>
    <label><input type="checkbox" class="correct" value="12"> 12</label><br>
    <label><input type="checkbox" class="wrong" value="11"> 11</label><br>
  </div>
  <div class="question hide">
    <p>Сколько г в кг?</p>
    <!-------- p changed to labels -------->
    <label><input type="checkbox" class="wrong" value="10000"> 10000</label><br>
    <label><input type="checkbox" class="wrong" value="100"> 100</label><br>
    <label><input type="checkbox" class="correct" value="1000"> 1000</label><br>
  </div>
  <div class="question hide">
    <p>Сколько музыкантов в квинтете?</p>
    <!-------- p changed to labels -------->
    <label><input type="checkbox" class="wrong" value="Шесть"> Шесть</label><br>
    <label><input type="checkbox" class="wrong" value="Три"> Три</label><br>
    <label><input type="checkbox" class="correct" value="Пять"> Пять</label><br>
  </div>


  <p><input type="submit" class="questionsubmit" value="Проверить"></p>
</form>

1
  • Спасибо большое)
    – Хомяк
    4 июн 2018 в 19:56

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.