{"id":3327,"date":"2019-09-03T00:00:08","date_gmt":"2019-09-02T22:00:08","guid":{"rendered":"https:\/\/pythonprogramming.altervista.org\/?p=3327"},"modified":"2019-09-09T17:18:45","modified_gmt":"2019-09-09T15:18:45","slug":"python-and-javascript-a-quiz-made-in-javascript","status":"publish","type":"post","link":"https:\/\/pythonprogramming.altervista.org\/python-and-javascript-a-quiz-made-in-javascript\/","title":{"rendered":"Python and Javascript: a quiz made in Javascript"},"content":{"rendered":"<p>Today we are going to start a post about <strong>javascript<\/strong>. <strong>Why<\/strong> a post about javascript into Pythonprogramming.altervista.org? Well, I think it is a good thing to know javascript, because it is, together with Python, one of the most used<strong> programming language<\/strong> in the World and because it can occur that you may have to use it. Another reason is&#8230; the more I know the best it is, right? Sometimes it is better to have more options, you could decide what language to use if you can do it in different ways. Sometimes I have showed how to create html code with Python to make tables, because it made your work faster. So, there are many reason for this and today I am gonna show you a very simple code to create a <strong>quiz<\/strong> (test) in javascript. In another post we will see how we can use Python to make this process even easier <strong>mixing Python and Javascript<\/strong>, like I did with html code for tables using Python. Let&#8217;s go.<\/p>\n<h2>Function to check if the answer is right<\/h2>\n<pre class=\"lang:default decode:true\">&lt;script&gt; \r\nvar validate = function(scelta, number) {\r\n\tform = \"d\" + number; span = \"a\" + number;\r\n\tvar formname = document.getElementById(form);\r\n\tvar spanname = document.getElementById(span);\r\n\tif (scelta == esatte[number-1]) {\r\n\t\tformname.innerHTML =\"&lt;div style='background-color:lightgreen'&gt;Esatto&lt;\/div&gt;\";\r\n\t\tspanname.innerHTML = scelta;}\r\n\telse {\r\n\t\tformname.innerHTML = \"&lt;div style='background-color:pink'&gt;&lt;p&gt;Sbagliato&lt;\/p&gt;&lt;\/div&gt;\";}};<\/pre>\n<p>In this function we got 2 arguments:<\/p>\n<ul>\n<li>scelta<\/li>\n<li>number<\/li>\n<\/ul>\n<p>scelta is the text of the radiobutton we choose as the right answer that will be compared to the right answer.<\/p>\n<p>number is a number that is used to distinguish the elements on the html belonging to different questions.<\/p>\n<p>form and span will be strings used to get the form and the span element of a particular question.<\/p>\n<p>The if statement checks if the user choice is right, showing a message in green in the first case.<\/p>\n<h2>The code to print the form elements for the user input<\/h2>\n<pre class=\"lang:default decode:true \">var startQuiz = function(){\r\n\tcounter = 1;\r\n\tesatte = [];\r\n\tfor (q in questions){\r\n\t\tesatte.push(questions[q][1][0]);\r\n\t\t\r\n\t\t\/\/ Randomizer\r\n\t\tquestions[q][1].sort(function() {\r\n\t  \treturn .5 - Math.random();\r\n\t\t});\r\n\t\t\/\/ create the tags for the radiobutton depending on how many questions are there\r\n\t\trisposte = \"\";\r\n\t\tfor (r in questions[q][1]){\r\n\t\t\trisposte += \"&lt;input type='radio' name='choice\" + counter + \"' value='\" + questions[q][1][r] + \"'&gt;\" + questions[q][1][r]\r\n\t\t\tconsole.log(\"HEllo\" + risposte);\r\n\t\t};\r\n\t\tdocument.write(`&lt;div style=\"background-color:lightblue\"&gt;\r\n\t\t    &lt;h1&gt;` + questions[q][0] + `\r\n\t\t&lt;span id='a`+counter+`'&gt;...&lt;\/span&gt;&lt;\/h1&gt;&lt;br&gt;\r\n\t\t    &lt;form id=\"d`+counter+`\"&gt;` + risposte + `\r\n\t\t    &lt;br&gt;\r\n\t\t    &lt;input type=\"submit\" value=\"submit\" onclick=\"validate(choice`+counter+`.value, `+counter+`)\"&gt;\r\n\t\t    &lt;\/form&gt;\r\n\t\t    &lt;\/div&gt;\r\n\t\t`);\r\n\t\tconsole.log(counter);\r\n\t\tcounter += 1;\r\n\t\t}\r\n};<\/pre>\n<p>The <strong>main loop<\/strong> <strong>iterates<\/strong> the <strong>questions<\/strong> (you can see then below). For each group of answer to each question the code shuffle their order, after the memorization of the right answer.<\/p>\n<p>Then he shows the <strong>radiobuttons<\/strong> for each <strong>answer<\/strong>(made with a for loops to have the chance to have as many radiobuttons you want), after he showed the <strong>question<\/strong>. At the end there is the <strong>button<\/strong> that, if clicked, sends the choice you made and the number of the question to the function <strong>validate<\/strong> that we&#8217;ve seen above.<\/p>\n<h2>The data with the questions and answer<\/h2>\n<p>Here is your job: to write questions and answer in the way you see in this example. The right answer is the first. The code will shuffle them (in startQuiz).<\/p>\n<pre class=\"lang:default decode:true \">\/\/ ========= QUESTIONS AND ANSWERS: FIRST IS RIGHT\r\nquestions = [\r\n[\"Tuples are mutable\",\r\n\t[\r\n\t\"False\",\r\n\t\"True\",\r\n\t]],\r\n[\"A List contains items\",\r\n\t[\r\n\t\"mutable\",\r\n\t\"immutable\"\r\n\t],]\r\n];\r\n\r\n\r\nstartQuiz();<\/pre>\n<h2>The whole code<\/h2>\n<p>At this point everything is right and you will see this image in the browser when you launch this code.<\/p>\n<p><a href=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/09\/quizjs.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3328\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/09\/quizjs.jpg\" alt=\"\" width=\"728\" height=\"491\" srcset=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/09\/quizjs.jpg 728w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/09\/quizjs-320x216.jpg 320w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/a><\/p>\n<p>Here&#8217;s the code in his full length:<\/p>\n<pre class=\"lang:default decode:true\">&lt;script&gt; \r\nvar validate = function(scelta, number) {\r\n\tform = \"d\" + number; span = \"a\" + number;\r\n\tvar formname = document.getElementById(form);\r\n\tvar spanname = document.getElementById(span);\r\n\tif (scelta == esatte[number-1]) {\r\n\t\tformname.innerHTML =\"&lt;div style='background-color:lightgreen'&gt;Esatto&lt;\/div&gt;\";\r\n\t\tspanname.innerHTML = scelta;}\r\n\telse {\r\n\t\tformname.innerHTML = \"&lt;div style='background-color:pink'&gt;&lt;p&gt;Sbagliato&lt;\/p&gt;&lt;\/div&gt;\";}};\r\n\t\t\r\nvar startQuiz = function(){\r\n\tcounter = 1;\r\n\tesatte = [];\r\n\tfor (q in questions){\r\n\t\tesatte.push(questions[q][1][0]);\r\n\t\t\r\n\t\t\/\/ Randomizer\r\n\t\tquestions[q][1].sort(function() {\r\n\t  \treturn .5 - Math.random();\r\n\t\t});\r\n\t\t\/\/ create the tags for the radiobutton depending on how many questions are there\r\n\t\trisposte = \"\";\r\n\t\tfor (r in questions[q][1]){\r\n\t\t\trisposte += \"&lt;input type='radio' name='choice\" + counter + \"' value='\" + questions[q][1][r] + \"'&gt;\" + questions[q][1][r]\r\n\t\t\tconsole.log(\"HEllo\" + risposte);\r\n\t\t};\r\n\t\tdocument.write(`&lt;div style=\"background-color:lightblue\"&gt;\r\n\t\t    &lt;h1&gt;` + questions[q][0] + `\r\n\t\t&lt;span id='a`+counter+`'&gt;...&lt;\/span&gt;&lt;\/h1&gt;&lt;br&gt;\r\n\t\t    &lt;form id=\"d`+counter+`\"&gt;` + risposte + `\r\n\t\t    &lt;br&gt;\r\n\t\t    &lt;input type=\"submit\" value=\"submit\" onclick=\"validate(choice`+counter+`.value, `+counter+`)\"&gt;\r\n\t\t    &lt;\/form&gt;\r\n\t\t    &lt;\/div&gt;\r\n\t\t`);\r\n\t\tconsole.log(counter);\r\n\t\tcounter += 1;\r\n\t\t}\r\n};\r\n\r\n\/\/ ========= QUESTIONS AND ANSWERS: FIRST IS RIGHT\r\nquestions = [\r\n[\"Tuples are mutable\",\r\n\t[\r\n\t\"False\",\r\n\t\"True\",\r\n\t]],\r\n[\"A List contains items\",\r\n\t[\r\n\t\"mutable\",\r\n\t\"immutable\"\r\n\t],]\r\n];\r\n\r\n\r\nstartQuiz();\r\n&lt;\/script&gt;<\/pre>\n<p>Whit this code you can easily create a quiz to be used into your html page, without caring about the browser elements (or widgets), just adding the questions and the answers. You do not have to care to shuffle the question either, making the job very easy. In another post we will see how to make the things even easier using our favourite language: Python. We will take the data from a text file and then create the html file, so that we do not have to waste time with parenthesis, apostrophes and other struggles like those. We will also improve the code with some features like score and even time&#8230; maybe.<\/p>\n<p>To be continued&#8230;<\/p>\n<p>&nbsp;<\/p>\n<script>\r\nvar title = \"Python to Html\";\r\n\t\tvar links = [\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/make-html-tables-with-pandas\/\",\"Excel to Html Table with Pandas\"],\r\n\t\t\t\/\/ ------------------- 9.9.2019 ---------------------------------\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/transform-a-python-multiline-string-into-html-table\",\r\n\t\"From Python multiline string to Html table (9 9 2019)\"],\r\n\t\t\t\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/python-to-make-html-tables-code\/\",\r\n\t\t\t \"Python to make Html tables code (22 7 2019)\"],\r\n\t\t\t\r\n\t\t\t [\"https:\/\/pythonprogramming.altervista.org\/creare-una-tabella-html-con-python\/\",\r\n\t\t\t \"Create Html table with Python (24 4 2019)\"],\r\n\t\t\t\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/excel-data-to-html-report-the-easy-way\/\",\r\n\t\t\t \"From Excel to Html report easy (5 8 2019)\"],\r\n\t\t\t\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/1563-2\/\",\r\n\t\t\t \"Create a table, but with Python (14 11 2018)\"],\r\n\t\t\t\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/creare-una-tabella-con-python\/\",\r\n\t\t\t \"Creare una tabella Html con Python (18 11 2018)\"],\r\n\t\t\t\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/python-and-javascript-a-quiz-made-in-javascript\/\",\r\n\t\t\t \"A quiz made in javascript (3 9 2019)\"]\r\n\t\t];\r\n\t\t\r\n\t<\/script>\r\n<script>\r\n\t\r\nif (typeof next2 != \"undefined\"){let next2 = 0;}\r\n\t\r\nnext2 = 0;\r\n\thtml = \"\";\/\/<b style='color:coral;font-size:1.2em'>Other posts about \" + title + \"<\/b><br>\";\r\nfor (address of links) \r\n{\r\n\r\n\tif (next2 == 1){\r\n\t\thtml += \"<div style='background:coral'>\";\r\n\t\thtml += \"Next link => <a href='\" + address[0] + \"'>\" + address[1] + \"<\/a>\";\r\n\t\thtml += \"<\/div><br>\";\r\n\t\tnext2 = 0;\r\n\t}\r\n\tif (address[0] == document.URL) {\r\n\t\tnext2 = 1;\r\n\t}\r\n}\r\n\r\nif (typeof next != \"undefined\") {let next = 0;}\r\nif (typeof addressStart != \"undefined\") {let addressStart = \"\";}\r\nnext = 0;\r\naddressStart = \"<a href='\";\r\nfor (address of links) {\r\n\tif (next == 1){\r\n\t\thtml += \">>>\" + addressStart + address[0] + \"'>\" + address[1] + \"<\/a><br>\";\r\n\t\tnext = 0;\r\n\t}\r\n\telse if (addressStart + address[0] != document.URL)\r\n\t{\r\n\t\thtml += addressStart + address[0] + \"'>\" + address[1] + \"<\/a><br>\";\r\n\t}\r\n\telse\r\n\t{\r\n\t\tnext = 1;\r\n\t\tnext_address = address[0]\r\n\t\tnext_title = address[1]\r\n\t\thtml += \"<span style='color:gray'>\" + address[1] + \"<\/span><br>\";\r\n\t}\r\n\r\n}\r\n\r\n\thtml += `<span style=\"font-size:8px\">Powered by <a href=\"https:\/\/pythonprogramming.altervista.org\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2673\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2.png\" alt=\"\" width=\"70\" height=\"25\" srcset=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2.png 156w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2-150x56.png 150w\" sizes=\"auto, (max-width: 70px) 100vw, 70px\" \/>pythonprogramming.altervista.org<\/a><\/span>`\r\n\thtml = \"<div style='background:yellow'>\" + html + \"<\/div>\";\r\n\tdocument.write(html)\r\n<\/script>\n","protected":false},"excerpt":{"rendered":"This time we will take a look at javascript code to make a quiz. Next time we will see how to use Python to do the same thing at ease.\n<a class=\"moretag\" href=\"https:\/\/pythonprogramming.altervista.org\/python-and-javascript-a-quiz-made-in-javascript\/\"> [...]<\/a>","protected":false},"author":1,"featured_media":3328,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[331,334],"tags":[233,4],"class_list":["post-3327","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-javascript-and-python","tag-javascript","tag-python"],"avopt_banners_inside_post":true,"avopt_banners_on_page":true,"av_copy_from":"","av_sharing_message":"","av_sharing_allowed":false,"av_sharing_on":{"fb":[],"tw":[]},"av_allow_affiliate_banner":false,"av_allow_affiliate_multi_banner":false,"av_show_affiliation_buy_button":false,"av_post_rating":true,"av_have_post_rating_value":false,"av_is_artificial_intelligence_content":false,"_links":{"self":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/3327","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/comments?post=3327"}],"version-history":[{"count":4,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/3327\/revisions"}],"predecessor-version":[{"id":3502,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/3327\/revisions\/3502"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media\/3328"}],"wp:attachment":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media?parent=3327"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/categories?post=3327"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/tags?post=3327"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}