API tools faq
paste
Advertisement
MarkUa

Створення тестування

MarkUa
Jul 1st, 2019
452
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 20.60 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>CreateTests</title>
  7.     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  8. </head>
  9. <style>
  10.  
  11.     header {
  12.         height: 65px;
  13.     }
  14.  
  15.     #heads {
  16.  
  17.         height: 65px;
  18.         position: fixed;
  19.         width: 100%;
  20.     }
  21.  
  22.     article {
  23.  
  24.         height: auto;
  25.         margin: 0;
  26.     }
  27.  
  28.     body {
  29.         background-color: whitesmoke;
  30.         margin: 0;
  31.         padding: 0;
  32.     }
  33.  
  34.     #courseName {
  35.         font-family: Arial, Helvetica, sans-serif;
  36.         font-size: 35px;
  37.         color: YellowGreen;
  38.         margin: 0px 0px 0px 80px;
  39.         padding-top: 10px;
  40.         float: left;
  41.     }
  42.  
  43.     #course {
  44.         float: right;
  45.         font-family: Arial, Helvetica, sans-serif;
  46.         font-size: 35px;
  47.         color: YellowGreen;
  48.         margin-right: 200px;
  49.         margin-top: 24px;
  50.     }
  51.  
  52.     #footerinfo {
  53.         font-family: Arial, Helvetica, sans-serif;
  54.         font-size: 24px;
  55.         list-style-type: none;
  56.         margin: 0px 0px 0px 100px;
  57.         padding: 20px 0px 0px 0px;
  58.     }
  59.  
  60.     #listinfo {
  61.         display: inline;
  62.     }
  63.  
  64.     #info {
  65.         text-decoration: none;
  66.         color: YellowGreen;
  67.     }
  68.  
  69.     #rights {
  70.         font-family: Arial, Helvetica, sans-serif;
  71.         font-size: 14px;
  72.         color: YellowGreen;
  73.         margin-top: 10px;
  74.         margin-left: 100px;
  75.     }
  76.  
  77.     .dropbtn {
  78.         background-color: DarkOliveGreen;
  79.         color: YellowGreen;
  80.         padding: 16px;
  81.         font-size: 30px;
  82.         border: none;
  83.         cursor: pointer;
  84.     }
  85.  
  86.     .dropdownMenue {
  87.         position: relative;
  88.         display: inline-block;
  89.         margin-right: 50px;
  90.         margin-top: -1px;
  91.     }
  92.  
  93.     .dropdown-content {
  94.         display: none;
  95.         position: absolute;
  96.         right: 0;
  97.         background-color: WhiteSmoke;
  98.         min-width: 160px;
  99.         box-shadow: gray;
  100.         z-index: 1;
  101.     }
  102.  
  103.     .dropdown-content a {
  104.         color: Gray;
  105.         font-family: Arial, Helvetica, sans-serif;
  106.         padding: 12px 16px;
  107.         text-decoration: none;
  108.         display: block;
  109.     }
  110.  
  111.     .dropdown-content a:hover {
  112.         background-color: DarkOliveGreen;
  113.         color: YellowGreen;
  114.     }
  115.  
  116.     .dropdownMenue:hover .dropdown-content {
  117.         display: block;
  118.     }
  119.  
  120.  
  121.     .dropdownMenue:hover .dropbtn {
  122.         background-color: DarkOliveGreen;
  123.     }
  124.  
  125.     #lessons {
  126.         list-style-type: none;
  127.         margin: 0;
  128.         padding: 0;
  129.         width: 30%;
  130.         background-color: whitesmoke;
  131.         position: fixed;
  132.         max-height: 73%;
  133.         overflow: auto;
  134.         border-style: solid;
  135.         border-width: 3px;
  136.         border-color: Gainsboro;
  137.     }
  138.  
  139.     #namelesson a {
  140.         display: block;
  141.         font-family: Arial, Helvetica, sans-serif;
  142.         color: gray;
  143.         padding: 8px 16px;
  144.         text-decoration: none;
  145.         font-size: 20px;
  146.     }
  147.  
  148.  
  149.     #namelesson a:hover:not(.active) {
  150.         background-color: DarkOliveGreen;
  151.         color: YellowGreen;
  152.     }
  153.  
  154.     #addTestBtn {
  155.         font-weight: 800;
  156.         font-family: Arial, Helvetica, sans-serif;
  157.         color: white;
  158.         background-color: slategray;
  159.         outline: none;
  160.         height: 40px;
  161.         width: 240px;
  162.     }
  163.  
  164.     #fullTestArea {
  165.  
  166.     }
  167. </style>
  168. <script>
  169.     var myTest = null;
  170.     var questionJSON = {
  171.         test_name: "",
  172.         test_author: "",
  173.         test_questions: []
  174.     }
  175.     function initQuizFromServer(){
  176.  
  177.         $.ajax({
  178.            url: '',
  179.             async: false,
  180.            type: 'get', // This is the default though, you don't actually need to always mention it
  181.            data: {
  182.                'csrfmiddlewaretoken': '{{ csrf_token }}'
  183.            },
  184.            success: function (data) {
  185.              //  alert(data.passed);
  186.                var finalData = data.test_in_json.replace(/\\/g, "");
  187.              //;  alert( finalData)
  188.                localStorage.setItem("data",finalData)
  189.  
  190.               // return JSON.parse(finalData)
  191.                // alert(JSON.stringify(myTest))
  192.            }.bind(this),
  193.            failure: function (data) {
  194.                alert('Got an error dude');
  195.            }
  196.        });
  197.  
  198.       /* myTest = {
  199.         test_name: "About me",
  200.         test_author: "Borys Lahno",
  201.         test_questions: [
  202.             {
  203.                 question: "What is my name?",
  204.                 answers: [
  205.                     {1: "Borys"},
  206.                     {2: "Tom"},
  207.                     {3: "Nick"},
  208.                     {4: "Mark"}
  209.                 ],
  210.                 correct_answer: "1"
  211.             },
  212.             {
  213.                 question: "How old I am?",
  214.                 answers: [
  215.                     {1: "15"},
  216.                     {2: "22"},
  217.                     {3: "20"},
  218.                     {4: "25"},
  219.                     {5: "17"}
  220.                 ],
  221.                 correct_answer: "3"
  222.             },
  223.             {
  224.                 question: "What do I like to do?",
  225.                 answers: [
  226.                     {1: "Play football"},
  227.                     {2: "Play computer games"},
  228.                     {3: "Play the Guitar"},
  229.                 ],
  230.                 correct_answer: "2"
  231.             }
  232.         ]
  233.         }*/
  234.     }
  235.     $(document).ready(function () {
  236.         myTest = initQuizFromServer();
  237.         var testArea = document.getElementsByName('tests');
  238.         var prototypeTextArea = testArea[0].cloneNode(true);
  239.         myTest = JSON.parse(localStorage.getItem('data'));
  240.         document.getElementById('testName').value = myTest.test_name;
  241.         for (var i = 0; i < myTest.test_questions.length; ++i) {
  242.            if (i > 1) {
  243.                 var newTestArea = prototypeTextArea.cloneNode(true);
  244.                 newTestArea.id = "question" + (testArea.length + 1);
  245.                 var correctAnswer = newTestArea.getElementsByTagName("input");
  246.                 for (var r = 0; r < correctAnswer.length; ++r) {
  247.                    correctAnswer[r].name = "correctAnswer" + (testArea.length + 1);
  248.                }
  249.                document.getElementById('fullTestArea').appendChild(newTestArea);
  250.  
  251.            }
  252.            testArea[i].getElementsByTagName("textarea")[0].value = myTest.test_questions[i].question;
  253.            for (var j = 0; j < myTest.test_questions[i].answers.length; j++) {
  254.                if (j > 1) {
  255.                     var newTextArea = document.createElement("textarea");
  256.                     var newRadioButton = document.createElement("input");
  257.                     newTextArea.placeholder = "Enter answer and mark it if it is correct";
  258.                     newTextArea.name = "answerArea";
  259.                     newTextArea.style.marginTop = "0";
  260.                     newTextArea.style.resize = "none";
  261.                     newTextArea.style.width = "95%";
  262.                     newTextArea.style.height = "30px";
  263.                     newRadioButton.type = "radio";
  264.                     newRadioButton.value = j + 1;
  265.                     newRadioButton.name = "correctAnswer" + (i + 1);
  266.                     newRadioButton.style.cssFloat = "right";
  267.                     newRadioButton.style.marginTop = "13px";
  268.                     newRadioButton.style.marginRight = "10px";
  269.                     newRadioButton.style.transform = "scale(1.5)";
  270.                     newRadioButton.style.opacity = "0.9";
  271.                     newRadioButton.style.cursor = "pointer";
  272.                     testArea[i].appendChild(newTextArea);
  273.                     testArea[i].appendChild(newRadioButton);
  274.                 }
  275.                 switch (j) {
  276.                     case 0:
  277.                         testArea[i].getElementsByTagName("textarea")[j + 1].value = myTest.test_questions[i].answers[j]["1"];
  278.                         break;
  279.                     case 1:
  280.                         testArea[i].getElementsByTagName("textarea")[j + 1].value = myTest.test_questions[i].answers[j]["2"];
  281.                         break;
  282.                     case 2:
  283.                         testArea[i].getElementsByTagName("textarea")[j + 1].value = myTest.test_questions[i].answers[j]["3"];
  284.                         break;
  285.                     case 3:
  286.                         testArea[i].getElementsByTagName("textarea")[j + 1].value = myTest.test_questions[i].answers[j]["4"];
  287.                         break;
  288.                     case 4:
  289.                         testArea[i].getElementsByTagName("textarea")[j + 1].value = myTest.test_questions[i].answers[j]["5"];
  290.                         break;
  291.                 }
  292.             }
  293.             testArea[i].getElementsByTagName("input")[myTest.test_questions[i].correct_answer - 1].checked = true;
  294.         }
  295.     });
  296.  
  297.  
  298.     function сheckNumberOfAnswer(thisElement) {
  299.         var parent = thisElement.parentNode;
  300.         var numberQuestion = document.getElementById(parent.parentNode.id);
  301.         var numberOfTextArea = numberQuestion.getElementsByTagName("textarea");
  302.         var numberOfAnswer = thisElement.options[thisElement.selectedIndex].text;
  303.         var correctAnswerList = numberQuestion.getElementsByTagName("input");
  304.         var testArea = document.getElementsByName('tests');
  305.         var correctAnswerName;
  306.         for (var i = 0; i < testArea.length; ++i) {
  307.            if (testArea[i].id == parent.parentNode.id) {
  308.                correctAnswerName = i + 1;
  309.            }
  310.        }
  311.        if (numberOfAnswer < numberOfTextArea.length - 1) {
  312.            for (var i = numberOfTextArea.length - 1; i > numberOfAnswer; i--) {
  313.  
  314.                 numberQuestion.removeChild(numberOfTextArea[i]);
  315.                 numberQuestion.removeChild(correctAnswerList[i-2]);
  316.             }
  317.         } else if (numberOfAnswer > numberOfTextArea.length - 1) {
  318.             var stop = numberOfAnswer - (numberOfTextArea.length - 1);
  319.             for (var i = 0; i < stop; i++) {
  320.                var newTextArea = document.createElement("textarea");
  321.                var newRadioButton = document.createElement("input");
  322.                newTextArea.placeholder = "Enter answer and mark it if it is correct";
  323.                newTextArea.name = "answerArea";
  324.                newTextArea.style.marginTop = "0";
  325.                newTextArea.style.resize = "none";
  326.                newTextArea.style.width = "95%";
  327.                newTextArea.style.height = "30px";
  328.                newRadioButton.type = "radio";
  329.                newRadioButton.value = i + 3;
  330.                newRadioButton.name = "correctAnswer" + correctAnswerName;
  331.                newRadioButton.style.cssFloat = "right";
  332.                newRadioButton.style.marginTop = "13px";
  333.                newRadioButton.style.marginRight = "10px";
  334.                newRadioButton.style.transform = "scale(1.5)";
  335.                newRadioButton.style.opacity = "0.9";
  336.                newRadioButton.style.cursor = "pointer";
  337.                numberQuestion.appendChild(newTextArea);
  338.                numberQuestion.appendChild(newRadioButton);
  339.            }
  340.        } else {
  341.            return;
  342.        }
  343.    }
  344.  
  345.    function createTest() {
  346.        var questionList = document.getElementById('numQuestionList');
  347.        var numberOfQuestion = questionList.options[questionList.selectedIndex].text;
  348.        var testArea = document.getElementsByName('tests');
  349.        var full = document.getElementById('fullTestArea');
  350.        if (numberOfQuestion < testArea.length) {
  351.            for (var i = testArea.length - 1; i > numberOfQuestion - 1; i--) {
  352.                 full.removeChild(testArea[i]);
  353.             }
  354.         } else if (numberOfQuestion > testArea.length) {
  355.             var stop = numberOfQuestion - testArea.length;
  356.             for (var i = 0; i < stop; i++) {
  357.                var newTestArea = testArea[0].cloneNode(true);
  358.                newTestArea.id = "question" + (testArea.length + 1);
  359.                var correctAnswer = newTestArea.getElementsByTagName("input");
  360.  
  361.                var alltextArea=newTestArea.getElementsByTagName("textarea");
  362.                //alltextArea[0].value="";
  363.  
  364.                for(var j=0;j<alltextArea.length;++j){
  365.  
  366.                    alltextArea[j].value="";
  367.                }
  368.  
  369.                for (var r = 0; r < correctAnswer.length; ++r) {
  370.                    correctAnswer[r].name = "correctAnswer" + (testArea.length + 1);
  371.                }
  372.                full.appendChild(newTestArea);
  373.            }
  374.        } else {
  375.            return;
  376.        }
  377.    }
  378.  
  379.    function saveTest() {
  380.        questionJSON.test_name = document.getElementById('testName').value;
  381.        var allQuestion = document.getElementsByName('tests')
  382.        for (var i = 0; i < allQuestion.length; ++i) {
  383.            var questionContent = allQuestion[i].getElementsByTagName("textarea");
  384.            var correctAnswer = allQuestion[i].getElementsByTagName("input");
  385.            questionJSON.test_questions.push({question: questionContent[0].value, answers: [], correct_answer: ""});
  386.            for (var j = 1; j < questionContent.length; ++j) {
  387.                switch (j) {
  388.                    case 1:
  389.                        questionJSON.test_questions[i].answers.push({1: questionContent[j].value});
  390.                        break;
  391.                    case 2:
  392.                        questionJSON.test_questions[i].answers.push({2: questionContent[j].value});
  393.                        break;
  394.                    case 3:
  395.                        questionJSON.test_questions[i].answers.push({3: questionContent[j].value});
  396.                        break;
  397.                    case 4:
  398.                        questionJSON.test_questions[i].answers.push({4: questionContent[j].value});
  399.                        break;
  400.                    case 5:
  401.                        questionJSON.test_questions[i].answers.push({5: questionContent[j].value});
  402.                        break;
  403.                }
  404.                if (correctAnswer[j - 1].checked) {
  405.                    questionJSON.test_questions[i].correct_answer = (j);
  406.                }
  407.            }
  408.        }
  409.        for (var i = 0; i < questionJSON.test_questions.length; ++i) {
  410.            // alert(questionJSON.test_questions[i].question);
  411.            for (var j = 0; j < questionJSON.test_questions[i].answers.length; ++j) {
  412.                 //   alert(questionJSON.test_questions[i].answers[j][j + 1]);
  413.            }
  414.             // alert(questionJSON.test_questions[i].correct_answer);
  415.        }
  416.        saveTestInDB(questionJSON);
  417.    }
  418.    function saveTestInDB(questionJSON){
  419.         $.ajax({
  420.           url: '',
  421.           type: 'get', // This is the default though, you don't actually need to always mention it
  422.           data: {
  423.               "test_in_json":JSON.stringify(questionJSON),
  424.               'csrfmiddlewaretoken': '{{ csrf_token }}'
  425.           },
  426.           success: function (data) {
  427.               window.history.back();
  428.               //alert(JSON.stringify(data.courses));
  429.              // this.courses = data.courses;
  431.           }.bind(this),
  432.           failure: function (data) {
  433.               alert('Got an error dude');
  434.           }
  435.       });
  436.    }
  437. </script>
  438. <body>
  439.  
  440.  
  441. <article>
  442.  
  443.  
  444.     <div style="width: 60%; margin: 0 auto;">
  445.         <div id="fullTestArea">
  446.             <p style="font-size: 20px; font-family: Arial, Helvetica, sans-serif;color: gray;margin-bottom: 0; margin-top: 10px;">
  447.                 Тest name
  448.                 <button onclick="saveTest()">Save test</button>
  449.             </p>
  450.             <input type="text" id="testName" style="width: 78%;height: 20px;margin-top: 8px;"
  451.                   placeholder="Enter test name and select question count">
  452.             <select onchange="createTest()" id="numQuestionList" style="float: right;height: 25px;margin-top: 8px;">
  453.                 <option selected disabled>Select question count</option>
  454.                 <option value="2">2</option>
  455.                 <option value="3">3</option>
  456.                 <option value="4">4</option>
  457.                 <option value="5">5</option>
  458.                 <option value="6">6</option>
  459.                 <option value="7">7</option>
  460.                 <option value="8">8</option>
  461.                 <option value="9">9</option>
  462.                 <option value="10">10</option>
  463.                 <option value="11">11</option>
  464.                 <option value="12">12</option>
  465.                 <option value="13">13</option>
  466.                 <option value="14">14</option>
  467.                 <option value="15">15</option>
  468.                 <option value="16">16</option>
  469.                 <option value="17">17</option>
  470.                 <option value="18">18</option>
  471.                 <option value="19">19</option>
  472.                 <option value="20">20</option>
  473.                 <option value="21">21</option>
  474.                 <option value="22">22</option>
  475.                 <option value="23">23</option>
  476.                 <option value="24">24</option>
  477.                 <option value="25">25</option>
  478.                 <option value="26">26</option>
  479.                 <option value="27">27</option>
  480.                 <option value="28">28</option>
  481.                 <option value="29">29</option>
  482.                 <option value="30">30</option>
  483.             </select>
  484.             <div name="tests" id="question1">
  485.                 <p style="font-size: 20px; font-family: Arial, Helvetica, sans-serif;color: gray; margin-top: 10px;margin-bottom: 0">
  486.                     Question</p>
  487.                 <textarea name="question" placeholder="Enter  question"
  488.                          style="margin-top: 8px;resize: none;width: 100%;height: 50px;"></textarea>
  489.                 <p style="font-size: 20px; font-family: Arial, Helvetica, sans-serif;color: gray; margin-top: 5px;margin-bottom: 0">
  490.                     Answers:
  491.                     <select onchange="сheckNumberOfAnswer(this)">
  492.                         <option selected disabled>Select possible answers count</option>
  493.                         <option value="2">2</option>
  494.                         <option value="3">3</option>
  495.                         <option value="4">4</option>
  496.                         <option value="5">5</option>
  497.                     </select></p>
  498.                 <textarea name="answerArea" placeholder="Enter answer and mark it if it is correct"
  499.                          style="margin-top: 8px;resize: none;width: 95%;height: 30px;"></textarea>
  500.                 <input name="correctAnswer1" type="radio" value="1" style="float: right; margin-top: 20px;margin-right: 10px;
  501. transform:scale(1.5);opacity:0.9;cursor:pointer;">
  502.                 <textarea name="answerArea" placeholder="Enter answer and mark it if it is correct"
  503.                          style="margin-top: 0;resize: none;width: 95%;height: 30px;"></textarea>
  504.                 <input name="correctAnswer1" type="radio" value="2" style="float: right; margin-top: 13px;margin-right: 10px;
  505. transform:scale(1.5);opacity:0.9;cursor:pointer;">
  506.             </div>
  507.  
  508.             <div id="question2" name="tests">
  509.                 <p style="font-size: 20px; font-family: Arial, Helvetica, sans-serif;color: gray; margin-top: 10px;margin-bottom: 0">
  510.                     Question</p>
  511.                 <textarea name="question" placeholder="Enter test question"
  512.                          style="margin-top: 8px;resize: none;width: 100%;height: 50px;"></textarea>
  513.                 <p style="font-size: 20px; font-family: Arial, Helvetica, sans-serif;color: gray; margin-top: 5px;margin-bottom: 0">
  514.                     Answers:
  515.                     <select onchange="сheckNumberOfAnswer(this)">
  516.                         <option selected disabled>Select answers count</option>
  517.                         <option value="2">2</option>
  518.                         <option value="3">3</option>
  519.                         <option value="4">4</option>
  520.                         <option value="5">5</option>
  521.                     </select></p>
  522.                 <textarea name="answerArea" placeholder="Enter answer and mark it if it is correct"
  523.                          style="margin-top: 8px;resize: none;width: 95%;height: 30px;"></textarea>
  524.                 <input name="correctAnswer2" type="radio" value="1" style="float: right; margin-top: 20px;margin-right: 10px;
  525. transform:scale(1.5);opacity:0.9;cursor:pointer;">
  526.                 <textarea name="answerArea" placeholder="Enter answer and mark it if it is correct"
  527.                          style="margin-top: 0;resize: none;width: 95%;height: 30px;"></textarea>
  528.                 <input name="correctAnswer2" type="radio" value="2" style="float: right; margin-top: 13px;margin-right: 10px;
  529. transform:scale(1.5);opacity:0.9;cursor:pointer;">
  530.             </div>
  531.         </div>
  532.     </div>
  533. </article>
  534.  
  535.  
  536. </body>
  537. </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!