Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Квиз форма на сайт (https://javascript.ru/forum/events/79942-kviz-forma-na-sajjt.html)

Cdelphi78 09.04.2020 17:05

Квиз форма на сайт
 
Здравствуйте! Мне необходимо реализовать квиз форму на сайте..я не прошу чтобы мне написали готовый код..но хотя бы подсказали куда копать и чего написать как организовать переходы между окнами и сохранение данных?

Или может быть готовый jquery плагин есть какой?

MOT 13.04.2020 08:57

Cdelphi78,
<style>
#quiz {
width: 200px;
height: 200px;
border: 1px solid black;
}
.result1, .result2, .result3, .result4 {
display: none;
position: relative;
color: #216558;
}
#quiz > #answer1:checked + .span_result1 > .result1 {
display: block;
bottom: -120px;
}
#quiz > #answer2:checked + .span_result2 > .result2 {
display: block;
bottom: -100px;
}
#quiz > #answer3:checked + .span_result3 > .result3 {
display: block;
bottom: -80px;
}
#quiz > #answer4:checked + .span_result4 > .result4 {
display: block;
bottom: -60px;
}
</style>
<form id="quiz">
    <b><i>Как вы произносите название "JavaScript"?</i></b><br>
    <input type="radio" name="quiz" id="answer1"><span class="span_result1">ДжаваСкрипт<div class="result1">Вы выбрали "ДжаваСкрипт"</div></span><br>
    <input type="radio" name="quiz" id="answer2"><span class="span_result2">ЯваСкипт<div class="result2">Вы выбрали "ЯваСкрипт"</div></span><br>
    <input type="radio" name="quiz" id="answer3"><span class="span_result3">ДжабаСкрипт<div class="result3">Вы выбрали "ДжабаСкрипт"</div></span><br>
    <input type="radio" name="quiz" id="answer4"><span class="span_result4">ЕваСкрипт<div class="result4">Вы выбрали "ЕваСкрипт"</div></span>
</form>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
 let k = localStorage.indexAnswer;
 const inp = document.querySelectorAll('[name="quiz"]');
 const click = (elem, i) => elem.addEventListener("click", event =>
 (localStorage.indexAnswer === void 0) ? (localStorage.indexAnswer = i) :
 event.preventDefault()
 );
 inp.forEach(click);
 if(k !== void 0) inp[k].checked = true;
 });

</script>

Понятно, это набросок. Но уже хоть что-то ( в лице запрета на изменение переключателя). Насчёт css стилей - чтобы не использовать js пришлось начудить, но зато всё работает


Часовой пояс GMT +3, время: 18:44.