Мини-тест

@RIMINI · Регистрация: 05.11.2019

Студворк — интернет-сервис помощи студентам

у меня есть программа тестирования. в ней расположены 15 вопросов. мне нужно, чтобы они переключались по нажатию на кнопку. я это делаю вот так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function next_question() {
if (document.getElementById('question4').style.display == "block") {
            document.getElementById('question4').style.display = "none";
            document.getElementById('question5').style.display = "block";
            document.getElementById('but_next').disabled = true;
        }
        if (document.getElementById('question3').style.display == "block") {
            document.getElementById('question3').style.display = "none";
            document.getElementById('question4').style.display = "block";
            document.getElementById('but_next').disabled = true;
        }
        if (document.getElementById('question2').style.display == "block") {
            document.getElementById('question2').style.display = "none";
            document.getElementById('question3').style.display = "block";
            document.getElementById('but_next').disabled = true;
        }
        if (document.getElementById('question1').style.display == "block") {
            document.getElementById('question1').style.display = "none";
            document.getElementById('question2').style.display = "block";
            document.getElementById('but_next').disabled = true;
        }
}

это получается как то объемно. можно ли как то сделать покороче код? может быть циклом каким нибудь
и также необходимо сделать так, чтобы эти вопросы каждый раз были в рандомном порядке. половина ответов на вопросы типа text, а половина radio. показываю я их вот так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="question1" style=" display:block;">
        <p>Вопрос 1</p>
        <p><span id="quest_1"></span> <input type="text"  onkeyup="check();" id="answer_1"></p>
    </div>
<div id="question2" style=" display:none;">
        <p>Вопрос 2</p>
        <p>
            <span id="quest_2"></span><br />
            <input type="radio" name="q_2" value="1" onkeyup="check();" id="answer_8" /><span> сложение, вычитание, умножение</span>
            <br>
            <input type="radio" name="q_2" value="0" onkeyup="check();" id="answer_8" /><span> сложение, умножение, деление</span>
            <br>
            <input type="radio" name="q_2" value="0" onkeyup="check();" id="answer_8" /><span> умножение, деление, вычитание</span>
        </p>
    </div>

правильные ответы на вопросы типа text записаны в переменных, а типа radio помечены id="1"

@shsv382 · 04.05.2020, 23:21

Ну если совсем красиво, чисто и DRYfull переписать, то лучше React использовать, на чистом JS это полночи займет...

@RIMINI · 04.05.2020, 23:30 **[ТС]**

я совсем новичок в этом. первая программа на js. знаю только такой метод, но слишком громоздко, хотелось бы покороче. вообще главная задача в том, чтобы вопросы в рандомном порядке шли

Qwerty_Wasd · 05.05.2020, 01:13

shsv382,

Сообщение от shsv382

то лучше React использовать, на чистом JS это полночи займет.

КХЭММ.....

давно написанный кому-то на форуме пример* (качество кода === рукалицо, сам от себя в шоке - под чем я был когда писал это?)
https://codepen.io/qwerty_wasd/pen/BqEOeQ

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<div class="module-QA">
  <p class="question">Вопрос 1</p>
  <label>Ответ 1.1
    <input class="answer" type="radio" name="group1"/>
  </label>
  <label>Ответ 1.2
    <input class="answer" type="radio" name="group1"/>
  </label>
  <label>Ответ 1.3
    <input class="answer" type="radio" name="group1"/>
  </label>
  <label>Ответ 1.4
    <input class="answer" type="radio" name="group1"/>
  </label>
</div>
<div class="module-QA">
  <p class="question">Вопрос 2</p>
  <label>Ответ 2.1
    <input class="answer" type="radio" name="group2"/>
  </label>
  <label>Ответ 2.2
    <input class="answer" type="radio" name="group2"/>
  </label>
  <label>Ответ 2.3
    <input class="answer" type="radio" name="group2"/>
  </label>
  <label>Ответ 2.4
    <input class="answer" type="radio" name="group2"/>
  </label>
</div>
<div class="module-QA">
  <p class="question">Вопрос 3</p>
  <label>Ответ 3.1
    <input class="answer" type="radio" name="group3"/>
  </label>
  <label>Ответ 3.2
    <input class="answer" type="radio" name="group3"/>
  </label>
  <label>Ответ 3.3
    <input class="answer" type="radio" name="group3"/>
  </label>
  <label>Ответ 3.4
    <input class="answer" type="radio" name="group3"/>
  </label>
