Рандомные вопросы в тесте

189
19 декабря 2017, 16:56

Есть код:

<b>Вопрос 1</b> <br><br>
      <input name=v1 onclick="true_1()" type="radio">Правильный ответ
      <br><br>
      <input name=v1 onclick="false_1()" type="radio">Неправильный ответ
      <br><br><div id="1"></div><br>          
      <hr>
<b>Вопрос 2</b> <br><br>
      <input name=v2 onclick="true_2()" type="radio">Правильный ответ
      <br><br>
      <input name=v2 onclick="false_2()" type="radio">Неправильный ответ
      <br><br><div id="2"></div><br>          
      <hr>

И функции:

  function false_1() {
    document.getElementById("1").innerHTML = "Неверно";
  }
  function false_2() {
    document.getElementById("2").innerHTML = "Неверно";
  }

И

      function true_1() {
    document.getElementById("1").innerHTML = "Верно";
  }
  function true_2() {
    document.getElementById("2").innerHTML = "Верно";
  }

На деле на каждый вопрос - одна функция true и одна false. Это необходимо, вопрос в другом. Как сделать, чтобы выдавалось лишь, например, 8 рандомных вопроса? И соответственно сохранились бы все запросы по id, т.е. если вопрос 2 вызывал функцию false_2 и true_2, то и должен вызывать.

Answer 1

Для каждого вопроса делаем тег div и помечаем классом question

<div class="question">
    <b>Вопрос 1</b> <br><br>
    <input name=v1 onclick="true_1()" type="radio">Правильный ответ
    <br><br>
    <input name=v1 onclick="false_1()" type="radio">Неправильный ответ
    <br><br><div id="1"></div><br>
</div>          
<div class="question">
    <b>Вопрос 2</b> <br><br>
    <input name=v2 onclick="true_2()" type="radio">Правильный ответ
    <br><br>
    <input name=v2 onclick="false_2()" type="radio">Неправильный ответ
    <br><br><div id="2"></div><br>          
</div>

По умолчанию класс question скрыт

.question {
    display: none;
}

Получаем массив всех вопросов и показываем случайные 6.

var questions = document.getElementsByClassName("question");
var questionsArray = Array.from(questions);
for(var i=0;i<6;i++) {
     /* случайно определяем номер элемента который необходимо показать */
     var ran = Math.floor(Math.random() * questionsArray.length);
     /* показываем случайный */
     questionsArray[ran].style.display = "block"; 
     /* удаляем показанный элемент из выборки, что бы он не попал второй раз */
     questionsArray.splice(ran,1);
}
Answer 2

Предполагая, что на странице присутствует n-ное количество вопросов, а необходимо оставить случайные m из них, можно поступить следующим образом.

Сначала дожидаемся загрузки контента DOM, далее получаем список всех вопросов и скрываем n - m из них (комментарии будут в коде):

document.addEventListener("DOMContentLoaded", function() {
    var questions = document.qeurySelectorAll("b"), // получаем список вопросов. Здесь я просто беру все теги `b` исходя из приведенного HTML
        numberOfQuestions = questions.length, // это будет `n` (см. выше)
        hiddenQuestions = []; // здесь будут храниться уже скрытые вопросы
    while (hiddenQuestions.length < 9) { // пока скрытых вопросов меньше `m` (см. выше) + 1
        var num = Math.random() * numberOfQuestions | 0; // генерируем случайный номер вопроса, который будет удален
        if (questions[num]) { // проверяем, существует ли такой вопрос (может его уже удалили ранее, Math.random() может генерировать одно и то же число)
            questions[num].remove(); // удаляем вопрос со страницы
            hiddenQuestions.push(num); // помечаем вопрос как удаленный, запихивая его в массив к удаленным вопросам. Далее по кругу, пока не будет удалено 8 вопросов (в данном случае).
        }
    }
});

Единственное только что я здесь удаляю именно тело вопроса (сам вопрос), варианты ответов при этом остаются. Решение - обернуть каждый вопрос в отдельный тег и работать уже и ними:

<div class="q">
    <b>Вопрос 1</b> <br><br>
          <input name=v1 onclick="true_1()" type="radio">Правильный ответ
          <br><br>
          <input name=v1 onclick="false_1()" type="radio">Неправильный ответ
          <br><br><div id="1"></div><br>          
          <hr>
</div>

И получать список вопросов как document.querySelectorAll("div.q"), например.

READ ALSO
Приходят пустые html письма

Приходят пустые html письма

При отправки html писем, на некоторых моделях iphone приходят пустыеСмотрю с iphone 4, все нормально, iphone 8 и iphone 8+ письма пустые, если пустое письмо...

165
Панель закладок в несколько строк для Firefox 57/58? [требует правки]

Панель закладок в несколько строк для Firefox 57/58? [требует правки]

Для firefox quantom пока не существует расширения для многострочных вкладок как Multirow bookmarks toolbarА как сделать такое без установки расширения ?

531
Как прижать футер к низу? [дубликат]

Как прижать футер к низу? [дубликат]

На данный вопрос уже ответили:

233
Flexbox вёрстка. Margin

Flexbox вёрстка. Margin

1) Пытаюсь сверстать navbar на flexbox, на float-ах было бы проще сделать то, что я хочу, но стараюсь всё делать именно на flexboxТак вот, вопрос: можно ли как-то...

229