Мини-тест

@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, да хоть сотая тема, это же никак не отменяет принципов и устоев, которыми живете Вы или я. Я предлагаю остаться каждый при своем, а то мы щас заоффтопим тему

Новые блоги и статьи Все статьи Все блоги /
Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .	Запрет удаления строк ТЧ документа при определенном условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .
Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .

@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