</div>
<div class="module-QA">
  <p class="question">Вопрос 4</p>
  <label>Ответ 4.1
    <input class="answer" type="radio" name="group4"/>
  </label>
  <label>Ответ 4.2
    <input class="answer" type="radio" name="group4"/>
  </label>
  <label>Ответ 4.3
    <input class="answer" type="radio" name="group4"/>
  </label>
  <label>Ответ 4.4
    <input class="answer" type="radio" name="group4"/>
  </label>
</div>

CSS
1
2
3
4
5
6
.module-QA {
  margin-top: 50px;
}
.module-QA:not(:first-of-type) {
  display: none;
}

JavaScript
1
2
3
4
5
6
7
8
let modulesQA = document.getElementsByClassName('module-QA');
const getAnswer = event => {
  if (event.target.tagName === 'INPUT' &&
     [...modulesQA].indexOf(event.target.closest('.module-QA')) !== modulesQA.length-1) {
    modulesQA[[...modulesQA].indexOf(event.target.closest('.module-QA'))+1].style.display = 'block';
  }
}
document.body.addEventListener('input', getAnswer, false);

RIMINI, это Вам
https://developer.mozilla.org/... ributes/id

Сообщение от MDN

The id global attribute defines an identifier (ID) which must be unique in the whole document.

Не по теме:

*А нет)) Не так давно как думал - пару лет назад всего вот в эту тему- http://www.cyberforum.ru/javas... 42331.html
В принципе тот ответ можно было сделать вообще без JS. Хотя при варианте с

Сообщение от RIMINI

вопросы в рандомном порядке

он конечно понадобится.

@RIMINI · 05.05.2020, 01:21 **[ТС]**

в данном примере все вопросы появляются сразу на странице. а мне нужно чтобы они менялись по нажатию на кнопку. как это сделать?

Qwerty_Wasd · 05.05.2020, 01:30

Не по теме:

RIMINI, данный пример был ответом не для Вас. А для shsv382.
По Вашему вопросу, заморочнусь позже. Или кто-то раньше Вам напишет.

@RIMINI · 05.05.2020, 01:31 **[ТС]**

можно ли записать все id вопросов в массив, а потом просто рандомно из него вытаскивать их при нажатии на кнопку? не меняя id которые у меня

Qwerty_Wasd · 05.05.2020, 02:31

RIMINI, id ДОЛЖЕН быть уникальным на всей странице. Дайте уж тогда один класс всем элементам с вопросом. Соберите их в коллекцию методом getElementsByClassName, генерируйте целое число от 0 до document.getElementsByClassName(`такой-то_класс`).length - 1, и обращайтесь к элементу
document.getElementsByClassName(`такой-то_класс`)[рандомное целое].

https://codepen.io/qwerty_wasd/pen/wvKpzqg

HTML5
1
2
3
4
5
6
<button id="bt-get-question">кукусики</button><br/><br/>
<div class="question hide">1</div>
<div class="question hide">2</div>
<div class="question hide">3</div>
<div class="question hide">4</div>
<div class="question hide">5</div>

