[00:00:00] Hello there I'm Isabella, your tutor for python coding on Poppyi. [00:00:04] Poppyi is a website which allows you to build and publish interactive web page calculators. [00:00:10] Let's see some examples shall we? [00:00:14] The calculators shown on the site are created through the Poppyi form builder. [00:00:18] Anybody can create their own calculator by registering and publish them to this site. [00:00:23] Let's see how that works. [00:00:26] First register to create an account, and check your emails for the confirmation link. [00:00:32] Once logged in check your dashboard. [00:00:35] Click on register design to create a new design. [00:00:40] Make sure the design name does not already exist. [00:00:46] Once created click on the design in the dashboard. [00:00:49] It will take you to the Poppyi form builder. [00:00:53] Here the webpage content can be created. [00:00:57] In order to add elements to the form click the "Add field" button. [00:01:02] Select the desired input type, in this case text. [00:01:06] Enter a variable name and the text content. [00:01:14] Preview the content in order to display the form. [00:01:17] This renders the page in a new tab. [00:01:22] The rendered page displays the form elements from the form builder. [00:01:26] In this case a text field input, and also a submit button. [00:01:32] We hope you enjoyed this introduction to creating content on Poppyi. [00:01:36] See you next time.
[00:00:00] Hello there I'm Isabella your tutor. [00:00:03] This tutorial covers the poppy-i form building process in greater detail. [00:00:07] We will discuss the H.T.M.L input options available in order to create great interactive content. [00:00:13] Let's go mexico! [00:00:16] The first option we will consider is the raw H.T.M.L option. [00:00:21] Let's create this option by clicking on the add field button. [00:00:28] Give the field a variable name. [00:00:33] Type some H.T.M.L options of your choice. [00:00:36] Here we have entered two headings and some paragraph text using normal H.T.M.L syntax. [00:00:44] Set it as an input element to immediately display to the user. [00:00:48] Let's create a text input field below the H.T.M.L field. [00:00:52] Click add field and select text field. [00:00:57] Give the field variable name and description. [00:01:01] Here the description is named "An interesting description". [00:01:07] Set it as an input element to immediately display to the user. [00:01:13] To change the order of elements, click on the button next to the element and move the row up. [00:01:20] Move the row down again. [00:01:23] If we do not need an element, click on the element, in this case a button. [00:01:29] Click Remove field, to delete it. [00:01:33] Let's preview the content by clicking the preview button. [00:01:37] The preview shows the rendered page with headings from the H.T.M.L field type. [00:01:42] As well as a text field input option with an interesting description. [00:01:48] Great stuff. [00:01:50] Now let's go back to the poppy-i form builder and add more content. [00:01:55] Let's create a choicefield option, a button, and a form container. [00:02:01] Click add field and select "Basic Choicefield". [00:02:05] Give the variable name, "a_choice", or whatever. [00:02:11] Give the description for the user to see. [00:02:17] Give the comma separated list of options. [00:02:19] Here we will call them cat, dog, and mouse. [00:02:22] Select the field as an "Input". [00:02:26] Let's create a button, by clicking "Add field". [00:02:31] Give the variable name as main, this name should correspond to the function named main in our python [00:02:37] code. [00:02:37] Give the button description as "Click me". [00:02:41] Set the input type. [00:02:45] Finally let's create a pretty container to wrap our inputs in. [00:02:49] Click the position where we want to start the container block. [00:02:52] Click add field and select container block. [00:02:57] Let's add the end of the container at the bottom of the page. [00:03:00] Click add field again, select container end block and move the row to the bottom of the page. [00:03:09] Give the container start block and end block matching variable names. [00:03:16] Set the display types for them as inputs. [00:03:19] Give the container heading for the user to see, "Hello Container! [00:03:23] Now, let's preview this content. [00:03:26] The preview shows the new elements created. [00:03:29] Which are a choicefield with the options cat, dog, and mouse, a button with description "Click me! [00:03:35] And also a pretty container with description "Hello Container! [00:03:39] Clicking the button collects the form data and sends it to our python function. [00:03:44] On the next tutorial we will demonstrate this functionality. [00:03:48] Stay tuned and see you then!
[00:00:00] Hello there I'm Isabella your virtual tutor. [00:00:03] This tutorial will go into more detail on form building in poppy-i. [00:00:07] Together we will create interactive content for your users. [00:00:11] Let's start! [00:00:13] Let's create a calculator which adds two numbers together. [00:00:17] Starting with the H.T.M.L content first. [00:00:21] Click add field and select numeric field. [00:00:24] Give the field a field name in this case number 1 and number 2. [00:00:31] Give the field a description for the user which is also called Number 1 and Number 2. [00:00:39] Select the field as input types to display immediately on page render. [00:00:43] Let's preview the page to see what this looks like. [00:00:46] Click preview. [00:00:49] The preview shows the rendered page with two number fields displayed, Number 1 and Number 2 as well as [00:00:55] the submit button. [00:00:56] Clicking the submit button does not appear to do anything currently. [00:01:02] Buttons on the page when clicked, collect the current page data and send it as arguments to your python [00:01:07] functions. [00:01:08] As we have not defined any python functions, nothing has happened. [00:01:12] We can configure that by returning to the poppy-i form builder. [00:01:16] So let's do that now. [00:01:18] On the form builder we can see the button has been given a name "main". [00:01:22] This name must correspond to the function name we want to call. [00:01:27] We can see that the two are named correctly. [00:01:31] We need to access the user supplied data which is passed into the function main in the python dictionary [00:01:37] called form_data. [00:01:38] We can access this data by performing ordinary python lookups with the keys number_1 and number_2. [00:01:44] These are the variable names given to the numeric fields. [00:01:53] We would like to add these two numbers together, number_1 and number_2, and update the page for the user to [00:01:58] see the result. [00:01:59] Let's create a numeric field for the output by clicking add field. [00:02:05] Let's give it the output variable name number_add_output. [00:02:12] Give the description of the field as "add output" for the user to see. [00:02:18] Let's also give the input type as "output" so it isn't immediately displayed to the user. [00:02:27] Finally lets update this field in the python code. [00:02:30] To do this we return a dictionary with the key "number_add_output". [00:02:40] We specify the type of action as "update". [00:02:48] We specify the required value as the addition of number_1 and number_2. [00:02:58] Let's click preview to see the rendered page. [00:03:03] The page render shows two numeric inputs as before. [00:03:07] Let's enter values for each of them. [00:03:11] Clicking the submit button collects the page data and sends the data as an argument to our python function. [00:03:17] We return an action to update the form page elements. [00:03:21] The result is a numeric field updated with the number 3. [00:03:26] This demonstrates the most basic interactive content available. [00:03:30] Stay tuned for something more exciting. [00:03:32] See you next time.
