# Example ### Name and date First, we create a step for our name ![](https://3335821170-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmsxwxFoiQsRNU4Uy_E%2F-LoP9gQze3xU3tFS_mZW%2F-LoPJrvpr5D1RBOeBEda%2Fimage.png?alt=media\&token=2ee52eaa-1d73-41f6-b26c-6538c944759f) Next, we have to drag a 'free text' field from the sidebar to this step ![](https://3335821170-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmsxwxFoiQsRNU4Uy_E%2F-LoP9gQze3xU3tFS_mZW%2F-LoPK-_Q0_hM76fydXyr%2Fimage.png?alt=media\&token=8976b9c3-216a-4070-b009-69812880ef9e) Now we drag a date field to the same step ![](https://3335821170-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmsxwxFoiQsRNU4Uy_E%2F-LoVe7DechnkYXgQ7vFM%2F-LoVg4__TfbixU1K_SeV%2Fimage.png?alt=media\&token=15ff436f-e13d-40b8-bbd7-679efca25c12) Add the following text \ `The date today is {{Name.answer}}` ### Options Now we have to create a step that's going to ask us to pick a value from a list of options ![](https://3335821170-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmsxwxFoiQsRNU4Uy_E%2F-LoP9gQze3xU3tFS_mZW%2F-LoPKLdaNrwEZmqpBEhO%2Fimage.png?alt=media\&token=60d48631-ed94-45c7-9040-ad3d08be3920) Next, we drag an option group from the sidebar to this step with the options ![](https://3335821170-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmsxwxFoiQsRNU4Uy_E%2F-LoP9gQze3xU3tFS_mZW%2F-LoPKRwC2S9RhWu1tcaO%2Fimage.png?alt=media\&token=95021e54-a08a-42b3-a2df-aea995b61a41) ### Choice Next, in case someone picks the second option, we want to know why, so we add the following field to the same step ![](https://3335821170-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmsxwxFoiQsRNU4Uy_E%2F-LoPN_EsuZwnpSvjFHn9%2F-LoPNeCW-zp_-rpQR1hy%2Fimage.png?alt=media\&token=56189ff8-f9dd-4b70-bb94-9cf6f7ccc419) `{{#Example.Options.indexOf("first") > -1}}I don't like that option, {{Name.yourname}}{{/}}{{#Example.Options.indexOf("second") > -1}}That's a good option!{{/}}{{#Example.Options.indexOf("third") > -1}}{{/}}` ### Calculation We can also a calculation inside the form, and have form calculate something based on the given answers.\ First we create a calculation step with three number fields.\ We call them `Calc.fav` `Calc.house` and `Calc.multiply` ![](https://3335821170-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmsxwxFoiQsRNU4Uy_E%2F-LoLRxPVXG3qtJfnxLA4%2F-LoLS7H7llDp8vquOqGj%2Fimage.png?alt=media\&token=d08c9cc1-51e8-4b7c-a671-8dd8bd49fddb) Now, we drag an expression to this step and have it multiply the sum of your favorite number with your address by a number of choice, which we call Calc.total ![](https://3335821170-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmsxwxFoiQsRNU4Uy_E%2F-LoP9gQze3xU3tFS_mZW%2F-LoPLWwTNJWUb30gwiXL%2Fimage.png?alt=media\&token=abe6449e-b341-4349-b8c7-31f50c0fac27) Under article 3, we added the following code `Your total is ({{Calc.fav}} + {{Calc.house}}) * {{Calc.multiply}} = {{Calc.total}}` Since we defined the articles, and we added 'scroll to article 3' in all steps, we will be shown this part of the text when someone has to answer the questions. ### Lets add in a variable article We're going to create a table of contents with one variable article we want to be able to take out. First we're going to create a step with a choice field. ![](https://3335821170-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmsxwxFoiQsRNU4Uy_E%2F-LoVWvs0uSSn_jM1xjWF%2F-LoVY1pVHg0MHzyRr0Dj%2Fimage.png?alt=media\&token=d9704b85-581e-47ec-9167-1e2a5d01c3af) We want article 4 to show, unless someone answers 'no', and when it doesn't show, we want the other article numbers to automatically update, so we write the following text:`Table of contents`\ `Article {{$[1]}} Beginning`\ `Article {{$[2]}} Middle`\ `Article {{$[3]}} Example`\ `{{#article.answer !== "no"}}Article {{$[4]}} Article Example{{/}}`\ `Article {{$[5]}} Final`\ and we write write article 4 in the same way:
### A final check to see if we understand everything! ![](https://3335821170-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmsxwxFoiQsRNU4Uy_E%2F-LoP_s7u1ePwBET_vnS6%2F-LoPa01hq0q8ylDqDuXs%2Fimage.png?alt=media\&token=2125bbdf-7a4e-4a22-8043-3a0048afa1bd) ![](https://3335821170-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmsxwxFoiQsRNU4Uy_E%2F-LoP_s7u1ePwBET_vnS6%2F-LoPa57HXHXY9Oit9ESJ%2Fimage.png?alt=media\&token=229a8c3d-71d6-4dfc-826c-d27b6210bab0) If someone answers no, we want to know how bad they understand it. We will use the Likert scale for that. ![](https://3335821170-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmsxwxFoiQsRNU4Uy_E%2F-LoP_s7u1ePwBET_vnS6%2F-LoPaNflqzH92HER4R-c%2Fimage.png?alt=media\&token=f768def7-f1b6-4aaa-b9fe-af70089ad641) We add the following text:`{{#understand.question == 1}}That's great!{{/}}` `{{#understand.scale == "neutral" || understand.scale == "decent" || understand.scale == "good"}}You'll get there if you keep practicing!{{/}}` `{{#understand.scale == "not at all" || understand.scale == "not good enough"}}Try reading the documentation again, follow along, and try again! :){{/}}` We now have the following text ![](https://3335821170-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmsxwxFoiQsRNU4Uy_E%2F-LoZmxYRyKxKhMk0WS50%2F-LoZn_Q8k1IvrrP7zRSZ%2Fimage.png?alt=media\&token=e6cd4e82-32bb-4e30-9887-b08e73cc4e6d) ### Lets see how our template works! ![Date is working, no name yet](https://3335821170-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmsxwxFoiQsRNU4Uy_E%2F-LoVe7DechnkYXgQ7vFM%2F-LoViAyf0uWhYywjRq0i%2Fimage.png?alt=media\&token=61a1f5d8-0c66-41f5-abd4-20ef7dd6fc74) ![Lets try the second one](https://3335821170-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmsxwxFoiQsRNU4Uy_E%2F-LoVe7DechnkYXgQ7vFM%2F-LoVibQO94wlcXS9IQDN%2Fimage.png?alt=media\&token=5901dfd4-f0af-4cdf-8c92-710fd6bc6fb6) ![Good!](https://3335821170-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmsxwxFoiQsRNU4Uy_E%2F-LoVe7DechnkYXgQ7vFM%2F-LoViIMtDXCrXLWeCGK1%2Fimage.png?alt=media\&token=355a6eca-8766-47d3-8c75-d213ced362a7) ![](https://3335821170-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmsxwxFoiQsRNU4Uy_E%2F-LoVe7DechnkYXgQ7vFM%2F-LoViWDd738Ydr-mzweD%2Fimage.png?alt=media\&token=93b37e5e-ef58-494b-935d-926e57fa0a5e) ![Article 4 gets removed and 5 turns to 4](https://3335821170-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmsxwxFoiQsRNU4Uy_E%2F-LoVe7DechnkYXgQ7vFM%2F-LoVim1N6OpuAlzlbyXo%2Fimage.png?alt=media\&token=c159c708-3897-4c51-8fbc-dc032fe6744b) ![Read again!](https://3335821170-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmsxwxFoiQsRNU4Uy_E%2F-LoVe7DechnkYXgQ7vFM%2F-LoViw3XlvAmebtFa2b7%2Fimage.png?alt=media\&token=d29ea210-88b4-4d4c-83f4-f3b93d8646bc) ![We'll get there!](https://3335821170-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmsxwxFoiQsRNU4Uy_E%2F-LoVe7DechnkYXgQ7vFM%2F-LoVj0EeExYjl4bj7haK%2Fimage.png?alt=media\&token=758830df-e5f3-42b7-bf00-b60a95d00fab) ![Done!](https://3335821170-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmsxwxFoiQsRNU4Uy_E%2F-LoVe7DechnkYXgQ7vFM%2F-LoVj7ENIZnK1pPtNz1H%2Fimage.png?alt=media\&token=acf6f255-1c0f-49bf-9a95-5eeb5c0fd436)