CSS
1
2
3
.hide {
  display: none !important;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
let opTest = {
  button: document.getElementById(`bt-get-question`),
  question: document.getElementsByClassName(`question`),
  events: {
    click: () => {
      Array.prototype.forEach.call(opTest.question, elem => elem.classList.add(`hide`));
      opTest.question[Math.floor(Math.random() * ((opTest.question.length - 1) + 1))].classList.remove(`hide`);
    }
  },
};
 
opTest.button.addEventListener(`click`, opTest.events.click);

Добавлено через 8 минут
Да и перестаньте плодить одинаковые темы. Это я про Создание мини-теста

@RIMINI · 05.05.2020, 11:11 **[ТС]**

не работает. пропадают все вопросы, если даю класс

@shsv382 · 05.05.2020, 14:57

Qwerty_Wasd, это, конечно, круто все, но как эту вашу написанную басню масштабировать? Ну то есть, хочется изменить или добавить вопрос - его надо вручную в HTML дописывать? Но это же не дело!

Вот на той неделе другому товарищу тут делал опросник (JS Опросник для пользователя):

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const questions = [ { question: 'Сколько будет 2+2?', answer: 4 },
{ question: 'Солнце встает на востоке?', answer: true },
{ question: 'Сколько будет 5 << 2 ?', answer: 20 } ];
let points = 0;
 
const handleQuestion = question => {
let handler;
handler = (typeof question.answer) === "boolean" ? confirm : prompt;
return(handler(question.question) == question.answer);
}
 
let q = 0;
while (q < questions.length) {
if (handleQuestion(questions[q])) {
points += 10;
q++;
}  else {
alert('Ответ неверный! Попробуйте еще раз!');
} 
}
 
 
alert(`Ваш результат ${points} баллов!`);

Так тут, чтобы добавить вопрос, нужно просто добавить объект вида {question: string, answer: string | boolean} в массив, и все.

Qwerty_Wasd · 05.05.2020, 15:43

Сообщение от shsv382

но как эту вашу написанную басню масштабировать?

начнем с того, что мы с Вами по разному смотрим на фрагментацию ресурсов в подходе к задачам.
Я обычно выбираю малую кровь при допустимых потерях. К примеру, следуя Вашим курсом, можно было написать целый класс custom elements c использованием shadow dom и не верстать вообще. Но для такой задачки, это как палить нонкой по муравью. Лишние телодвижения. А мой "кашель" в отношении Вашего поста №2, предназначался лишь этому участку

Сообщение от shsv382

на чистом JS это полночи займет.

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

@shsv382 · 05.05.2020, 17:41

RIMINI, https://codesandbox.io/s/nervo... src/App.js
потратил все-таки час из жизни, чисто на интерес, зато теперь, чтобы добавить вопрос, достаточно вписать его в нужном виде в переменную в отдельном файле. Со стилями не заморачивался - сами поиграетесь!
Qwerty_Wasd, да, ваша правда - конечно, когда можно решить задачу малой кровью - лучше так и сделать. Но здесь уже не первый день одна и та же тема создается про один и тот же тест, вот я и пытаюсь человеку подсказать.
А вообще, конечно, из-за подобного "малокровного" подхода сейчас огромное количество сайтов сделано "из говна и палок" - и так сойдет. В разработчики идут люди без инженерного мышления, для которых подход "спроектировать - продумать - сделать" - это слишком сложно, лучше пару тем на форумах запилим, и слепим из того, что было.

Понесло меня чё-то

Qwerty_Wasd · 05.05.2020, 22:07

Не по теме:

Сообщение от shsv382

А вообще, конечно, из-за подобного "малокровного" подхода сейчас огромное количество сайтов сделано "из говна и палок" - и так сойдет. В разработчики идут люди без инженерного мышления, для которых подход "спроектировать - продумать - сделать" - это слишком сложно, лучше пару тем на форумах запилим, и слепим из того, что было.

Вас диаметрально понесло

Не по теме:

Именно системный подход и формирует эти рамки. Это у меня в подписи отпечатано, моей же цитатой(права защищены :D) - ибо это моя репутация.
Я в себе это очень долго формировал, старался, потел... зачастую насилуя себя морально

Не по теме:

А Вы так походя

Сообщение от shsv382

"из говна и палок"

Зачёт

Не по теме:

А если серьезно, приведу аналогию, попроще. Раз конкретика не зашла.
Представьте: задача, клиент нанимает первоклассную команду, чтобы потом выпендриться в своем круге общения, тем как он их в конце поимел. Команда садится в кружок и долго и муторно начинает обсуждать её. Слюни, пена изо рта, драка - и вот наконец обмен знаниями закончен(утрирую конечно :D). Выбрали компромисс, который устроил каждого(ой ли). И понеслось
- программация ПЛК.... "где системщик падла?"
- "А вот смотрите все - я классную штуку придумал, добавим?"
- "сисы, когда дрова готовы будут - пять минут Турецкий!"
и т.д. Клиенту периодически объясняют, что проект уже не тот, он вырос в нечто большее.
Тпеерь это не просто решение, а целая сложная электронная система решающая и сопутствующие задачи.
Очень скоро он сможет гордиться, нене не так - ГОРДИТЬСЯ- своей идеей.
Клиент верит - забыл уже чего хотел.
ПМ смотрел смотрел на всё это, плюнул. Смачно так, с забором соплей. И....... ВЗЯЛ МОЛОТОК и СДЕЛАЛ ДЕЛО!
Потому что задача была - забить три гвоздя в стену КАРЛ!!!!.

Кто-то сейчас смеется - ситуация очень смешная. А кто-то сжимает кулаки - ибо так оно все и есть. Наоборот бывает редко - ибо не рентабельно. Пройдут годы, и так все и останется - конкуренция. В ней рождается не только прогресс.

Не по теме:

А я...я выбираю это => instrumentum dextrum locum. Идеальная на мой взгляд математическая формула. АБСОЛЮТНО универсальна. Ибо если смотреть на рутину \ жизнедеятельность как на мат.модель, абстрагируя есстесно детали, то это просто n-ая система линейных уравнений. Формула выше решает каждое. Лично проверил. Потому и выбрал

Не по теме:

Это, что называется - меня понесло

Не по теме:

Все мысли выше ИМХО естессно, никому не навязываю.

@shsv382 · 05.05.2020, 23:01

Не по теме:

Сообщение от Qwerty_Wasd

Потому что задача была - забить три гвоздя в стену КАРЛ!!!

Чаще всего так и происходит! Но когда на форуме появляется 52-я тема "мини-тест", и ты уже даже угадываешь автора, то лучше уж сразу и гвозди забить, и картину повесить, и полочку...

Естественно ИМХО:)

