20.03.2013, 02:37
|
Интересующийся
|
|
Регистрация: 20.03.2013
Сообщений: 16
|
|
Помощь в тесте
Помогите решить проблему!.. Нужно в данном тесте сделать так чтобы каждый вопрос шел последовательно. Ответил на один, потом появился другой и.т.д
<!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>
|
|
20.03.2013, 08:46
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
Как думаешь, зачем тут эти кнопочки?
|
|
20.03.2013, 10:48
|
|
I am Student
|
|
Регистрация: 17.12.2011
Сообщений: 4,415
|
|
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>
__________________
Цитата:
|
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
|
|
|
24.03.2013, 06:20
|
Интересующийся
|
|
Регистрация: 20.03.2013
Сообщений: 16
|
|
cyber спасибо большое! Но можешь пожалуйста помочь связать теперь твою функцию и мои! ... так чтобы тест начанался с кнопки старт, был таймер по истечению которого кончался тест и показывал результат... А то я делаю и у меня каша получается(( и ни чего не запускается
|
|
24.03.2013, 13:46
|
|
I am Student
|
|
Регистрация: 17.12.2011
Сообщений: 4,415
|
|
Сообщение от fsb-k
|
так чтобы тест начанался с кнопки старт, был таймер по истечению которого кончался тест и показывал результат
|
1. поменяй название кнопки в первом блоке на "старт".
2. что бы запустить таймер проверяй значение i во время клика
if(i == 0){
// start taimer
}
3. при переходе к следуюещему блоку сохранять ответ в массив , в конце сравнивать
4. если таймер закончился раньше чем пользователь прошел тест просто переходи к результатам
__________________
Цитата:
|
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
|
|
|
25.03.2013, 02:07
|
Интересующийся
|
|
Регистрация: 20.03.2013
Сообщений: 16
|
|
cyber, cyber мы с друганом уже весь мозг вынесли, всеравно ни чего не получается. Мы не можем твою функцию подбить под наши(( Можешь помочь с выполнением работы!
Последний раз редактировалось fsb-k, 25.03.2013 в 05:14.
|
|
25.03.2013, 16:33
|
|
I am Student
|
|
Регистрация: 17.12.2011
Сообщений: 4,415
|
|
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>
__________________
Цитата:
|
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
|
|
|
26.03.2013, 00:40
|
Интересующийся
|
|
Регистрация: 20.03.2013
Сообщений: 16
|
|
cyber,
Спасибо тебе огромное!.. выручил очень сильно!!!!
|
|
26.03.2013, 04:54
|
Интересующийся
|
|
Регистрация: 20.03.2013
Сообщений: 16
|
|
cyber,
Извени пожалуйста мы уже замучали со своими вопросами.. Помоги пожалуйста!.. нам до конца нужно еще вставить функцию, чтобы в конце теста он отображал колличество правильных ответов и быллы! как у нас было в нашем тесте!) а теперь связать наш и твой исходник у нас не получится((( зараннее спасибо!!!!
|
|
26.03.2013, 15:19
|
|
I am Student
|
|
Регистрация: 17.12.2011
Сообщений: 4,415
|
|
fsb-k,функция end в ней делай так как нужно,
параметр (булевый) time_end:
true - время закончилось до того как дошли до конца теста
false - дошли до конца теста
в переменной i номер текущего вопроса
__________________
Цитата:
|
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
|
|
|
|
|