Мой код который работает, проблема в том что если ответить на первый вопрос, и дальше нажимать ответить не выбирая вариант он покажет 4 из 4, а как сделать либо чтобы нельзя было отвечать пока не будет выбран radio либо заблокировать submit или спрятать кнопку с помощью css? вообщем такая суть...
<!DOCTYPE html>
<html>
<head>
<title>Тест 1</title>
<meta charset="windows-1251" />
<style type="text/css">
body {margin: 150px 0px 0px 0px; padding: 0px;}
a.knopka {
color: #fff; /* цвет текста */
text-decoration: none; /* убирать подчёркивание у ссылок */
user-select: none; /* убирать выделение текста */
background: #1E90FF; /* фон кнопки */
padding: .7em 1.5em; /* отступ от текста */
outline: none; /* убирать контур в Mozilla */
z-index:1;
position:relative;
left:328px;
bottom:45px;
}
a.knopka:hover { background: rgb(232,95,76); } /* при наведении курсора мышки */
a.knopka:active { background: rgb(152,15,0); } /* при нажатии */
}
div.container{
position:absolute;
top:-90px;
}
.content{
position:relative;
margin:0px auto;
width:980px;
height:566px;
z-index:1;
top:-88px;
}
div.questionBlock {
display: none;
}
.questionBlock{
width: 710px;
height: 577px;
position: absolute;
top: 65%;
left: 40%;
margin-left: -250px;
margin-top: -300px;
}
div#imgtest1{
z-index:0;
position:absolute !important;
width:200px;
height:100px;
margin-left:460px !important;
margin-top:-190px !important;
}
input{
font-size: 22px;
color:#000000;
margin-top: 0.1em; /* Отступ сверху */
margin-bottom: 0.2em; /* Отступ снизу */
line-height:1;
text-align:left;
z-index:2;
}
label{
font-size:22px;
color:#000000;
margin-top: 0.1em; /* Отступ сверху */
margin-bottom: 0.2em; /* Отступ снизу */
line-height:1;
text-align:justify;
z-index:2;
}
.vopros{
font-size: 32px;
text-align:justify;
color:#000000;
}
.vopros22{
font-size: 32px;
text-align:justify;
color:#000000;
}
sq{
font-size:32pt;
color:#000000;
text-align:center;
position: absolute;
top: 45%;
left: 50%;
margin-left: -370px;
margin-top: -100px;
}
#w{
position: relative;
bottom: 100px;
left: 385px;
margin-left: -200px;
margin-top: -189px;
z-index:1;
text-align:center;
color: #000000; /* цвет текста */
text-decoration: none; /* убирать подчёркивание у ссылок */
user-select: none; /* убирать выделение текста */
background: #FCC200; /* фон кнопки */
padding: .7em 1.5em; /* отступ от текста */
outline: none; /* убирать контур в Mozilla */
#w:hover { background: rgb(232,95,76); } /* при наведении курсора мышки */
#w:active { background: rgb(152,15,0); } /* при нажатии */
}
.knopp{
text-align:center;
}
</style>
<script type = "text/javascript">
var answer;
</script>
</head>
<body text="#000000" style="background-color:#FFFFCE;background-image:url(../wpimages/oglaviepravgos.jpg);background-repeat:no-repeat;background-position:center center;background-attachment:scroll;height:655px;">
<div class="container">
<div class="content">
<div class = "questionBlock">
<p class="vopros">1. Когда был принят Конституционный закон «О Государственных символах Республики Казахстан»? </p><br>
<input type = "radio" name=q1 id="radio1"onclick="qa.nowRight = 1"><label for="radio1">4 июня 2007 года </label><br><br>
<input type = "radio" name=q1 id="radio2"onclick="qa.nowRight = 0"><label for="radio2">7 июля 2008 года </label><br><br>
<input type = "radio" name=q1 id="radio3"onclick="qa.nowRight = 0"><label for="radio3">6 мая 2009 года </label><br><br>
</div>
<div class = "questionBlock">
<p class="vopros">2. Кто является автором флага Республики Казахстан? </p><br><br>
<input type = "radio" name=q2 id="radio4"onclick="qa.nowRight = 0"><label for="radio4">Нурсултан Назарбаев</label><br><br>
<input type = "radio" name=q2 id="radio5"onclick="qa.nowRight = 0"><label for="radio5">Шамшы Калдаяков </label><br><br>
<input type = "radio" name=q2 id="radio6"onclick="qa.nowRight = 1"><label for="radio6">Шакен Ниязбеков </label><br><br>
</div>
<div class = "questionBlock">
<p class="vopros">3. Вексиллология – это историческая дисциплина, которая занимается изучением: </p><br><br>
<input type = "radio" name=q3 id="radio7"onclick="qa.nowRight = 0"><label for="radio7">гербов</label><br><br>
<input type = "radio" name=q3 id="radio8"onclick="qa.nowRight = 1"><label for="radio8">флагов</label><br><br>
<input type = "radio" name=q3 id="radio9"onclick="qa.nowRight = 0"><label for="radio9">гимнов</label><br><br>
</div>
<div class = "questionBlock">
<p class="vopros">4. Какого цвета флаг Республики Казахстан?</p><br><br>
<input type = "radio" name=q4 id="radio10"onclick="qa.nowRight = 0"><label for="radio10">Синий </label><br><br>
<input type = "radio" name=q4 id="radio11"onclick="qa.nowRight = 1"><label for="radio11">Голубой </label><br><br>
<input type = "radio" name=q4 id="radio12"onclick="qa.nowRight = 0"><label for="radio12">Бирюзовый</label><br><br>
</div>
</div>
</div>
<div class="knopp">
<a href="vibortestsimvol.html" class="knopka">ВЫЙТИ</a></a>
<input type="button" id="w" value="Ответить" onclick="qa.nextOrResult()">
<div id="result"></div>
</div>
<script type = "text/javascript" class="javastill">
var qa = new QuestAnalizer();
function QuestAnalizer() {
var now = 0, printed = false, rightCount = 0;
var questionBlocks = document.querySelectorAll("div.questionBlock");
var allQCount = questionBlocks.length;
this.nowRight = 0;
questionBlocks[now].style.display = "block";
this.nextOrResult = function () {
if (now >= allQCount-1) {
now++;
if (!printed) {
rightCount += this.nowRight;//проверка послед.вопроса
questionBlocks[now - 1].style.display = "none"
var sq = document.createElement("sq");
sq.innerHTML = "Верных ответов " + rightCount + " из " + (allQCount).toFixed(0);
document.getElementById('result').appendChild(sq);
printed = true;
if (rightCount == 4){
sq.innerHTML = ("Молодец!<br>Ты правильно ответил на все вопросы!<br>20 из 20!");
}
} else {
alert("Ваш результат на экране.");
}
} else {
questionBlocks[now].style.display = "none";
now++;
rightCount += this.nowRight;
questionBlocks[now].style.display = "block";
}
}
}
</script>
</body>
</html>
Простой
