{"id":4221,"date":"2019-11-28T07:18:00","date_gmt":"2019-11-28T06:18:00","guid":{"rendered":"https:\/\/pythonprogramming.altervista.org\/?p=4221"},"modified":"2019-11-30T06:03:28","modified_gmt":"2019-11-30T05:03:28","slug":"python-to-make-exercises-in-javascript-yes-why-not","status":"publish","type":"post","link":"https:\/\/pythonprogramming.altervista.org\/python-to-make-exercises-in-javascript-yes-why-not\/","title":{"rendered":"Python to make exercises in Javascript? Yes, why not?"},"content":{"rendered":"<p>Another post about making exercises with Python and Javascript? Yes. Let&#8217;s go and check how I did it:<\/p>\n<ul>\n<li>I created an exercise injavascript (question, answer, check if it&#8217;s right)<\/li>\n<li>then I made a py file to replace the elements in the template\n<ul>\n<li>the div for the solution, the input box name and the solution<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>That is all showed in the video you can play after the code below:<\/p>\n<h2>This is the full code<\/h2>\n<pre class=\"wrap:true lang:default decode:true \">import os\r\n\r\n\r\ncounter = 1\r\ntemplate = \"\"\"&lt;h3&gt;title&lt;\/h3&gt;\r\n&lt;input id=\"i1\" type=\"text\" onchange=\"ris=document.getElementById('ris1');if(this.value=='1000'){ris1.innerHTML='Good!'}else{ris1.innerHTML='No! It is wrong, try again.'}\"&gt;\r\n&lt;div id=\"ris1\"&gt;&lt;\/div&gt;\"\"\"\r\n\r\n\r\ndef new_ex(title, solution):\r\n    \"Substitute the default,values with new ones\"\r\n    global template, counter\r\n    template2 = template.replace(\"title\", title)\r\n    template2 = template2.replace(\"ris1\", \"ris\" + str(counter))\r\n    template2 = template2.replace(\"i1\", \"i\" + str(counter))\r\n    template2 = template2.replace(\"1000\", solution)\r\n    counter += 1\r\n    return template2\r\n\r\n# === add here your exercises\r\ntemplate3 = new_ex(\"How is the triple of 500?\", \"1500\")\r\ntemplate3 += new_ex(\"How is the triple of 1500?\", \"4500\")\r\ntemplate3 += new_ex(\"Is it Rome the capital of Italy [y\/n]\", \"y\")\r\n\r\n# End of exercises\r\n\r\n# =========== do not change this code below ===\r\nwith open(\"new.html\", \"w\", encoding=\"utf-8\") as file:\r\n    file.write(template3)\r\nos.startfile(\"new.html\")<\/pre>\n<h2>Live coding video: how to make javascript exercises with python<\/h2>\n<p><iframe loading=\"lazy\" title=\"Python and Javascript Interactive Exercises\" width=\"747\" height=\"420\" src=\"https:\/\/www.youtube.com\/embed\/f7GfXkX3KAw?feature=oembed&amp;enablejsapi=1\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<h2>Some new style features<\/h2>\n<p>I added some new features to make it more fun and more easy to understand when you are right or wrong. It also stops the user from changing the answers. They can refresh, but they will have to start again from the beginning.<\/p>\n<pre class=\"lang:default decode:true \">import os\r\n\r\n\r\ncounter = 1\r\ntemplate = \"\"\"&lt;input id=\"i1\" type=\"text\" size=1 onchange=\"ris=document.getElementById('ris1');if(this.value=='1000'){ris1.innerHTML='Risposta corretta!';tt1.style='color:blue';this.setAttribute('readonly','true');this.style='background:cyan';counter +=1}else{tt1.style='color:red';ris1.innerHTML='&lt;i style=color:red&gt;Risposta sbagliata&lt;\/i&gt;';this.style='background:red;';this.setAttribute('readonly','true');}\"&gt; &lt;b id='tt1'&gt;title&lt;\/b&gt; - &lt;b id=\"ris1\" style='color:blue;'&gt;&lt;\/b&gt;&lt;br&gt;\"\"\"\r\n\r\n\r\ndef new_ex(title, solution):\r\n    \"Substitute the default,values with new ones\"\r\n    global template, counter\r\n    template2 = template.replace(\"title\", title)\r\n    template2 = template2.replace(\"ris1\", \"ris\" + str(counter))\r\n    template2 = template2.replace(\"tt1\", \"tt\" + str(counter))\r\n    template2 = template2.replace(\"i1\", \"i\" + str(counter))\r\n    template2 = template2.replace(\"1000\", solution)\r\n    counter += 1\r\n    return template2\r\n\r\ntemplate3 = \"\"\"\r\n&lt;script&gt;\r\nlet counter = ';'\r\n&lt;\/script&gt;\r\n&lt;h3&gt;Il turismo indiano&lt;\/h3&gt;\r\n&lt;ul&gt;\r\n&lt;li&gt;Popolazione:  1,2 miliardi di abitanti\r\n&lt;li&gt;lingua ufficiale: inglese\r\n&lt;li&gt;Reddito: 73 euro\r\n&lt;li&gt;Religioni: induisti (80%), mussulmani (13%)\r\n&lt;\/ul&gt;\r\nRispondi alle seguenti domande vero falso (con v o f)\r\n&lt;br&gt;\"\"\"\r\n\r\n# Question and answer separated by # withput space\r\nq_n_a = \"\"\"Il turismo indiano outgoing aumenter\u00e0 nei prossimi anni#v\r\nGli indiani preferiscono l'Europa all'Asia#f\r\nI businessman e i giovani indiani preferiscono gli USA#v\r\nIl turista indiano preferisce il Veneto, il Lazio e la Toscana#v\r\nHa un'alta propensione alla spesa#v\r\nPreferisce gli alberghi a 2-3 stelle#f\r\n\"\"\"\r\n\r\nq_n_a = q_n_a.splitlines()\r\n\r\nqna2 = []\r\nfor q in q_n_a:\r\n    q = q.split(\"#\")\r\n    qna2.append(q)\r\nprint(qna2)\r\nq_n_a = qna2\r\n\r\nfor n in q_n_a:\r\n    template3 += new_ex(n[0], n[1])\r\n\r\ntemplate3 += \"\"\"&lt;script&gt;\r\n\r\n&lt;\/script&gt;\"\"\"\r\n\r\n# End of exercises\r\n\r\n# =========== do not change this code below ===\r\nwith open(\"new.html\", \"w\", encoding=\"utf-8\") as file:\r\n    file.write(template3)\r\nos.startfile(\"new.html\")<\/pre>\n<p>The output<\/p>\n<p>L&#8217;output in questa pagina sar\u00e0 un po&#8217; diverso, per le impostazioni del sito (bootstrap).<\/p>\n\r\n<script>\r\nlet counter = ';'\r\n<\/script>\r\n<h3>Il turismo indiano<\/h3>\r\n<ul>\r\n<li>Popolazione:  1,2 miliardi di abitanti\r\n<li>lingua ufficiale: inglese\r\n<li>Reddito: 73 euro\r\n<li>Religioni: induisti (80%), mussulmani (13%)\r\n<\/ul>\r\nRispondi alle seguenti domande vero falso (con v o f)\r\n<br>\r\n<br><b id='tt1'>Il turismo indiano outgoing aumenter\u00e0 nei prossimi anni<\/b> - <b id=\"ris1\" style='color:blue;'><\/b><br>\r\n<input id=\"i1\" type=\"text\" size=1 onchange=\"ris=document.getElementById('ris1');if(this.value=='v'){ris1.innerHTML='Risposta corretta!';tt1.style='color:blue';this.setAttribute('readonly','true');this.style='background:cyan';counter +=1}else{tt1.style='color:red';ris1.innerHTML='<i style=color:red>Risposta sbagliata<\/i>';this.style='background:red;';this.setAttribute('readonly','true');}\">\r\n\r\n<br><b id='tt2'>Gli indiani preferiscono l'Europa all'Asia<\/b> - <b id=\"ris2\" style='color:blue;'><\/b><br>\r\n<input id=\"i2\" type=\"text\" size=1 onchange=\"ris=document.getElementById('ris2');if(this.value=='f'){ris2.innerHTML='Risposta corretta!';tt2.style='color:blue';this.setAttribute('readonly','true');this.style='background:cyan';counter +=1}else{tt2.style='color:red';ris2.innerHTML='<i style=color:red>Risposta sbagliata<\/i>';this.style='background:red;';this.setAttribute('readonly','true');}\">\r\n\r\n<br><b id='tt3'>I businessman e i giovani indiani preferiscono gli USA<\/b> - <b id=\"ris3\" style='color:blue;'><\/b><br>\r\n<input id=\"i3\" type=\"text\" size=1 onchange=\"ris=document.getElementById('ris3');if(this.value=='v'){ris3.innerHTML='Risposta corretta!';tt3.style='color:blue';this.setAttribute('readonly','true');this.style='background:cyan';counter +=1}else{tt3.style='color:red';ris3.innerHTML='<i style=color:red>Risposta sbagliata<\/i>';this.style='background:red;';this.setAttribute('readonly','true');}\">\r\n\r\n<br><b id='tt4'>Il turista indiano preferisce il Veneto, il Lazio e la Toscana<\/b> - <b id=\"ris4\" style='color:blue;'><\/b><br>\r\n<input id=\"i4\" type=\"text\" size=1 onchange=\"ris=document.getElementById('ris4');if(this.value=='v'){ris4.innerHTML='Risposta corretta!';tt4.style='color:blue';this.setAttribute('readonly','true');this.style='background:cyan';counter +=1}else{tt4.style='color:red';ris4.innerHTML='<i style=color:red>Risposta sbagliata<\/i>';this.style='background:red;';this.setAttribute('readonly','true');}\">\r\n\r\n<br><b id='tt5'>Ha un'alta propensione alla spesa<\/b> - <b id=\"ris5\" style='color:blue;'><\/b><br>\r\n<input id=\"i5\" type=\"text\" size=1 onchange=\"ris=document.getElementById('ris5');if(this.value=='v'){ris5.innerHTML='Risposta corretta!';tt5.style='color:blue';this.setAttribute('readonly','true');this.style='background:cyan';counter +=1}else{tt5.style='color:red';ris5.innerHTML='<i style=color:red>Risposta sbagliata<\/i>';this.style='background:red;';this.setAttribute('readonly','true');}\">\r\n\r\n<br><b id='tt6'>Preferisce gli alberghi a 2-3 stelle<\/b> - <b id=\"ris6\" style='color:blue;'><\/b><br>\r\n<input id=\"i6\" type=\"text\" size=1 onchange=\"ris=document.getElementById('ris6');if(this.value=='f'){ris6.innerHTML='Risposta corretta!';tt6.style='color:blue';this.setAttribute('readonly','true');this.style='background:cyan';counter +=1}else{tt6.style='color:red';ris6.innerHTML='<i style=color:red>Risposta sbagliata<\/i>';this.style='background:red;';this.setAttribute('readonly','true');}\">\r\n<script>\r\n\r\n<\/script>\n<p>&nbsp;<\/p>\n\t<script>\r\nvar title = \"Exercises\";\r\n\t\tvar links = [\r\n[\"https:\/\/pythonprogramming.altervista.org\/pyquiz-1-0-create-tests-with-python-in-html\/\",\"Python to make test in Html\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/python-writes-short-answers-exercises-in-javascript\/\",\"Python and Javascript short answer exercises\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/python-to-make-exercises-in-javascript-yes-why-not\/\",\"Python and Javascript to make Interactive tests\"],\r\n[\"https:\/\/www.youtube.com\/watch?v=Y2XIEFqBCDc\",\"Video Exercises part 1\"],\r\n[\"https:\/\/www.youtube.com\/watch?v=FcyhUPRTv6c&t=210s\",\"Video Exercises part 2\"]\t\t\t\r\n];\r\n\t\t\r\n<\/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>\r\n\t\t\n","protected":false},"excerpt":{"rendered":"An example of how to make a test in javascript, using python to make it faster\n<a class=\"moretag\" href=\"https:\/\/pythonprogramming.altervista.org\/python-to-make-exercises-in-javascript-yes-why-not\/\"> [...]<\/a>","protected":false},"author":1,"featured_media":4223,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[210,1,635,370,542,331,334],"tags":[],"class_list":["post-4221","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-basics","category-examples","category-exercises","category-html","category-html-with-python","category-javascript","category-javascript-and-python"],"avopt_banners_inside_post":true,"avopt_banners_on_page":true,"av_copy_from":"","av_sharing_message":"","av_sharing_allowed":true,"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\/4221","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=4221"}],"version-history":[{"count":6,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/4221\/revisions"}],"predecessor-version":[{"id":4238,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/4221\/revisions\/4238"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media\/4223"}],"wp:attachment":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media?parent=4221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/categories?post=4221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/tags?post=4221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}