{"id":29413,"date":"2023-10-26T16:39:38","date_gmt":"2023-10-26T16:39:38","guid":{"rendered":"https:\/\/stg-nycdatasciencetutorials-tutstaging.kinsta.cloud\/tutorials\/?p=29413"},"modified":"2023-10-26T16:45:49","modified_gmt":"2023-10-26T16:45:49","slug":"python-tutorial-example","status":"publish","type":"post","link":"https:\/\/stg-nycdatasciencetutorials-tutstaging.kinsta.cloud\/tutorials\/coding\/learn-python\/python-tutorial-example\/","title":{"rendered":"Python Tutorial Example"},"content":{"rendered":"\r\n    <div class=\"ui segment py-editor segment-0\">\r\n        <form> \r\n        <textarea id=\"py-editor-input-0\" cols=\"40\" rows=\"20\"><br \/>\nprint(&#8220;Hello, World!&#8221;)<br \/>\n<\/textarea>\r\n\r\n        <div class=\"button-wrapper\"><button class=\"ui labeled icon green button\" id=\"py-editor-run-0\"><i class=\"play icon\"><\/i> Run<\/button><\/div>\r\n        <\/form> \r\n        <div id=\"mycanvas-0\"><\/div>\r\n        <div class=\"ui form output-wrapper-0\" style=\"display:none\">\r\n            <a class=\"ui blue right corner mini label clear-field\" style=\"display:none\"><i class=\"trash icon\"><\/i><\/a>\r\n            <div class=\"field\"> <div class=\"ui secondary segment\" id=\"py-editor-output-0\" rows=\"2\"><\/div><\/div><\/div>\r\n    <\/div>\r\n   \r\n    <style>.segment-0 .CodeMirror {height: 131px;}<\/style>\r\n    <script type=\"text\/javascript\">\r\n        jQuery(document).ready(function($){\r\n\r\n            const output = $(\"#py-editor-output-0\");\r\n            const input = CodeMirror.fromTextArea(document.getElementById(\"py-editor-input-0\"), { \r\n                mode: { \r\n                name: \"python\", \r\n                version: 3, \r\n                singleLineStringErrors: false\r\n            }, \r\n                lineNumbers: true, \r\n                indentUnit: 0, \r\n                matchBrackets: true\r\n            }); \r\n            input.setOption('theme', 'darcula');\r\n            \/\/ output functions are configurable.  This one just appends some text\r\n            \/\/ to a pre element.\r\n            function outf(text, error = false) { \r\n                $('.output-wrapper-0').show();\r\n                if(error){\r\n                    output.append('<div class=\"error output-item\">'+text+'<\/div>');\r\n                }else{\r\n\r\n                    output.append('<div class=\"output-item\">'+text+'<\/div>');\r\n                }\r\n            } \r\n            function 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            \/\/ 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\n            function runit_0() { \r\n               var prog = input.getValue(); \r\n               var mypre = $(\"#py-editor-output-0\"); \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-0';\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                    outf(err.toString(), true);\r\n                   \/\/console.log(err.toString());\r\n               });\r\n            } \r\n\r\n            $('#py-editor-run-0').click(function(e){\r\n                e.preventDefault();\r\n                runit_0();\r\n            })\r\n            \r\n            $('.clear-field').click(function(e){\r\n                e.preventDefault();\r\n                $(this).parent().find(\".field .segment .output-item\").remove();\r\n            })\r\n\r\n            $('.output-wrapper-0').hover(function(){\r\n              \/\/this code will execute when mouse enters the html element\r\n                $(this).find('.clear-field').show();\r\n            },\r\n            function(){\r\n                $(this).find('.clear-field').hide();\r\n              \/\/this code will execute when mouse leaves the html element\r\n            }); \r\n\r\n        })\r\n    <\/script>\r\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":3688,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[358],"tags":[],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/stg-nycdatasciencetutorials-tutstaging.kinsta.cloud\/tutorials\/wp-json\/wp\/v2\/posts\/29413"}],"collection":[{"href":"https:\/\/stg-nycdatasciencetutorials-tutstaging.kinsta.cloud\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stg-nycdatasciencetutorials-tutstaging.kinsta.cloud\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stg-nycdatasciencetutorials-tutstaging.kinsta.cloud\/tutorials\/wp-json\/wp\/v2\/users\/3688"}],"replies":[{"embeddable":true,"href":"https:\/\/stg-nycdatasciencetutorials-tutstaging.kinsta.cloud\/tutorials\/wp-json\/wp\/v2\/comments?post=29413"}],"version-history":[{"count":3,"href":"https:\/\/stg-nycdatasciencetutorials-tutstaging.kinsta.cloud\/tutorials\/wp-json\/wp\/v2\/posts\/29413\/revisions"}],"predecessor-version":[{"id":29419,"href":"https:\/\/stg-nycdatasciencetutorials-tutstaging.kinsta.cloud\/tutorials\/wp-json\/wp\/v2\/posts\/29413\/revisions\/29419"}],"wp:attachment":[{"href":"https:\/\/stg-nycdatasciencetutorials-tutstaging.kinsta.cloud\/tutorials\/wp-json\/wp\/v2\/media?parent=29413"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stg-nycdatasciencetutorials-tutstaging.kinsta.cloud\/tutorials\/wp-json\/wp\/v2\/categories?post=29413"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stg-nycdatasciencetutorials-tutstaging.kinsta.cloud\/tutorials\/wp-json\/wp\/v2\/tags?post=29413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}