Form Creation Tutorial?

Hi @Tomi_Laakso,

Thanks for the reply. I really appreciate your input. I’ve watched a lot of tutorials, but I may have missed the ones that primarily focused on using App Variables with forms. Do you know which ones might have this workflow?

I have decided to simplify my quiz even further. There is only one right answer per question, and rather than create an app variable for each question (such as an object “question 1” with a list of properties “answers”), what if I create a simple app variable with only one property called “correct”? And then in the Option List for each question, bind the Value for the correct answer to that app variable (which would then be “Answer.correct”)?

On the quiz results page, I have created sections showing the correct answer for each question. The top component for each section is an “Icon List Item”, because it comes with columns of useful items like an icon, a primary label, and a secondary label:

For the primary label, I have simply added in the answer number “1.) Answer:”. For the secondary label, I would like this to show text that reads either “Correct” or “Incorrect” based on whether the app variable “Answer.correct” had been selected for that answer on the previous page. But I’m at a loss as to how to write that formula.

I’ve started with “appVars.Answer.correct”, but I’m not sure if I need an IF condition if front of that, and what should come after it, or what the final formula should look like. Is there a specific tutorial that deals with, for one, app variables, and two, how to use them with formulas to change text on a page based on selections from a previous page?

This is the simplest solution I could think of, but because I am new to AppGyver, I have to ask: Is there an even simpler solution that I haven’t thought of?

Thanks so much!

I’ve updated the quiz with hopefully a simpler workflow. Since there are only 6 correct answers, I created an app variable called “Answers”, then added 6 properties to it:

The appropriate app variable has been assigned to the correct answer for each question.

The idea is: based on the users selection (or whether the app variable was or was not selected on the first page), a component on the next page is either updated to show “Correct” if the user selected the right answer, or stays the same “Incorrect” if the chosen answer did not include an app variable.

I’ve also replace the Icon List Items with Rows, each containing an icon and two Title components. The second Title component would have the app variable binding.

Does this sound like a workable solution?

Hi! If this solution works for you it’s fine, but in general I would recommend having Answers as a List of Objects and the Object would have maybe id and text or something. This would then be extendable to any circumstance later on, as your current solution is a little more hardcoded.

Hi @Mevi,

The solution in the above post/screenshot did not work. Or at least, I could not make it work.

But creating a list of text objects (or an object with a list of properties), assigning individual properties to the Selected value of the Dropdown Field component on the first page, and then binding the formula: IF(appVars.answer.answer4 == appVars.correctAnswer, "Correct", "Incorrect") to the corresponding paragraph or Title component on the second page did work. :grinning_face_with_smiling_eyes:

For some reason though, I could not replicate that solution for checkboxes. I’m sure I did something wrong, just not sure what. So I removed the checkboxes for the last question, and added another dropdown as a workaround.

Here is a screenshot of that app variable “object.property” binding"

Hmm :thinking: This is very much something that is very dependent on your data structure, so it’s difficult to say what’s going on without knowing a lot about it :sweat_smile:

Did you have some specific problem with this that you still needed help with?

Hello Anthony,

Kind of new here and developing my first educational app but straggling to create a simple quiz where an user need to answer 5 multiple questions after reading the content and get a simple “nice job” or “try it again” feedback almost exactly what you posted here.

So I was wondering if you were able to create the quiz and get it work? If yes, is it possible to share the steps that you took with me please.

Hi @TJ_Jaruot,

Happy to help! Here are the basics:

