| danik.js | 20.03.2013 08:46 |
Как думаешь, зачем тут эти кнопочки?
Помощь в тесте
Помогите решить проблему!.. Нужно в данном тесте сделать так чтобы каждый вопрос шел последовательно. Ответил на один, потом появился другой и.т.д
<!DOCTYPE html PUBLIC <head> <title>Тест</title> <style type="text/css"> #blok{ display: none; } </style> <script type="text/javascript"> var d=document, rez=0, time='5', //общее время ball=2, //балл за вопрос vsego=2, //всего вопросов count=0; //Кол-во правильных ответов function timer(){ var obj=document.getElementById('timer'); obj.innerHTML--; if(obj.innerHTML==0){ stopTest(); setTimeout(function(){},1000);} else{setTimeout(timer,1000);} } function startTest(){ d.getElementById("timer").innerHTML=time; setTimeout(timer,1000); d.getElementById("blok").style.display='block'; d.getElementById("btStart").style.display='none'; } function stopTest(){ var i=0; for(i=0; i<d.getElementsByName("q1").length; i++){ if(d.getElementsByName("q1")[i].checked) { if(i==1){rez+=2; count++;} } } alert('Вы набрали '+((rez/ball)/vsego)*100+' %\nВы правильно ответили на '+count+ ' вопросов из '+vsego+'.'); d.getElementById("blok").style.display='block'; d.getElementById("btStart").style.display='block'; location.reload(true); rez=0; count=0; } </script> </head> <body> <input type="button" name="btStart" value="Старт тест" onclick="startTest()" id="btStart"/> <div id="blok"> <p style="float:left;">Осталось времени: </p> <p id="timer"></p> <form method="get" enctype="text/plain" name="testForm"> <div id = "questionBlock"> Вопрос 1</p> <input type = "radio" name=q1 onclick="qa.nowRight = 0">128 Mb;<br> <input type = "radio" name=q1 onclick="qa.nowRight = 0">327 Mb;<br> <input type = "radio" name=q1 onclick="qa.nowRight = 0">452 Mb;<br> <input type = "radio" name=q1 onclick="qa.nowRight = 1">622 Mb;<br> <input type = "radio" name=q1 onclick="qa.nowRight = 0">842 Mb;<br> </div> <div id = "questionBlock"> Вопрос 2</p> <input type = "radio" name=q2 onclick="qa.nowRight = 0">128 Mb;<br> <input type = "radio" name=q2 onclick="qa.nowRight = 0">327 Mb;<br> <input type = "radio" name=q2 onclick="qa.nowRight = 0">452 Mb;<br> <input type = "radio" name=q2 onclick="qa.nowRight = 1">622 Mb;<br> <input type = "radio" name=q2 onclick="qa.nowRight = 0">842 Mb;<br> </div> <input type="button" value="Принять ответ" name="ok" onclick="stopTest()"/> <input type="reset" value="Сбросить" name="res" /> </form> </body> </html> |
Как думаешь, зачем тут эти кнопочки? |
fsb-k, делал быстро, если что пишите
<!DOCTYPE HTML>
<html>
<head> </head>
<body>
<div id="conteiner">
<div class="questions">
<input type = "radio" name=q1 onclick="qa.nowRight = 0">128 Mb;<br>
<input type = "radio" name=q1 onclick="qa.nowRight = 0">327 Mb;<br>
<input type = "radio" name=q1 onclick="qa.nowRight = 0">452 Mb;<br>
<input type = "radio" name=q1 onclick="qa.nowRight = 1">622 Mb;<br>
<input type = "radio" name=q1 onclick="qa.nowRight = 0">842 Mb;<br>
<input type = "button" class="confirm" value="confirm">
</div>
<div class="questions">
<input type = "radio" name=q2 onclick="qa.nowRight = 0">28 Mb;<br>
<input type = "radio" name=q2 onclick="qa.nowRight = 0">327 Mb;<br>
<input type = "radio" name=q2 onclick="qa.nowRight = 0">452 Mb;<br>
<input type = "radio" name=q2 onclick="qa.nowRight = 1">622 Mb;<br>
<input type = "radio" name=q2 onclick="qa.nowRight = 0">842 Mb;<br>
<input type = "button" class="confirm" value="confirm">
</div>
</div>
<script>
function Tests(_container) {
var i = 0;
var qs = document.getElementsByClassName("questions");
for(var j = 1, leng = qs.length; j < leng; j++)
qs[j].style.display = "none";
_container.onclick = function (e){
var target = e.target || event.scrElement;
if(target.className.indexOf("confirm") == -1)return;
next();
}
function next(){
qs[i].style.display = "none";
i++;
qs[i].style.display = "";
}
}
Tests(document.getElementById("conteiner"));
</script>
</body>
</html>
|
cyber спасибо большое! Но можешь пожалуйста помочь связать теперь твою функцию и мои! ... так чтобы тест начанался с кнопки старт, был таймер по истечению которого кончался тест и показывал результат... А то я делаю и у меня каша получается(( и ни чего не запускается:( :help:
|
Цитата:
2. что бы запустить таймер проверяй значение i во время клика
if(i == 0){
// start taimer
}
3. при переходе к следуюещему блоку сохранять ответ в массив , в конце сравнивать 4. если таймер закончился раньше чем пользователь прошел тест просто переходи к результатам |
cyber,:help: cyber мы с друганом уже весь мозг вынесли, всеравно ни чего не получается. Мы не можем твою функцию подбить под наши(( Можешь помочь с выполнением работы! :help:
|
fsb-k,как видишь все просто
<!DOCTYPE HTML>
<html>
<head>
<style>
.correctly {
background-color:green;
}
.wrong {
background-color:red;
}
</style>
</head>
<body>
<div id="conteiner">
<div id="timer"></div>
<div class="questions">
1<br>
<input type = "radio" name="q1" class="answer" value = "28" checked>28 Mb;<br>
<input type = "radio" name="q1" class="answer" value ="327">327 Mb;<br>
<input type = "radio" name="q1" class="answer" value = "452">452 Mb;<br>
<input type = "radio" name="q1" class="answer" value = "622">622 Mb;<br>
<input type = "radio" name="q1" class="answer" value = "842">842 Mb;<br>
<input type = "button" class="confirm" value="confirm">
</div>
<div class="questions">
2<br>
<input type = "radio" class="answer" name="q2" value = "28" checked>28 Mb;<br>
<input type = "radio" name="q2" class="answer" value ="327">327 Mb;<br>
<input type = "radio" name="q2" class="answer" value = "452">452 Mb;<br>
<input type = "radio" name="q2" class="answer" value = "622">622 Mb;<br>
<input type = "radio" name="q2" class="answer" value = "842">842 Mb;<br>
<input type = "button" class="confirm" value="confirm">
</div>
<div class="questions">
3<br>
<input type = "radio" name="q3" class="answer" value = "28" checked>28 Mb;<br>
<input type = "radio" name="q3" class="answer" value ="327">327 Mb;<br>
<input type = "radio" name="q3" class="answer" value = "452">452 Mb;<br>
<input type = "radio" name="q3" class="answer" value = "622">622 Mb;<br>
<input type = "radio" name="q3" class="answer" value = "842">842 Mb;<br>
<input type = "button" class="confirm" value="confirm">
</div>
<div id ="result"></div>
</div>
<script>
function $(selector, elem) {
elem = elem || document;
return elem.querySelector(selector);
}
function Tests(params) {
var i = 0;
var _container = params.container,
_timer = params.timer,
_result = params.result,
self = this,
stop = false;
var user_answers = [];
var qs = document.getElementsByClassName("questions");
for(var j = 0, leng = qs.length; j < leng; j++)
qs[j].style.display = "none";
_container.onclick = function (e){
var target = e.target || event.scrElement;
if(target.className == "answer" ){
user_answers[i] = target.value;
}
if(target.className.indexOf("confirm") == -1)return;
if(!user_answers[i]){
user_answers[i] = $("[checked]", $(".questions")).value;
}
next();
}
this.start = function (hour , minutes, seconds){
var end_time = new Date();
end_time.setHours(end_time.getHours() + hour);
end_time.setMinutes(end_time.getMinutes() + minutes);
end_time.setSeconds(end_time.getSeconds() + seconds)
!function timerTicks(){
var d = end_time - new Date();
if(d <= 0){
end(true);
return;
}
_timer.innerHTML = getTimeToEnd(d);
if(!stop) setTimeout(timerTicks, 1000);
}();
qs[i].style.display = "";
}
function getTimeToEnd(mSec){
var h = Math.floor(mSec / 3600000);
var m = Math.floor(mSec % 3600000 / 60000);
var s = Math.floor(mSec % 60000 / 1000 );
return view(h) +":" + view(m) + ":" + view(s);
}
function end(time_end){
stop = true;
var result = "<table><tr><td>№</td><td>Ответ</td></tr>",
_class, val;
var leng = time_end ? i : qs.length;
for(var j = 0; j <leng; j++)
{
if(time_end)
val = $("[checked]", qs[i]).value;
else val = user_answers[j];
if(val == params.answers[j])
_class = "correctly";
else _class = "wrong";
result += "<tr><td>" + (j+1) + "</td><td class = ' "+ _class + "'>" + val+"</td>";
}
_result.innerHTML = result + "</table>";
qs[i].style.display = "none";
}
function view(num){
return num < 10 ? "0"+num : num;
}
function next(){
qs[i].style.display = "none";
if(i == qs.length -1) {
end(false);
return;
}
i++;
qs[i].style.display = "";
}
}
var answers = [];
answers[0] = 28;
answers[1] = 327;
answers[2] = 452;
var tests = new Tests({
container: $("#conteiner"),// контейнер с вопросами
timer: $("#timer"),//блок для вывода времени
result: $("#result"),// блок для вывода результата
answers: answers
});
tests.start(0,0,10);// как только вызывается этот метод начинается тест. параметры метода это время отведенное на тест(часы, минуты, секунды)
</script>
</body>
</html>
|
cyber,
Спасибо тебе огромное!.. выручил очень сильно!!!! |
cyber,
Извени пожалуйста мы уже замучали со своими вопросами.. Помоги пожалуйста!.. нам до конца нужно еще вставить функцию, чтобы в конце теста он отображал колличество правильных ответов и быллы! как у нас было в нашем тесте!) а теперь связать наш и твой исходник у нас не получится((( зараннее спасибо!!!! |
fsb-k,функция end в ней делай так как нужно,
параметр (булевый) time_end: true - время закончилось до того как дошли до конца теста false - дошли до конца теста в переменной i номер текущего вопроса |
| Часовой пояс GMT +3, время: 07:24. |