{"id":1929,"date":"2019-05-01T06:50:49","date_gmt":"2019-05-01T04:50:49","guid":{"rendered":"https:\/\/pythonprogramming.altervista.org\/?p=1929"},"modified":"2021-09-06T17:11:07","modified_gmt":"2021-09-06T15:11:07","slug":"skulpt-1-python-inside-a-web-page","status":"publish","type":"post","link":"https:\/\/pythonprogramming.altervista.org\/skulpt-1-python-inside-a-web-page\/","title":{"rendered":"How to run Python in a Web Page with Skulpt"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">With <a href=\"https:\/\/skulpt.org\/\">Skulpt <\/a>you can use Python directly into a web page, and this is awesome, right. It has of course some limitations, but you got a lot that you can do to make something special on a page using Python. In this first example we will show some basic stuff to put some code to use the turtle module to show drawings on the screen with the use of this language (logo) that allows you to draw stuffs on the screen.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;html> \n&lt;head> \n&lt;script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.9.0\/jquery.min.js\" type=\"text\/javascript\">&lt;\/script> \n&lt;script src=\"http:\/\/www.skulpt.org\/static\/skulpt.min.js\" type=\"text\/javascript\">&lt;\/script> \n&lt;script src=\"http:\/\/www.skulpt.org\/static\/skulpt-stdlib.js\" type=\"text\/javascript\">&lt;\/script> \n\n&lt;\/head> \n\n&lt;body> \n\n&lt;script type=\"text\/javascript\"> \n\/\/ output functions are configurable.  This one just appends some text\n\/\/ to a pre element.\nfunction outf(text) { \n    var mypre = document.getElementById(\"output\"); \n    mypre.innerHTML = mypre.innerHTML + text; \n} \nfunction builtinRead(x) {\n    if (Sk.builtinFiles === undefined || Sk.builtinFiles[\"files\"][x] === undefined)\n            throw \"File not found: '\" + x + \"'\";\n    return Sk.builtinFiles[\"files\"][x];\n}\n\n\/\/ Here's everything you need to run a python program in skulpt\n\/\/ grab the code from your textarea\n\/\/ get a reference to your pre element for output\n\/\/ configure the output function\n\/\/ call Sk.importMainWithBody()\nfunction runit() { \n   var prog = document.getElementById(\"yourcode\").value; \n   var mypre = document.getElementById(\"output\"); \n   mypre.innerHTML = ''; \n   Sk.pre = \"output\";\n   Sk.configure({output:outf, read:builtinRead}); \n   (Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'mycanvas';\n   var myPromise = Sk.misceval.asyncToPromise(function() {\n       return Sk.importMainWithBody(\"&lt;stdin>\", false, prog, true);\n   });\n   myPromise.then(function(mod) {\n       console.log('success');\n   },\n       function(err) {\n       console.log(err.toString());\n   });\n} \n&lt;\/script> \n\n&lt;h3>Economia&lt;\/h3> \n&lt;form> \n&lt;textarea id=\"yourcode\" cols=\"40\" rows=\"10\" style=\"visibility:hidden; display:none;\">import turtle\n\nt = turtle.Turtle()\nt.forward(100)\n\nprint \"Break Even Poing\" \n&lt;\/textarea>&lt;br \/> \n&lt;button type=\"button\" onclick=\"runit()\">Vedi&lt;\/button> \n&lt;\/form> \n&lt;pre id=\"output\" >&lt;\/pre> \n&lt;!-- If you want turtle graphics include a canvas -->\n&lt;div id=\"mycanvas\">&lt;\/div> \n\n&lt;\/body> \n\n&lt;\/html><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Something a little more complex, with textarea visible.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;html> \n&lt;head> \n&lt;script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.9.0\/jquery.min.js\" type=\"text\/javascript\">&lt;\/script> \n&lt;script src=\"http:\/\/www.skulpt.org\/static\/skulpt.min.js\" type=\"text\/javascript\">&lt;\/script> \n&lt;script src=\"http:\/\/www.skulpt.org\/static\/skulpt-stdlib.js\" type=\"text\/javascript\">&lt;\/script> \n\n&lt;\/head> \n\n&lt;body> \n\n&lt;script type=\"text\/javascript\"> \n\/\/ output functions are configurable.  This one just appends some text\n\/\/ to a pre element.\nfunction outf(text) { \n    var mypre = document.getElementById(\"output\"); \n    mypre.innerHTML = mypre.innerHTML + text; \n} \nfunction builtinRead(x) {\n    if (Sk.builtinFiles === undefined || Sk.builtinFiles[\"files\"][x] === undefined)\n            throw \"File not found: '\" + x + \"'\";\n    return Sk.builtinFiles[\"files\"][x];\n}\n\n\/\/ Here's everything you need to run a python program in skulpt\n\/\/ grab the code from your textarea\n\/\/ get a reference to your pre element for output\n\/\/ configure the output function\n\/\/ call Sk.importMainWithBody()\nfunction runit() { \n   var prog = document.getElementById(\"yourcode\").value; \n   var mypre = document.getElementById(\"output\"); \n   mypre.innerHTML = ''; \n   Sk.pre = \"output\";\n   Sk.configure({output:outf, read:builtinRead}); \n   (Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'mycanvas';\n   var myPromise = Sk.misceval.asyncToPromise(function() {\n       return Sk.importMainWithBody(\"&lt;stdin>\", false, prog, true);\n   });\n   myPromise.then(function(mod) {\n       console.log('success');\n   },\n       function(err) {\n       console.log(err.toString());\n   });\n} \n&lt;\/script> \n\n&lt;h3>Economia&lt;\/h3> \n&lt;form> \n&lt;textarea id=\"yourcode\" cols=\"40\" rows=\"10\">import turtle\n\nimport turtle\n\nprint \"Break Even Point\" \nt = turtle.Turtle()\nt.speed(10)\nf = t.forward\nr = t.rt\nu = t.pu\nd = t.pd\nc = t.color\ng = t.goto\n\n# --------- assi\nf(-150)\nr(-90)\nf(150)\nu()\n# ------------ torna all'origine\ng(-150,0)\n# ---------- costi variabili\nd()\nr(60)\nt.speed(3)\nc(\"red\")\nf(150)\nt.write(\"COSTI VARIABILI\")\n#----------- RICAVI\nt.speed(10)\nu()\ng(-150,0)\nr(-15)\nd()\nt.speed(3)\nc(\"blue\")\nf(150)\nt.write(\"RICAVI\")\nprint(\"La retta dei ricavi ha una inclinazione maggiore.\")\nprint(\"Significa che R > cv\")\n\n&lt;\/textarea>&lt;br \/> \n&lt;button type=\"button\" onclick=\"runit()\">Vedi&lt;\/button> \n&lt;\/form> \n&lt;pre id=\"output\" >&lt;\/pre> \n&lt;!-- If you want turtle graphics include a canvas -->\n&lt;div id=\"mycanvas\">&lt;\/div> \n\n&lt;\/body> \n\n&lt;\/html><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/05\/01.png\"><img loading=\"lazy\" decoding=\"async\" width=\"364\" height=\"504\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/05\/01.png\" alt=\"\" class=\"wp-image-1931\" srcset=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/05\/01.png 364w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/05\/01-320x443.png 320w\" sizes=\"auto, (max-width: 364px) 100vw, 364px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Skulpt to use Python in a web page\" width=\"747\" height=\"420\" src=\"https:\/\/www.youtube.com\/embed\/iBHcj_oIeyk?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>\n\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.9.0\/jquery.min.js\" type=\"text\/javascript\"><\/script> \r\n<script src=\"http:\/\/www.skulpt.org\/static\/skulpt.min.js\" type=\"text\/javascript\"><\/script> \r\n<script src=\"http:\/\/www.skulpt.org\/static\/skulpt-stdlib.js\" type=\"text\/javascript\"><\/script> \r\n\r\n\r\n<script type=\"text\/javascript\"> \r\n\/\/ output functions are configurable.  This one just appends some text\r\n\/\/ to a pre element.\r\nfunction outf(text) { \r\n    var mypre = document.getElementById(\"output\"); \r\n    mypre.innerHTML = mypre.innerHTML + text; \r\n} \r\nfunction builtinRead(x) {\r\n    if (Sk.builtinFiles === undefined || Sk.builtinFiles[\"files\"][x] === undefined)\r\n            throw \"File not found: '\" + x + \"'\";\r\n    return Sk.builtinFiles[\"files\"][x];\r\n}\r\n\r\n\/\/ Here's everything you need to run a python program in skulpt\r\n\/\/ grab the code from your textarea\r\n\/\/ get a reference to your pre element for output\r\n\/\/ configure the output function\r\n\/\/ call Sk.importMainWithBody()\r\nfunction runit() { \r\n   var prog = document.getElementById(\"yourcode\").value; \r\n   var mypre = document.getElementById(\"output\"); \r\n   mypre.innerHTML = ''; \r\n   Sk.pre = \"output\";\r\n   Sk.configure({output:outf, read:builtinRead}); \r\n   (Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'mycanvas';\r\n   var myPromise = Sk.misceval.asyncToPromise(function() {\r\n       return Sk.importMainWithBody(\"<stdin>\", false, prog, true);\r\n   });\r\n   myPromise.then(function(mod) {\r\n       console.log('success');\r\n   },\r\n       function(err) {\r\n       console.log(err.toString());\r\n   });\r\n} \r\n<\/script> \r\n\r\n<h3>Economia<\/h3> \r\n<form> \r\n<textarea id=\"yourcode\" cols=\"40\" rows=\"10\">\r\n\r\nimport turtle\r\n\r\nprint \"Break Even Point\" \r\nt = turtle.Turtle()\r\nt.speed(10)\r\nf = t.forward\r\nr = t.rt\r\nu = t.pu\r\nd = t.pd\r\nc = t.color\r\ng = t.goto\r\n\r\n# --------- assi\r\nf(-150)\r\nr(-90)\r\nf(150)\r\nu()\r\n# ------------ torna all'origine\r\ng(-150,0)\r\n# ---------- costi variabili\r\nd()\r\nr(60)\r\nt.speed(3)\r\nc(\"red\")\r\nf(150)\r\nt.write(\"COSTI VARIABILI\")\r\n#----------- RICAVI\r\nt.speed(10)\r\nu()\r\ng(-150,0)\r\nr(-15)\r\nd()\r\nt.speed(3)\r\nc(\"blue\")\r\nf(150)\r\nt.write(\"RICAVI\")\r\nprint(\"La retta dei ricavi ha una inclinazione maggiore.\")\r\nprint(\"Significa che R > cv\")\r\n\r\n<\/textarea><br \/> \r\n<button type=\"button\" onclick=\"runit()\">Vedi<\/button> \r\n<\/form> \r\n<pre id=\"output\" ><\/pre> \r\n<!-- If you want turtle graphics include a canvas -->\r\n<div id=\"mycanvas\"><\/div> <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><!-- se vuoi mettere un testo scorrevole\r\n[hoops name=\"typeWriterGen\"]\r\n\r\npoi metti un id diverso per ogni testo nella stessa pagina\r\n\r\n<div id=\"div01\">\r\n<script>\r\n\r\ntypeWriterGen(\"div01\",\"Esempio di testo scorrevole\");\r\n<\/script>\r\n\r\n-->\r\n<style>\r\n.avatar {\r\n  vertical-align: middle;\r\n  width: 100px;\r\n  height: 100px;\r\n  border-radius: 50%;\r\n}\r\n<\/style>\r\n\r\n<hr>\r\n\r\n<!-- NEWSLETTER LINK -->\r\n<a href=\"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLSf7TniIPCWHDzCSGh2dYZaCwDvi9yLKS5ovFdKuK1sdfOvwEg\/viewform\">\r\n<img decoding=\"async\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2023\/08\/image-13.png\" class=\"avatar\">\r\nSubscribe to the <b>newsletter<\/b> for updates<\/a><br>\r\n\r\n<!-- TKINTER TEMPLATE LINK -->\r\n<a href=\"https:\/\/pythonprogramming.altervista.org\/tkinter-templates\/\">\r\n<img decoding=\"async\" src=\"https:\/\/i0.wp.com\/pythonprogramming.altervista.org\/wp-content\/uploads\/2023\/07\/image-26.png\" class=\"avatar\">\r\nTkinter templates<\/a><br>\r\n\r\n<!-- MY AVATAR PUT A LINK TO YOUTUBE CHANNEL-->\r\n<iframe loading=\"lazy\" frameborder=\"0\" src=\"https:\/\/itch.io\/embed\/711828\" width=\"552\" height=\"167\"><a href=\"https:\/\/pythonprogrammi.itch.io\/pysnake\">PySnake by PythonProgrammi<\/a><\/iframe>\r\n<br>\r\n<style>\r\n.avatar {\r\n  vertical-align: middle;\r\n  width: 100px;\r\n  height: 100px;\r\n  border-radius: 50%;\r\n}\r\n<\/style>\r\n\r\n\r\n<a href=\"https:\/\/www.youtube.com\/channel\/UCzbxq5e9gLiY-je2-br1rvg\">\r\n\t<img decoding=\"async\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2020\/10\/avatar64x64.png\" alt=\"Avatar\" class=\"avatar\">\r\n\t My youtube channel<\/a><br>\r\n\r\n<br>\r\n\r\nTwitter: <a href=\"https:\/\/twitter.com\/pythonprogrammi\">@pythonprogrammi - python_pygame<\/a>\r\n<h3>Claude's Games<\/h3>\r\n<p><a href=\"https:\/\/pythonprogramming.altervista.org\/random-daily-game-1-arkanoid\/\">Arkanoid<\/a><br>\r\n<a href=\"https:\/\/pythonprogramming.altervista.org\/platform-2d-with-pygame-made-with-claude\/\">Platform 2d<\/a><\/p> <!-- videogames made with claude -->\r\n<a href=\"https:\/\/pythonprogramming.altervista.org\/artifacts-games-day-1-memory-game\/\">1. Memory game<\/a>\r\n<h4>Videos<\/h4>\r\n<a href=\"https:\/\/youtu.be\/ciLjWWw5pLY\">Speech recognition game<\/a>\r\n<h3>Pygame's Platform Game<\/h3>\r\n\r\n<a href=\"https:\/\/pythonprogramming.altervista.org\/pygame-platform-game-5-sounds-and-mixer\/\"><img decoding=\"async\" src=\"https:\/\/i1.wp.com\/pythonprogramming.altervista.org\/wp-content\/uploads\/2020\/01\/climbercover.png?w=557&ssl=1\"\/ width=\"50%\"><\/a>\r\n<script>\r\nvar title = \"Platform Pygame\";\r\n\t\tvar links = [\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-animation-of-a-sprite-v-1-3\/\",\"Animation 1.3\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-sprite-animation-v-2-better-coding-test-it-checking-fps-on-the-screen\/\",\"Animation 1.2\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-how-to-display-the-frame-rate-fps-on-the-screen\/\",\"Display Frame rate\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-sprite-animation-update\/\",\"Animation 1.1\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-platformer-1\/\",\"Pygame Platform Game 1\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/python-platform-game-2\/\",\"Pygame Platform 2\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-platform-game-3-recap-cheatsheet\/\",\"Pygame PLatform 3 - recap and some Cheat Sheet\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-platform-game-4-background-and-stuffs\/\",\"Pygame Platform 4 - Background & organizing code\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-platform-game-5-sounds-and-mixer\/\",\"Pygame Platform 5 - Sounds\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/platform-game-in-detail-part-1\/\",\"Game in detail part 1\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/map-maker-1-2\/\", \"Map maker 1.2\"]\r\n\t\t];\r\n\t\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>\r\n\r\n<h3>Other Pygame's posts<\/h3>\r\n\r\n<script>\r\nvar title = \"Pygame's Posts\"\r\nvar links = [\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-platformer-1\/\",\"Platform game 1\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/make-a-platform-game-with-pygame-dafluffypotato\/\",\"DaFluffyPotato Platform Tutorials\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/python-and-classic-arcade-games-pong\/\",\"Pong Game Full\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/python-draws-in-colors-app-to-draw-with-pygame\/\",\"PyGameGIF 2\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-draw-app-with-animation\/\",\"PyGameGIF 1\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pydraw-2-0-app-to-draw-gif\/\",\"PyDraw 2.0\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-drawing-2\/\",\"Draw with Pygame\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/animation-with-pygame\",\"Sprite animation 1\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/animation-on-pygame-2-free-characters-and-more-actions\/\",\"Sprite animation 2\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/starting-with-pygame\/\",\"Starting movements with Pygame\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-3-move-sprite\/\", \"Move a Sprite\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-4-fonts\/\",\"Text and Fonts\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-animate-a-sprite\/\", \"Animate a sprite\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-and-mouse-events\/\",\"Mouse events\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pgp-aka-pygamepresentation-project\/\",\"Pygame presentation\"],\r\n\t[\"https:\/\/pythonprogramming.altervista.org\/moving-the-player-in-pygame-with-key-get_pressed\/\",\"How to use key.get_pressed()\"]\r\n]\r\n<\/script>\r\n\r\n\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><\/p>\n","protected":false},"excerpt":{"rendered":"skulpt to use python in web pages\n<a class=\"moretag\" href=\"https:\/\/pythonprogramming.altervista.org\/skulpt-1-python-inside-a-web-page\/\"> [...]<\/a>","protected":false},"author":1,"featured_media":1931,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[1],"tags":[4,372,375,374],"class_list":["post-1929","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-examples","tag-python","tag-skulpt","tag-turtle","tag-web-page"],"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\/1929","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=1929"}],"version-history":[{"count":7,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/1929\/revisions"}],"predecessor-version":[{"id":10353,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/1929\/revisions\/10353"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media\/1931"}],"wp:attachment":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media?parent=1929"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/categories?post=1929"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/tags?post=1929"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}