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 пришлось начудить, но зато всё работает
