API tools faq
paste
Advertisement
MarkUa

Untitled

MarkUa
Jun 29th, 2019
468
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.50 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>CreateTests</title>
  6. </head>
  7. <style>
  8.  
  9.     header {
  10.         height: 65px;
  11.     }
  12.  
  13.     #heads {
  14.  
  15.         height: 65px;
  16.         position: fixed;
  17.         width: 100%;
  18.     }
  19.  
  20.     article {
  21.  
  22.         height: auto;
  23.         margin: 0;
  24.     }
  25.  
  26.     body {
  27.            background-color: whitesmoke;
  28.         margin: 0;
  29.         padding: 0;
  30.     }
  31.  
  32.     #courseName {
  33.         font-family: Arial, Helvetica, sans-serif;
  34.         font-size: 35px;
  35.         color: YellowGreen;
  36.         margin: 0px 0px 0px 80px;
  37.         padding-top: 10px;
  38.         float: left;
  39.     }
  40.  
  41.     #course {
  42.         float: right;
  43.         font-family: Arial, Helvetica, sans-serif;
  44.         font-size: 35px;
  45.         color: YellowGreen;
  46.         margin-right: 200px;
  47.         margin-top: 24px;
  48.     }
  49.  
  50.     #footerinfo {
  51.         font-family: Arial, Helvetica, sans-serif;
  52.         font-size: 24px;
  53.         list-style-type: none;
  54.         margin: 0px 0px 0px 100px;
  55.         padding: 20px 0px 0px 0px;
  56.     }
  57.  
  58.     #listinfo {
  59.         display: inline;
  60.     }
  61.  
  62.     #info {
  63.         text-decoration: none;
  64.         color: YellowGreen;
  65.     }
  66.  
  67.     #rights {
  68.         font-family: Arial, Helvetica, sans-serif;
  69.         font-size: 14px;
  70.         color: YellowGreen;
  71.         margin-top: 10px;
  72.         margin-left: 100px;
  73.     }
  74.  
  75.     .dropbtn {
  76.         background-color: DarkOliveGreen;
  77.         color: YellowGreen;
  78.         padding: 16px;
  79.         font-size: 30px;
  80.         border: none;
  81.         cursor: pointer;
  82.     }
  83.  
  84.     .dropdownMenue {
  85.         position: relative;
  86.         display: inline-block;
  87.         margin-right: 50px;
  88.         margin-top: -1px;
  89.     }
  90.  
  91.     .dropdown-content {
  92.         display: none;
  93.         position: absolute;
  94.         right: 0;
  95.         background-color: WhiteSmoke;
  96.         min-width: 160px;
  97.         box-shadow: gray;
  98.         z-index: 1;
  99.     }
  100.  
  101.     .dropdown-content a {
  102.         color: Gray;
  103.         font-family: Arial, Helvetica, sans-serif;
  104.         padding: 12px 16px;
  105.         text-decoration: none;
  106.         display: block;
  107.     }
  108.  
  109.     .dropdown-content a:hover {
  110.         background-color: DarkOliveGreen;
  111.         color: YellowGreen;
  112.     }
  113.  
  114.     .dropdownMenue:hover .dropdown-content {
  115.         display: block;
  116.     }
  117.  
  118.  
  119.     .dropdownMenue:hover .dropbtn {
  120.         background-color: DarkOliveGreen;
  121.     }
  122.  
  123.     #lessons {
  124.         list-style-type: none;
  125.         margin: 0;
  126.         padding: 0;
  127.         width: 30%;
  128.         background-color: whitesmoke;
  129.         position: fixed;
  130.         max-height: 73%;
  131.         overflow: auto;
  132.         border-style: solid;
  133.         border-width: 3px;
  134.         border-color: Gainsboro;
  135.     }
  136.  
  137.     #namelesson a {
  138.         display: block;
  139.         font-family: Arial, Helvetica, sans-serif;
  140.         color: gray;
  141.         padding: 8px 16px;
  142.         text-decoration: none;
  143.         font-size: 20px;
  144.     }
  145.  
  146.  
  147.     #namelesson a:hover:not(.active) {
  148.         background-color: DarkOliveGreen;
  149.         color: YellowGreen;
  150.     }
  151.  
  152.     #addTestBtn {
  153.         font-weight: 800;
  154.         font-family: Arial, Helvetica, sans-serif;
  155.         color: white;
  156.         background-color: slategray;
  157.         outline: none;
  158.         height: 40px;
  159.         width: 240px;
  160.     }
  161.     #fullTestArea{
  162.        
  163.     }
  164. </style>
  165. <script>
  166.     var questionJSON = {
  167.         test_name: "",
  168.         test_author: "",
  169.         test_questions: []
  170.     }
  171.  
  172.     function сheckNumberOfAnswer(thisElement) {
  173.         var parent = thisElement.parentNode;
  174.         var numberQuestion = document.getElementById(parent.parentNode.id);
  175.         var numberOfTextArea = numberQuestion.getElementsByTagName("textarea");
  176.         var numberOfAnswer = thisElement.options[thisElement.selectedIndex].text;
  177.         var correctAnswerList = numberQuestion.getElementsByTagName("input");
  178.         var testArea = document.getElementsByName('tests');
  179.         var correctAnswerName;
  180.         for (var i = 0; i < testArea.length; ++i) {
  181.            if (testArea[i].id == parent.parentNode.id) {
  182.                correctAnswerName = i + 1;
  183.            }
  184.        }
  185.        if (numberOfAnswer < numberOfTextArea.length - 1) {
  186.            for (var i = numberOfTextArea.length - 2; i > numberOfAnswer - 1; i--) {
  187.  
  188.                 numberQuestion.removeChild(numberOfTextArea[i]);
  189.                 numberQuestion.removeChild(correctAnswerList[i]);
  190.             }
  191.         } else if (numberOfAnswer > numberOfTextArea.length - 1) {
  192.             var stop = numberOfAnswer - (numberOfTextArea.length - 1);
  193.             for (var i = 0; i < stop; i++) {
  194.                var newTextArea = document.createElement("textarea");
  195.                var newRadioButton = document.createElement("input");
  196.                newTextArea.placeholder = "Enter answer and mark it if it is correct";
  197.                newTextArea.name = "answerArea";
  198.                newTextArea.style.marginTop = "0";
  199.                newTextArea.style.resize = "none";
  200.                newTextArea.style.width = "95%";
  201.                newTextArea.style.height = "30px";
  202.                newRadioButton.type = "radio";
  203.                newRadioButton.value = i + 3;
  204.                newRadioButton.name = "correctAnswer" + correctAnswerName;
  205.                newRadioButton.style.cssFloat = "right";
  206.                newRadioButton.style.marginTop = "13px";
  207.                newRadioButton.style.marginRight = "10px";
  208.                newRadioButton.style.transform = "scale(1.5)";
  209.                newRadioButton.style.opacity = "0.9";
  210.                newRadioButton.style.cursor = "pointer";
  211.                numberQuestion.appendChild(newTextArea);
  212.                numberQuestion.appendChild(newRadioButton);
  213.            }
  214.        } else {
  215.            return;
  216.        }
  217.    }
  218.  
  219.    function createTest() {
  220.        var questionList = document.getElementById('numQuestionList');
  221.        var numberOfQuestion = questionList.options[questionList.selectedIndex].text;
  222.        var testArea = document.getElementsByName('tests');
  223.        var full = document.getElementById('fullTestArea');
  224.        if (numberOfQuestion < testArea.length) {
  225.            for (var i = testArea.length - 1; i > numberOfQuestion - 1; i--) {
  226.                 full.removeChild(testArea[i]);
  227.             }
  228.         } else if (numberOfQuestion > testArea.length) {
  229.             var stop = numberOfQuestion - testArea.length;
  230.             for (var i = 0; i < stop; i++) {
  231.                var newTestArea = testArea[0].cloneNode(true);
  232.                newTestArea.id = "question" + (testArea.length + 1);
  233.                var correctAnswer = newTestArea.getElementsByTagName("input");
  234.                for (var r = 0; r < correctAnswer.length; ++r) {
  235.                    correctAnswer[r].name = "correctAnswer" + (testArea.length+1);
  236.                }
  237.                full.appendChild(newTestArea);
  238.            }
  239.        } else {
  240.            return;
  241.        }
  242.    }
  243.  
  244.    function saveTest() {
  245.        questionJSON.test_name=document.getElementById('testName').value;
  246.      //  alert(questionJSON.test_name);
  247.        var allQuestion = document.getElementsByName('tests')
  248.        for (var i = 0; i < allQuestion.length; ++i) {
  249.            var questionContent = allQuestion[i].getElementsByTagName("textarea");
  250.            var correctAnswer = allQuestion[i].getElementsByTagName("input");
  251.            questionJSON.test_questions.push({question: questionContent[0].value, answers: [], correct_answer: ""});
  252.            for (var j = 1; j < questionContent.length; ++j) {
  253.                switch (j) {
  254.                    case 1:
  255.                        questionJSON.test_questions[i].answers.push({1: questionContent[j].value});
  256.                        break;
  257.                    case 2:
  258.                        questionJSON.test_questions[i].answers.push({2: questionContent[j].value});
  259.                        break;
  260.                    case 3:
  261.                        questionJSON.test_questions[i].answers.push({3: questionContent[j].value});
  262.                        break;
  263.                    case 4:
  264.                        questionJSON.test_questions[i].answers.push({4: questionContent[j].value});
  265.                        break;
  266.                    case 5:
  267.                        questionJSON.test_questions[i].answers.push({5: questionContent[j].value});
  268.                        break;
  269.                }
  270.                if (correctAnswer[j - 1].checked) {
  271.                    questionJSON.test_questions[i].correct_answer = (j);
  272.                }
  273.            }
  274.        }
  275.        for (var i = 0; i < questionJSON.test_questions.length; ++i) {
  276.           // alert(questionJSON.test_questions[i].question);
  277.            for (var j = 0; j < questionJSON.test_questions[i].answers.length; ++j) {
  278.            //    alert(questionJSON.test_questions[i].answers[j][j + 1]);
  279.            }
  280.         //   alert(questionJSON.test_questions[i].correct_answer);
  281.        }
  282.        alert(JSON.stringify(questionJSON));
  283.    }
  284. </script>
  285. <body>
  286.  
  287.  
  288.  
  289. <article>
  290.  
  291.  
  292.  
  293.     <div style="margin-left:30.5%;padding:1px 16px;min-height: 467px; ">
  294.         <div id="fullTestArea">
  295.             <p style="font-size: 20px; font-family: Arial, Helvetica, sans-serif;color: gray;margin-bottom: 0; margin-top: 10px;">
  296.                 Тest name
  297.                 <button onclick="saveTest()">Save test</button>
  298.             </p>
  299.             <input type="text" id="testName" style="width: 78%;height: 20px;margin-top: 8px;"
  300.                   placeholder="Enter test name and select question count">
  301.             <select onchange="createTest()" id="numQuestionList" style="float: right;height: 25px;margin-top: 8px;">
  302.                 <option selected disabled>Select question count</option>
  303.                 <option value="2">2</option>
  304.                 <option value="3">3</option>
  305.                 <option value="4">4</option>
  306.                 <option value="5">5</option>
  307.                 <option value="6">6</option>
  308.                 <option value="7">7</option>
  309.                 <option value="8">8</option>
  310.                 <option value="9">9</option>
  311.                 <option value="10">10</option>
  312.                 <option value="11">11</option>
  313.                 <option value="12">12</option>
  314.                 <option value="13">13</option>
  315.                 <option value="14">14</option>
  316.                 <option value="15">15</option>
  317.                 <option value="16">16</option>
  318.                 <option value="17">17</option>
  319.                 <option value="18">18</option>
  320.                 <option value="19">19</option>
  321.                 <option value="20">20</option>
  322.                 <option value="21">21</option>
  323.                 <option value="22">22</option>
  324.                 <option value="23">23</option>
  325.                 <option value="24">24</option>
  326.                 <option value="25">25</option>
  327.                 <option value="26">26</option>
  328.                 <option value="27">27</option>
  329.                 <option value="28">28</option>
  330.                 <option value="29">29</option>
  331.                 <option value="30">30</option>
  332.             </select>
  333.             <div name="tests" id="question1">
  334.                 <p style="font-size: 20px; font-family: Arial, Helvetica, sans-serif;color: gray; margin-top: 10px;margin-bottom: 0">
  335.                     Question</p>
  336.                 <textarea name="question" placeholder="Enter  question"
  337.                          style="margin-top: 8px;resize: none;width: 100%;height: 50px;"></textarea>
  338.                 <p style="font-size: 20px; font-family: Arial, Helvetica, sans-serif;color: gray; margin-top: 5px;margin-bottom: 0">
  339.                     Answers:
  340.                     <select onchange="сheckNumberOfAnswer(this)">
  341.                         <option selected disabled>Select possible answers count</option>
  342.                         <option value="2">2</option>
  343.                         <option value="3">3</option>
  344.                         <option value="4">4</option>
  345.                         <option value="5">5</option>
  346.                     </select></p>
  347.                 <textarea name="answerArea" placeholder="Enter answer and mark it if it is correct"
  348.                          style="margin-top: 8px;resize: none;width: 95%;height: 30px;"></textarea>
  349.                 <input name="correctAnswer1" type="radio" value="1" style="float: right; margin-top: 20px;margin-right: 10px;
  350. transform:scale(1.5);opacity:0.9;cursor:pointer;">
  351.                 <textarea name="answerArea" placeholder="Enter answer and mark it if it is correct"
  352.                          style="margin-top: 0;resize: none;width: 95%;height: 30px;"></textarea>
  353.                 <input name="correctAnswer1" type="radio" value="2" style="float: right; margin-top: 13px;margin-right: 10px;
  354. transform:scale(1.5);opacity:0.9;cursor:pointer;">
  355.             </div>
  356.  
  357.             <div id="question2" name="tests">
  358.                 <p style="font-size: 20px; font-family: Arial, Helvetica, sans-serif;color: gray; margin-top: 10px;margin-bottom: 0">
  359.                     Question</p>
  360.                 <textarea name="question" placeholder="Enter test question"
  361.                          style="margin-top: 8px;resize: none;width: 100%;height: 50px;"></textarea>
  362.                 <p style="font-size: 20px; font-family: Arial, Helvetica, sans-serif;color: gray; margin-top: 5px;margin-bottom: 0">
  363.                     Answers:
  364.                     <select onchange="сheckNumberOfAnswer(this)">
  365.                         <option selected disabled>Select answers count</option>
  366.                         <option value="2">2</option>
  367.                         <option value="3">3</option>
  368.                         <option value="4">4</option>
  369.                         <option value="5">5</option>
  370.                     </select></p>
  371.                 <textarea name="answerArea" placeholder="Enter answer and mark it if it is correct"
  372.                          style="margin-top: 8px;resize: none;width: 95%;height: 30px;"></textarea>
  373.                 <input name="correctAnswer2" type="radio" value="1" style="float: right; margin-top: 20px;margin-right: 10px;
  374. transform:scale(1.5);opacity:0.9;cursor:pointer;">
  375.                 <textarea name="answerArea" placeholder="Enter answer and mark it if it is correct"
  376.                          style="margin-top: 0;resize: none;width: 95%;height: 30px;"></textarea>
  377.                 <input name="correctAnswer2" type="radio" value="2" style="float: right; margin-top: 13px;margin-right: 10px;
  378. transform:scale(1.5);opacity:0.9;cursor:pointer;">
  379.             </div>
  380.         </div>
  381.     </div>
  382. </article>
  383.  
  384.  
  385. </body>
  386. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!