Вопросник для тестирования
PinokPodZad,
:write: вот так примерно ... questions заполнить вопросами и ответами res - оценками (10 вопросов == 11 оценок) <!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> body{ background-color:#66FF99; color:#000099; font-family:"Courier New",Courier,monospace; } ol{ margin: 0 auto ; width:200px; } .show{ width: 400px; margin: 10px auto ; color:#000000; text-shadow:-2px 2px #D2E0EF; font-size:18px; font-family:"Bitter",serif; line-height:1.4; } label{ display:block; margin:10px; padding-left:8px; background:url("http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/checks.png") no-repeat 0 0; background-color:#FFCC66; line-height:24px; border:#000000 1px solid; border-radius:15px; color:#6f8686; text-shadow:0 0 1px rgba(111,134,134,0.3); } label::before{ padding-left:28px; color:#fff; content:attr(data-hover); position:absolute; opacity:0; text-shadow:0 0 1px rgba(255,255,255,0.3); -webkit-transform:scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); -moz-transform:scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); transform:scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); -webkit-transition:-webkit-transform 0.3s,opacity 0.3s; -moz-transition:-moz-transform 0.3s,opacity 0.3s; transition:transform 0.3s,opacity 0.3s; pointer-events:none; } label:hover::before,label:focus::before{ -webkit-transform:scale(1) translateX(0px) translateY(0px) rotate(0deg); -moz-transform:scale(1) translateX(0px) translateY(0px) rotate(0deg); transform:scale(1) translateX(0px) translateY(0px) rotate(0deg); opacity:1; } label.check{ text-shadow:-2px 2px #346392; font-size:24px; color:#fff; background-position:0 -24px; } label.check::before{ content:none; } .zero label{ background-color:#CCCCCC; } .zero label::after{ content:"?"; } h2{ font-family:"Bitter",serif; color: #663300; text-shadow:-2px 2px #FFCC33; margin-bottom:4px; } .err h2{ text-decoration:underline; color:#FF0000; } .ok h2{ color:#339900; } input[type=checkbox]{ width:28px; margin:0; padding:0; opacity:0; } input[type=button]{ display:block; margin: 10px auto ; padding:2px 12px; font-size:24px; font-family:"Bitter",serif; line-height:1.4; appearance:none; color:#fff; text-shadow:-2px 2px #346392; background-color:#A33400; background-image:linear-gradient(top,#6496c8,#346392); box-shadow:inset 0 0 0 1px #27496d; border:none; border-radius:15px; } input[type=button]:focus{ outline:none; } input[type=button]:hover{ box-shadow:inset 0 0 0 1px #27496d,0 5px 15px #193047; } input[type=button]:active{ box-shadow:inset 0 0 0 1px #27496d,inset 0 5px 30px #193047; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function() { var questions = { "Цвет яблок?": { "Синий": false, "Сиреневый": false, "Жёлтый": true, "Красный": true, "Зелёный": true }, "Цвет угля?": { "Синий": false, "Чёрный": true, "Жёлтый": false, "Красный": false, "Зелёный": false } }, answers = [], res = ["НЕДОПУСТИМО!!!", "ХОРОШО!!!", "ОТЛИЧНО!!!"]; var ol = $("<ol/>"); $.each(Object.keys(questions), function(i, el) { answers[i] = [false, true]; var li = $("<li/>", { on: { "change": function(event) { $(this).removeClass("zero") var box = $("input", this), ok = true, choice = true; box.each(function(indx, element) { element.parentNode.className = element.checked ? "check" : ""; element.checked && (choice = false); element.checked != element.value && (ok = false); }); answers[i] = [ok, choice]; } } }).appendTo(ol); $("<h2/>", { text: el }).appendTo(li); var items = Object.keys(questions[el]); $.each(items, function(i, item) { $("<label/>", {"attr" : {"data-hover" : item}}).append( $("<input/>", { type: "checkbox", "class": "myclass", val: +questions[el][item] }) ).append(item).appendTo(li); }); }); $("body").prepend(ol); $(".reset").on("click", function() { $(":checkbox").prop({ "checked": false }); $("li").change().removeClass("err zero ok"); $(".show").html("") }).click(); $(".test").on("click", function() { var ok = 0, mes = ""; $.each(answers, function(indx, el) { $("li").eq(indx).toggleClass("err", !el[0]) .toggleClass("ok", el[0]) .toggleClass("zero", el[1]); if (el[0]) ok++; if (el[1]) { mes = "Не все задания выполнены." }; }); if (!mes) mes = "Количество правильных ответов " + ok + "<br>Ваша оценка " + res[ok]; mes += res.length == ++ok ? "" : "<br> Уточните ответы на вопросы отмеченные красным"; $(".show").html(mes) }) }); </script> </head> <body> <input class="test" name="" type="button" value="Показать результат"> <input class="reset" name="" type="button" value="Сбросить ответы"> <div class="show"></div> </body> </html> |
рони,
По большей части вы сделали то что нужно...но есть несколько вопросов. первый - в тех вопросах где один вариант ответа не нужно давать возможность выбора больше одного варианта ответа. второй - вставляю код в дрим вивер (копи пастом) - получается ерунда ((( как его закопипастить что бы он был рабочим и у меня ? |
рони,
спасибо за помощь! - решил другим путем...нашел программу для создания тестов, вырвал с него код...допилил под себя...осталось лишь несколько проблем...думаю как нить допилю |
Цитата:
<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> body{ background-color:#66FF99; color:#000099; font-family:"Courier New",Courier,monospace; } ol{ margin: 0 auto ; width:200px; } .show{ width: 400px; margin: 10px auto ; color:#000000; text-shadow:-2px 2px #D2E0EF; font-size:18px; font-family:"Bitter",serif; line-height:1.4; } label{ display:block; margin:10px; padding-left:8px; background:url("http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/checks.png") no-repeat 0 0; background-color:#FFCC66; line-height:24px; border:#000000 1px solid; border-radius:15px; color:#6f8686; text-shadow:0 0 1px rgba(111,134,134,0.3); } label::before{ padding-left:28px; color:#fff; content:attr(data-hover); position:absolute; opacity:0; text-shadow:0 0 1px rgba(255,255,255,0.3); -webkit-transform:scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); -moz-transform:scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); transform:scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); -webkit-transition:-webkit-transform 0.3s,opacity 0.3s; -moz-transition:-moz-transform 0.3s,opacity 0.3s; transition:transform 0.3s,opacity 0.3s; pointer-events:none; } label:hover::before,label:focus::before{ -webkit-transform:scale(1) translateX(0px) translateY(0px) rotate(0deg); -moz-transform:scale(1) translateX(0px) translateY(0px) rotate(0deg); transform:scale(1) translateX(0px) translateY(0px) rotate(0deg); opacity:1; } label.check{ text-shadow:-2px 2px #346392; font-size:24px; color:#fff; background-position:0 -24px; } label.check::before{ content:none; } .zero label{ background-color:#CCCCCC; } .zero label::after{ content:"?"; } h2{ font-family:"Bitter",serif; color: #663300; text-shadow:-2px 2px #FFCC33; margin-bottom:4px; } .err h2{ text-decoration:underline; color:#FF0000; } .ok h2{ color:#339900; } input[type=checkbox],input[type=radio]{ width:28px; margin:0; padding:0; opacity:0; } input[type=button]{ display:block; margin: 10px auto ; padding:2px 12px; font-size:24px; font-family:"Bitter",serif; line-height:1.4; appearance:none; color:#fff; text-shadow:-2px 2px #346392; background-color:#A33400; background-image:linear-gradient(top,#6496c8,#346392); box-shadow:inset 0 0 0 1px #27496d; border:none; border-radius:15px; } input[type=button]:focus{ outline:none; } input[type=button]:hover{ box-shadow:inset 0 0 0 1px #27496d,0 5px 15px #193047; } input[type=button]:active{ box-shadow:inset 0 0 0 1px #27496d,inset 0 5px 30px #193047; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function() { var questions = { "Цвет яблок?": { "Синий": false, "Сиреневый": false, "Жёлтый": true, "Красный": true, "Зелёный": true }, "Цвет угля?": { "Синий": false, "Чёрный": true, "Жёлтый": false, "Красный": false, "Зелёный": false } }, answers = [], res = ["НЕДОПУСТИМО!!!", "ХОРОШО!!!", "ОТЛИЧНО!!!"]; var ol = $("<ol/>"); $.each(Object.keys(questions), function(i, el) { answers[i] = [false, true]; var name = "name"+i, li = $("<li/>", { on: { "change": function(event) { $(this).removeClass("zero") var box = $("input", this), ok = true, choice = true; box.each(function(indx, element) { element.parentNode.className = element.checked ? "check" : ""; element.checked && (choice = false); element.checked != element.value && (ok = false); }); answers[i] = [ok, choice]; } } }).appendTo(ol); $("<h2/>", { text: el }).appendTo(li); var items = Object.keys(questions[el]); var tipe = "radio", sum = 0 ; $.each(items, function(indx, item){ questions[el][item] && sum++; sum == 2 && (tipe = "checkbox") }); $.each(items, function(i, item) { $("<label/>", {"attr" : {"data-hover" : item}}).append( $("<input/>", { "type": tipe, "class": "myclass", "name" : name, "val": +questions[el][item] }) ).append(item).appendTo(li); }); }); $("body").prepend(ol); $(".reset").on("click", function() { $(":checkbox, :radio").prop({ "checked": false }); $("li").change().removeClass("err zero ok"); $(".show").html("") }).click(); $(".test").on("click", function() { var ok = 0, mes = ""; $.each(answers, function(indx, el) { $("li").eq(indx).toggleClass("err", !el[0]) .toggleClass("ok", el[0]) .toggleClass("zero", el[1]); if (el[0]) ok++; if (el[1]) { mes = "Не все задания выполнены." }; }); if (!mes) mes = "Количество правильных ответов " + ok + "<br>Ваша оценка " + res[ok]; mes += res.length == ++ok ? "" : "<br> Уточните ответы на вопросы отмеченные красным"; $(".show").html(mes) }) }); </script> </head> <body> <input class="test" name="" type="button" value="Показать результат"> <input class="reset" name="" type="button" value="Сбросить ответы"> <div class="show"></div> </body> </html> |
Часовой пояс GMT +3, время: 01:41. |