{"id":4380,"date":"2019-12-19T09:50:45","date_gmt":"2019-12-19T08:50:45","guid":{"rendered":"https:\/\/pythonprogramming.altervista.org\/?p=4380"},"modified":"2019-12-19T17:58:36","modified_gmt":"2019-12-19T16:58:36","slug":"python-writes-short-answers-exercises-in-javascript","status":"publish","type":"post","link":"https:\/\/pythonprogramming.altervista.org\/python-writes-short-answers-exercises-in-javascript\/","title":{"rendered":"Python writes short answers exercises in Javascript"},"content":{"rendered":"<p>Another post about <strong>interactive<\/strong> <strong>exercises<\/strong> in <strong>Python<\/strong>. This time it is a <strong>short answer<\/strong> <strong>exercise maker<\/strong>. As output you will have an <strong>html file<\/strong> with the <strong>questions<\/strong> that you can post in your blog and you will not have to<strong> write javascript<\/strong> and html code, because <strong>Python will do it for you<\/strong>, based on a simple javascript template. Python will also take care of saving and showing the html file. All you have to do is to <strong>add<\/strong> your <strong>questions<\/strong> and answers <strong>in a list<\/strong> in the way that you can see in the video below and at the end copy the code of the html page (right click on the html page and select show the code or source code&#8230; something like that, should be the last voice of the contextual menu.<\/p>\n<p>in the lists in the list (sol), you put (as a string):<\/p>\n<ul>\n<li>the address of an image (optional, you leave it empty if you do not want it)<\/li>\n<li>The text of the question or exercise<\/li>\n<li>the solution<\/li>\n<\/ul>\n<pre class=\"lang:default decode:true\">    [\"https:\/\/www.ilpost.it\/wp-content\/uploads\/2019\/08\/koala.jpg\",\r\n    \"How many animals are there in the above image?\",\r\n    \"2\"],<\/pre>\n<p>Every question got these data in a list of 3 strings and all the lists are contained in the variable sol. The program will take care of showing everything in the browsere.<\/p>\n<p>If the user is right an alert will appear.<\/p>\n<h2>How it looks like (an example)<\/h2>\n<script>\r\nfunction code(val, sol){ if (val==sol){alert(\"Ok\");}}<\/script>\r\n<img src='https:\/\/www.ragioneria.com\/sites\/default\/files\/inline-images\/guide\/Bilancio20.jpeg'' width=500\/><br><b>In caso di uscita finanziaria posticipata al prossimo anno di un costo che si trova a cavallo di due esercizi, si registra\r\n    <ol>\r\n    <li>rateo attivo\r\n    <li>rateo passivo\r\n    <li>risconto attivo\r\n    <li>risconto passivo?\r\n    <\/ol><\/b><br>\r\n<input id=\"id0\" type=\"text\" onchange=\"code(this.value, 2)\">\r\n<hr><img src='https:\/\/www.ilpost.it\/wp-content\/uploads\/2019\/08\/koala.jpg'' width=500\/><br><b>Quanti animali ci sono in questa immagine?<\/b><br>\r\n<input id=\"id1\" type=\"text\" onchange=\"code(this.value, 2)\">\r\n<hr>\n<h2>Watch the video explanation of the code<\/h2>\n<p><iframe loading=\"lazy\" title=\"Python and javscript short answer exercise for free\" width=\"747\" height=\"420\" src=\"https:\/\/www.youtube.com\/embed\/ayxgFY2XZkQ?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>The code of the example<\/h2>\n<p>This is the code to make the exercises. I think it is quite easy to understand, so&#8230; that&#8217;s it<\/p>\n<pre class=\"lang:default decode:true\"># A script to make tests in javascript with python\r\nimport os\r\n\r\n\r\n# List of lists with datas for the questions; each has 1.image 2.question 3.answer all as strings\r\nsol = [\r\n    [\"https:\/\/www.ragioneria.com\/sites\/default\/files\/inline-images\/guide\/Bilancio20.jpeg\",\r\n    \"\"\"In caso di uscita finanziaria posticipata al prossimo anno di un costo che si trova a cavallo di due esercizi, si registra\r\n    &lt;ol&gt;\r\n    &lt;li&gt;rateo attivo\r\n    &lt;li&gt;rateo passivo\r\n    &lt;li&gt;risconto attivo\r\n    &lt;li&gt;risconto passivo?\r\n    &lt;\/ol&gt;\"\"\",\r\n    \"2\"],\r\n\r\n    #Domanda 2:\r\n    [\"https:\/\/www.ilpost.it\/wp-content\/uploads\/2019\/08\/koala.jpg\",\r\n    \"Quanti animali ci sono in questa immagine?\",\r\n    \"2\"],\r\n\r\n]\r\n\r\n# Here goes the function that checks if the answer is right\r\nfunction = \"\"\"&lt;script&gt;\r\nfunction code(val, sol){ if (val==sol){alert(\"Ok\");}}&lt;\/script&gt;\r\n\"\"\"\r\n# This is the input text template that will be used to create the questions\r\ntpl = \"\"\"--img--&lt;b&gt;--question--&lt;\/b&gt;&lt;br&gt;\r\n&lt;input id=\"--xxx--\" type=\"text\" onchange=\"code(this.value, --soluzione--)\"&gt;\r\n\"\"\"\r\n\r\n\r\ndef create_html():\r\n    \"This returns the html code with the questions and input boxes\"\r\n    html = \"\"\r\n    counter = 0\r\n    # substitute the placeholders with data\r\n    for qns in sol:\r\n        # if the first string is not empty, it shows the image of the address in the string\r\n        if qns[0] != \"\":\r\n            template = tpl.replace(\r\n                \"--img--\", \"&lt;img src='\" + qns[0] + \"'' width=500\/&gt;&lt;br&gt;\")\r\n        else:\r\n            template = tpl\r\n        template = template.replace(\"--question--\", qns[1])\r\n        template = template.replace(\"--xxx--\", \"id\" + str(counter))\r\n        template = template.replace(\"--soluzione--\", qns[2])\r\n        template += \"&lt;hr&gt;\"\r\n        counter += 1\r\n        html += template\r\n    return html\r\n\r\n# Adds the initial script and the html code with the questions\r\nhtml = function + create_html()\r\n\r\n# Saves the html file with the code created above\r\nwith open(\"esempio.html\", \"w\") as file:\r\n    file.write(html)\r\n# shows the file in the browser\r\nos.startfile(\"esempio.html\")\r\n<\/pre>\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":"Short answer exercises with Python and Javascript to produce an html file\n<a class=\"moretag\" href=\"https:\/\/pythonprogramming.altervista.org\/python-writes-short-answers-exercises-in-javascript\/\"> [...]<\/a>","protected":false},"author":1,"featured_media":4382,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[1],"tags":[233,4,598],"class_list":["post-4380","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-examples","tag-javascript","tag-python","tag-tests"],"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\/4380","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=4380"}],"version-history":[{"count":5,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/4380\/revisions"}],"predecessor-version":[{"id":4388,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/4380\/revisions\/4388"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media\/4382"}],"wp:attachment":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media?parent=4380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/categories?post=4380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/tags?post=4380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}