Прошу помощи. Отобразить и скрыть карточки тестов
Добрый день всем форумчанам.
Написал сайт тестов на РНР, все прекрасно работает, но у меня стала одна проблема которую уже несколько дней решить не могу. Т.к в JS не могу ничего понять... Задача стоит такая: 1. Есть 100 вопросов, они все загружаются на страницу при переходе на нее (они все невидимые(спрятаны)) 2. При старте страницы код JS начиная с 1го вопроса проверяет есть ли на этом вопросе маркер=1 (значит отвечен), если ответа не было показывает "вопрос 1" и т.д 3. Есть 2 кнопки Пропустить и Следующий, при нажатии на кнопку следующий текущему вопросу присваивается маркер=1 (значит уже отвечен) и код проверяет следующий вопрос, если его маркер 0 - не отвечен, показывает его. 4. Когда доходит до 100го вопроса код начинается сначала... Надеюсь понятно объяснил задачу... Позже я могу привести код своих "жалких" попыток это реализовать, возможно вы сможете подсказать какие ошибки в нем и как лучше стоит это сделать... Но возможно кто-то поможет с написанием. Благодарю. |
Спасибо всем кто откликнулся (т.е никому!). Отдельное тому человеку который поставил -10. Наверное он силен в JS поэтому смогу оставить лишь кривой комент к моему сообщению и эти жалкие "-10" к карме.
Привожу рабочий код: (Возможно кому нибудь пригодится)
$tab='tab'.$i; // отрывок из кода вопросы создаем циклом: каждому табу присваиваем имя+номер
if ($i==1) {$display="display:block";} else {$display="display:none";} // на старте скрываем все кроме 1го
<div style="$display;" id="$tab" > //
// Контейнер для вопроса
<input type="hidden" id="setup_$tab" value='0'> // для отметки вопроса на который уже ответили
<input type='button' onclick="skip($i);" value="Пропустить" />
<input type='button' onclick="next($i);" value="Следующий" />
</div>
var i=0;
var tab=1;
function hide(prev,next){
document.getElementById(prev).style.display='none';
document.getElementById(next).style.display='block';
}
function next(tab) {
i++
var tab_setup_this = 'setup_tab'+ (tab);
document.getElementById(tab_setup_this).value = 1;
if (i==8){
document.test_form.submit();
}
else
{
var getThisTab = (function(tab){
var counter = tab;
for (n=tab; n<=10;n++){ // Кол-во вопросов +2 чтоб не вылететь из цикла на последнем вопросе
if (n==9) { n = 1; counter=1;} // на последнем вопросе начинаем перебор сначала
var tab_setup_this = 'setup_tab'+ (n);
if (document.getElementById(tab_setup_this).value == 0){break};
counter++;
}
return(counter);
});
var tab_part1 = 'tab'+ tab;
var tab_part2 = 'tab' + (getThisTab(tab));
hide(tab_part1,tab_part2);
}
}
function skip(tab) {
tab++;
var getThisTab = (function(tab){
var counter = tab;
for (n=tab; n<=10;n++){
if (n==9) {
n = 1;
counter=1;}
var tab_setup_this = 'setup_tab'+ (n);
if (document.getElementById(tab_setup_this).value == 0){break};
counter++;
}
return(counter);
});
var tab_part1 = 'tab'+ (tab - 1) ;
var tab_part2 = 'tab' + (getThisTab(tab));
hide(tab_part1,tab_part2);
}
|
Цитата:
http://javascript.ru/forum/misc/3706...-otvetili.html |
Я был на работе, а код дома. Я об этом написал в первом посте!
Цитата:
|
:write: Вариант для любого массива вопросов ... в данном случае 10 ... строка 27
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.hide, .ok{
display: none;
}
.show {
display: block;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script>
$(function () {
function d() {
var b;
a.next("div.hide").size() ? b = a.next("div.hide") : $("div.hide:first").size() ? b = $("div.hide:first") : ($("button").hide(), b = $("<div/>", {
text: "Вопросов нет"
}), c.append(b));
a = b;
a.addClass("show")
}
var c = $("<div/>"),
a;
$.each(Array(10), function (a) {
c.append($("<div/>", {
text: "Вопрос № " + ++a,
"class": "hide"
}))
});
$("<button/>", {
text: "Пропустить",
click: function () {
a.removeClass("show");
d()
}
}).appendTo(c);
$("<button/>", {
text: "Следующий",
click: function () {
a.removeClass("show hide").addClass("ok");
d()
}
}).appendTo(c);
$("body").append(c);
a = $("div.hide:last");
d()
});
</script>
</head>
<body>
</body>
</html>
|
| Часовой пояс GMT +3, время: 12:07. |