Back

DynamiCode

Collaborated with peers to create a web app that centers around dynamic social media posts. Users can create posts that contain snippets of Python code. Other users can then run the code in a browser and see how the code changes the post. Posts can include interactive elements like sliders and dropdowns. The Python snippets are run in a sandboxed environment using Skulpt, blocking access to the server or sensitive user information on the browser.

Features

User authentication using up-to-date security practices, such as salt+hash passwords.
Users can create posts with Python code snippets run in browsers.
Learning modules: Educational pages teaching the basics of Python utilizing in-browser Python snippets.

Technologies

Heroku

Python + Flask

Bootstrap

PostgreSQL

Skulpt

jQuery

Demo Source Code

The web app itself has a visual editor for creating posts, but for the sake of demonstration, the "source code" for the demo is shown below. It's in a JSON format and can be modified freely.

{
    "title": "DynamiCode Demo",
    "author": "Empathy",
    "date_created": "2022-06-25",
    "codepage_type": "post",
    "blocks": [
        {
            "type": "TextBlock",
            "name": "Name",
            "text": "### Hi! Get started by running the code block below."
        },
        {
            "type": "CodeBlock",
            "name": "C1",
            "code": "import page\nhide_blocks = ['C2', 'C3', 'C4', 'C5', 'C6', 'Game Slider', 'Game Answer', 'Game Guesses', 'Color Choice',\n               'Color', 'Prompt']\nfor block in hide_blocks:\n    page.get_block(block).hide()\nname_block = page.get_block('Name')\nname_block.set_text('#### Hello, please enter your name below.')\nname = input('What is your name?\\n').strip()\nname_block.set_text(name)\nname_block.hide()\n\npage.get_block('Prompt').set_text(f'#### Hi {name}! This is a simple demo of DynamiCode. This specific demo'\n                                  ' takes the form of a short survey. Hopefully it can convey the capabilities'   \n                                  ' of DynamiCode!\\n\\nTo continue to each new section, simply run the code block'\n                                  ' at the end of each section.')\npage.get_block('Prompt').show()\npage.get_block('C2').show()\npage.get_block('C1').hide()\n"
        },
        {
            "type": "TextBlock",
            "name": "Prompt",
            "text": ""
        },
        {
            "type": "ChoiceBlock",
            "name": "Color Choice",
            "text": "What is your favorite color?",
            "choices": [
                "Red",
                "Yellow",
                "Blue",
                "Other"
            ]
        },
        {
            "type": "SliderBlock",
            "name": "Game Slider",
            "text": "#### Now, let's play a game. I'm thinking of a number between 0 and 10. Can you guess what it is?",
            "lower": 0,
            "upper": 10,
            "default": 5
        },
        {
            "type": "CodeBlock",
            "name": "C2",
            "code": "# RUN ME TO CONTINUE!\nimport page\npage.get_block('Prompt').hide()\ncolor_block = page.get_block('Color Choice')\ncolor_block.set_text('#### Choose your favorite color from the list below.\\n\\nRemember to run the code block at the end!')\ncolor_block.show()\npage.get_block('C2').hide()\npage.get_block('C3').show()\n"
        },
        {
            "type": "TextBlock",
            "name": "Color",
            "text": ""
        },
        {
            "type": "TextBlock",
            "name": "Game Answer",
            "text": ""
        },
        {
            "type": "TextBlock",
            "name": "Game Guesses",
            "text": "1"
        },
        {
            "type": "CodeBlock",
            "name": "C3",
            "code": "# RUN ME TO CONTINUE!\nimport page\nimport random\ncolor_block = page.get_block('Color Choice')\ncolor = color_block.get_selected_choice()\ncolor_block.hide()\nprompt_block = page.get_block('Prompt')\nif color == 'Other':\n    prompt_block.set_text('#### So your favorite color wasn\\'t on the list, huh? Alright then, what is it?')\n    prompt_block.show()\n    color = input('What is your favorite color?\\n').strip()\npage.get_block('Color').set_text(color)\nprompt_block.set_text(f'#### Your favorite color is {color}? Interesting.')\npage.get_block('Game Answer').set_text(str(random.randint(0, 10)))\nprompt_block.show()\npage.get_block('Game Slider').show()\npage.get_block('C3').hide()\npage.get_block('C4').show()\n"
        },
        {
            "type": "CodeBlock",
            "name": "C4",
            "code": "# RUN ME TO CONTINUE!\nimport page\ntrue_number = int(page.get_block('Game Answer').get_text())\nguess = int(page.get_block('Game Slider').get_value())\npage.get_block('Prompt').hide()\nif guess == true_number:\n    page.get_block('Prompt').set_text(f'#### That\\'s right! The number was {true_number}.\\n\\nNow run the code block'\n                                      ' to see your results.')\n    page.get_block('Prompt').show()\n    page.get_block('Game Slider').hide()\n    page.get_block('C4').hide()\n    page.get_block('C5').show()\nelse:\n    page.get_block('Game Slider').set_text(f'#### The number is not {guess}. Try again.')\n    guesses = int(page.get_block('Game Guesses').get_text()) + 1\n    page.get_block('Game Guesses').set_text(str(guesses))\n"
        },
        {
            "type": "CodeBlock",
            "name": "C5",
            "code": "# RUN ME TO SEE RESULTS!\nimport page\nname = page.get_block('Name').get_text()\ncolor = page.get_block('Color').get_text()\nguesses = page.get_block('Game Guesses').get_text()\npage.get_block('Prompt').set_text(f'#### Thank you for taking the survey! From what I remember, your name is {name},'\n                                  f' your favorite color is {color}, and it took you {guesses} guesses to guess the'  \n                                  ' number.\\n\\nThanks for running this demo! Run the next code block to see all'\n                                  ' the code used to create this page.')\npage.get_block('Prompt').show()\npage.get_block('C5').hide()\npage.get_block('C6').show()\n"
        },
        {
            "type": "CodeBlock",
            "name": "C6",
            "code": "# RUN ME TO SEE THE CODE!\nimport page\nall_blocks = ['C1', 'C2', 'C3', 'C4', 'C5', 'C6', 'Name', 'Prompt', 'Color Choice', 'Color',\n              'Game Slider', 'Game Answer', 'Game Guesses']\nfor block in all_blocks:\n    page.get_block(block).show()\n"
        }
    ]
}