For the Quiz Page

  • I have two pages, the Quiz page, and the Quiz Results page.
  • I chose to go with the Dropdown Field component. It seems to have a limitation of 43 characters (with spaces) at this time though.
  • I created two app variables:
    • “answer” (which is an object with the same number of text properties as there are questions in my quiz), and
    • “correctAnswer” (which is a type “Text”, with an Initial Value of the same Value as that of the correct answer in the Option List for a given question. This “correctAnswer” Initial Value can be any word you like. I went with Banana, as suggested by @Akseli_Virtanen in another post about this same issue: Change Text on Next Page With App Variable?
  • For each dropdown component, there is Option List, and Selected Value. The Option List is pretty self-evident. The Selected Value was a key item for me, because it must be unique for each question. Nothing worked until I figured this out! For example, the app variable used for the dropdown component for question 1 was “answer.answer1”. The app variable used for the dropdown component for question 2 was “answer.answer2”, and so on.

For the Quiz Results page

  • For this page, I created the same number of answers as there are questions on the Quiz page. Duh! :wink:, and for the answer elements, I chose simple Paragraph components.
  • For the Content of each Paragraph component, I used this formula: IF(appVars.answer.answer1 == appVars.correctAnswer, "Correct", "Incorrect") – changing the “appVars.answer.answer1” to match the same Selected Value on its corresponding question dropdown.

Let me know if it seems like I missed a step!

2 Likes

Thank you very much this is very helpful, but one question regarding the content ( sorry if I missed it) where the content resides, a DB? If yes what format, if not just typing into dropdown Field component?

Correct. Under Option List, select the Component List button, which will open a popup where you can add your questions:

1 Like

Thanks, I made some progress but have problem with the result page, is it possible to explain more “I created the same number of answers as there are questions on the Quiz page” . Are you saying if I have 5 questions and each questions has 4 possible answer, I need to re-create all 20 answers on the result page? Also, is it possible to share a screenshot of the result page please?

Hi,

For each dropdown, I needed a separate/unique variable for that dropdown’s Selected Value:

On the Quiz Results page, I used the formula mentioned in my previous post to connect back to that variable:

This was what allowed the quiz to work for me… assuming all of the other items are in place.

Let me know if that worked.

Thanks Anthony, what you sent make sense and should work, but not for me, I think, I have something else wrong. I even started from the scratch with no success. At this point have no idea how to troubleshoot and do not want to take more of your time since I know it will be difficult to troubleshoot it like this.

One last idea that might be to much asked could be; in next days when you have a minute maybe you can record your screen by creating 1 question from scratch and go through entire process including the result page which will give me the opportunity to compare it to what I have and identify the issue. Again, I know this might be to much asked so it is absolutely OK if you can’t but I think it is the best way to troubleshoot.

Hi, I’m sorry for interrupting you, but I didn’t know which forum to use

I’m doing the data tutorials where you create, list, bind to a page, and update data. I have a big data at AppGyver cloud “Placas1” where put all the subsections I use at the data variables, but all my lists that I’m creating keep getting a bunch of empty spaces and the data that I saved currently go to the end, I don’t know why this is happening now. When I first started I put them in different data at the cloud and it didn’t happen, just a few blank spaces. These are my questions

How do the client-storage works? Does it save the data the same way the AppGyver cloud does or it’s different?

Can I bind all the new page information in one item of the list? Like a chat, where you open the icon of the person you want to talk to and there is only that person’s information.
I keep getting the same information I added to an item in another one

I added a page to update the items’ names on the first list, they update, but I keep getting blank spaces.

I apologize again for interrupting, but I’m getting desperate.

Hi @TJ_Jaruot, I will see what I can do, as soon as I can get to it.

@Rafaela_Borges, I am not familiar with client-side storage, but a quick forum search produced a lot of threads to check out: Forum search

Thank you Anthony, relay appreciate the help.

Thank you, Anthony, I reading through them to find a solution.

Sorry for bothering you again, but do you know anything about my other problems?

Hi! The empty data sounds like something is off when you’re trying to create the data, that is, you’re creating only empty data instead of passing the fields you want there correctly. Check that whatever you are passing to the create data is not full of empty/null values. You can do this by alert/console log/toast whatever you are trying to pass to the create data node. ENCODE_JSON is an useful formula to use so you can pass the whole data/page variable to the alert/log/toast.

If what you’re passing to create data is not empty, then check that what you’re getting for the list is not empty using the same debugging tools, or the debugger itself.

If you’re feeling like this is too complex, I suggest for you to check out our new app programming 101 series and/or the data documentation.

1 Like

Hi @TJ_Jaruot,

My headset was not working properly, so the video is completely silent, but you should be able to follow along in this very simple example to determine how I made my quiz: https://youtu.be/8kWG8xSgZCw (the correct answer in both dropdowns is the second option).

Also, I’m not sure how AppGyver staff are able to show both their computer screens and the phone screen side-by-side in their tutorials, but I was able to test the app after creating everything you see in the video, and it works.

Hope this helps!

1 Like

Yes, found the problem,fixed and all working now. Thank you again.

1 Like

Thank You, Mevi. I will take a look

1 Like