PinokPodZad,
вот так примерно ...
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>