Qwerty_Wasd · 05.05.2020, 23:04

Не по теме:

shsv382, да хоть сотая тема, это же никак не отменяет принципов и устоев, которыми живете Вы или я. Я предлагаю остаться каждый при своем, а то мы щас заоффтопим тему

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@shsv382 108 / 76 / 27 Регистрация: 14.11.2016 Сообщений: 260
	04.05.2020, 23:21
	Ну если совсем красиво, чисто и DRYfull переписать, то лучше React использовать, на чистом JS это полночи займет... 0

@RIMINI 0 / 0 / 0 Регистрация: 05.11.2019 Сообщений: 80
	04.05.2020, 23:30 [ТС]
	я совсем новичок в этом. первая программа на js. знаю только такой метод, но слишком громоздко, хотелось бы покороче. вообще главная задача в том, чтобы вопросы в рандомном порядке шли 0

@RIMINI 0 / 0 / 0 Регистрация: 05.11.2019 Сообщений: 80
	05.05.2020, 01:21 [ТС]
	в данном примере все вопросы появляются сразу на странице. а мне нужно чтобы они менялись по нажатию на кнопку. как это сделать? 0

Qwerty_Wasd
	05.05.2020, 01:30
	Не по теме: RIMINI, данный пример был ответом не для Вас. А для shsv382. По Вашему вопросу, заморочнусь позже. Или кто-то раньше Вам напишет. 0

@RIMINI 0 / 0 / 0 Регистрация: 05.11.2019 Сообщений: 80
	05.05.2020, 01:31 [ТС]
	можно ли записать все id вопросов в массив, а потом просто рандомно из него вытаскивать их при нажатии на кнопку? не меняя id которые у меня 0

@RIMINI 0 / 0 / 0 Регистрация: 05.11.2019 Сообщений: 80
	05.05.2020, 11:11 [ТС]
	не работает. пропадают все вопросы, если даю класс 0

@shsv382 108 / 76 / 27 Регистрация: 14.11.2016 Сообщений: 260
	05.05.2020, 17:41
	RIMINI, https://codesandbox.io/s/nervo... src/App.js потратил все-таки час из жизни, чисто на интерес, зато теперь, чтобы добавить вопрос, достаточно вписать его в нужном виде в переменную в отдельном файле. Со стилями не заморачивался - сами поиграетесь! Qwerty_Wasd, да, ваша правда - конечно, когда можно решить задачу малой кровью - лучше так и сделать. Но здесь уже не первый день одна и та же тема создается про один и тот же тест, вот я и пытаюсь человеку подсказать. А вообще, конечно, из-за подобного "малокровного" подхода сейчас огромное количество сайтов сделано "из говна и палок" - и так сойдет. В разработчики идут люди без инженерного мышления, для которых подход "спроектировать - продумать - сделать" - это слишком сложно, лучше пару тем на форумах запилим, и слепим из того, что было. Понесло меня чё-то 1

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	05.05.2020, 23:04
	Не по теме: shsv382, да хоть сотая тема, это же никак не отменяет принципов и устоев, которыми живете Вы или я. Я предлагаю остаться каждый при своем, а то мы щас заоффтопим тему 0