Квиз форма на сайт
Здравствуйте! Мне необходимо реализовать квиз форму на сайте..я не прошу чтобы мне написали готовый код..но хотя бы подсказали куда копать и чего написать как организовать переходы между окнами и сохранение данных?
Или может быть готовый jquery плагин есть какой? |
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. |