Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 27.01.2015, 04:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Вопросник для тестирования
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>

Последний раз редактировалось рони, 04.06.2022 в 18:25.
Ответить с цитированием
  #12 (permalink)  
Старый 27.01.2015, 16:46
Интересующийся
Отправить личное сообщение для PinokPodZad Посмотреть профиль Найти все сообщения от PinokPodZad
 
Регистрация: 26.01.2015
Сообщений: 16

рони,
По большей части вы сделали то что нужно...но есть несколько вопросов.
первый - в тех вопросах где один вариант ответа не нужно давать возможность выбора больше одного варианта ответа.
второй - вставляю код в дрим вивер (копи пастом) - получается ерунда ((( как его закопипастить что бы он был рабочим и у меня ?
Ответить с цитированием
  #13 (permalink)  
Старый 27.01.2015, 19:32
Интересующийся
Отправить личное сообщение для PinokPodZad Посмотреть профиль Найти все сообщения от PinokPodZad
 
Регистрация: 26.01.2015
Сообщений: 16

рони,
спасибо за помощь! - решил другим путем...нашел программу для создания тестов, вырвал с него код...допилил под себя...осталось лишь несколько проблем...думаю как нить допилю
Ответить с цитированием
  #14 (permalink)  
Старый 27.01.2015, 20:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от PinokPodZad
первый - в тех вопросах где один вариант ответа не нужно давать возможность выбора больше одного варианта ответа
нет проблем ... смотрите выбор цвета угля
<!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>

Последний раз редактировалось рони, 04.06.2022 в 18:25.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Создать математический тренажер. NTG Javascript под браузер 3 22.04.2014 10:36
календарь с возможностью выбора нескольких дат vladislav.blinov Javascript под браузер 0 15.07.2013 14:37
Тест в php. Некорректный подсчет правильных ответов. KamalovRadik Серверные языки и технологии 1 17.05.2012 03:52