Help a newbie to build a quiz

Hi!

I would like to build a quiz feature to my app, but really don’t even know where to start. Noticed another thread about quiz, but that didn’t help me a lot.

So basically what I would like to do, is to have questions & answers hosted at AirTable and then brought to app. I have done the AirTable integration and it works but that’s where my knowledge ends.

So for example if the quiz would be about movies, my data would look like this:

How do you build a simple quiz that either

A) shows all the questions on the same page at once and then you’ll answer them all at once

B) Shows you one question at a time

And is it how would it be possible to have multiple choices on answers and not just yes/no?

Also would like to know how to either count score on correct answers and pass if you have eg. 80% correct or another option, pass if you have all correct?

And one more question, I’m using the Appgyver hosted user management. When user passes the quiz, I would like her to have a badge of some kind added to ”my account” page (or another profile page). So basically an outcome of passed quiz would be a picture added to another page. How is this done?

Thanks a lot if someone could help me out!

Hi there!

I recently built a super simple quiz into an app myself so maybe I can help you get started here.

In my opinion, one of the most difficult things in making an app is figuring out what type of data schema it would require. For you, I would suggest changing your data schema to suit your purpose better. I would suggest having a separate table for Movies, Quizzes, and Quiz_questions. In the Quiz questions, you would indicate which Quiz the Quiz question belongs to via the Quiz’s id, and in Quiz via Movie’s id. This would enable you to have differing amounts of Quiz questions for each Movie and in general make the handling of data easier. The data model would look approximately like this:

Movies: id, title, year, director, etc.
Quiz: id, movie_id, name, required_correct_answers_count, etc.
Quiz_questions: id, quiz_id, question (string), correct_answer, (and if you want multiple choices: answers (array of objects with answer (string), or make a separate answers table that refers to the quiz questions via id)

With this type of data model, it would be possible to do what you were asking for, if you want to build separate quizzes for different movies.

The badges for the users could be done by e.g. making an AppGyver Cloud Storage for saving this info into. You can get the current user’s id from the currentUser App Variable created when you enable AG Auth, and use that to identify which user has which badges.

This is just a beginning but maybe this could help you get started, let me know if you have any further questions and I’ll see if I can help you out further!

Thanks @Mevi !

Could you also tell what components you used to create the quiz? Is there some formulas etc needed also?

Hmm. Not sure if I can answer this in any quick format, but just to give you an overview of some dummy data test from the app I made. This is all one Composer page that is opened in a modal.

quiz

There are three distinct “modes” the quiz can be in. This is corresponded by containers that are hidden/shown based on the mode. The mode is determined by a page variable, which I set on page mount and modify when I click certain buttons. The modes are “intro”, “quiz” and “finish”.

Every mode shows the title of the quiz. Progress bar is shown only in “quiz” and “finish” modes. “intro” mode shows previous result if there is a previous result for the user. “question” mode components are bound to the array (of object) of questions, and the index is a page variable that is changed on button click, and thus the content changes as well.

The general structure of the page is as follows (with containers named for clarity):

Screenshot 2020-06-16 at 15.39.38

So to answer your question, I only used containers, buttons, paragraphs and titles. As for formulas, they are used in setting the visibilities based on the mode and to set the certain question contents etc. And to calculate the scores. The fanciest perhaps is where the min width of the “Current progress” container (which creates the pink part of the progress bar) is set with ROUND(100*pageVars.questions_index/COUNT(pageVars.questions),0)+"%"

Let me know if you have any further questions!

Thank you so much @Mevi!

Still few things i can’t get my head around. How do you show / hide the containers when needed / not needed?

And with what command do you check is the answer given correct? Or does it fetch the correct answer from the data or did you just manually program the buttons with variables?

Thanks again.

You can hide/show containers by setting the visibility of the container (found under Advanced Properties) to true/false. You can either create a page variable for each container, but that is a little bit messy. The easiest in the case of the quiz is to show/hide containers based on a formula which evaluates the mode of the quiz, e.g. “intro”, “quiz” and “finish”. See below what I did for the Question container.

Screenshot 2020-06-24 at 15.30.35

The correct answer is simple because my quiz is a yes/no question quiz, so it is saved in the question as a boolean type, and I dynamically evaluate against it. Thus both YES/NO buttons evaluate a formula like LOOKUP(PICK_ITEM(pageVars.questions, pageVars.questions_index), “correct_answer”) in an IF logic node, with the NO button reversing this of course. But this could just as easily be done with a non-boolean type answer.

Hi Mevi,

Kind of new here and developing my first educational app. So far all going well. Read all the related docs, forum entrees and watch the videos 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. I was almost giving up but just saw this entry which is exactly what I am trying to do.

I hope it is not much to ask, if you could please explain more on the steps that I need to take to create the quiz similar that you did. Since I am a visual person, is it possible to record the steps same way that you did for your all other videos, but it is not possible a simple step1, 2, 3 etc. will be sufficient for me to follow and get it going.

Hi! I’m currently so swamped with other work that I don’t have the time to make video tutorials, but I can try to explain :slight_smile: In the replies above I’ve explained the importance of data structure and some general things about the quiz page, but I’ll go into a little more detail.

  1. Figuring out the data structure
    Unless you are super certain about the data structure, you’ll need some iterations to get it right. I recommend starting with what I have and changing it to fit your needs. Here’s my data structure for a quiz (since this app has multiple ones). In this app, the (custom) backend creates quizzes for users to quiz them about certain material they should study. The quiz data also carries the information of the user, as user can only access their filled out quizzes. The quiz data also includes how well the user completed the quiz last time. You may want to simplify this, perhaps have separate data source to keep the results per each user, or whatever.

    So the Quiz page has a data variable called Quiz which is populated on page mounted based on the id of the material the quiz is about.

    This data variable then populates some page variables I use to keep easier track on what stage/mode the quiz is in. (the replies above show what I do with status for example to show and hide different aspects of the page)

    It’s important to note that my app only has two answer options, Yes and No. You can have more though, but that requires you to change the data structure. This would mean that you would have to have an answers array (=List of Objects) under questions page variable and the Quiz data, and the answers would require the name and the is_correct properties at least. Only the correct answer would then have the is_correct property as true.
  2. Page layout
    This is partly discussed in the replies above. I show and hide containers based on pageVars.status. The layout itself is super simple, especially if you don’t show results like I do. So long as you do the show/hide of the containers, the content is up to you, really. And layout can be easily changed later. If you have more than two answer options (yes and no), you will need to repeat the answers as buttons or whatever on the quiz part of the page.
  3. Logic
    I’ll focus on two main points here. Starting the quiz and answering questions. The start changes the status from intro to quiz and puts the correct_answers_count etc. in the Quiz data variable to 0, as my app logic only keeps info of the latest completed quiz.


    The trickier part, perhaps, is the logic of correct/incorrect answer. Again, this is what I’ve done with my two answer options, but it can be extrapolated to more answer options.
    Screenshot 2021-01-19 at 8.45.27
    What happens here is that the yes and no buttons check if their answer was correct compared to the question, and if it was trigger the “correct answer” event and if it wasn’t, trigger the “incorrect answer” event.

    Here we see what happens from each. The only difference is that the correct answer also increments the amount of correct answers the user has gotten from this quiz, while the incorrect answer doesn’t. Then the questions_index is incremented, it’s checked if this was the last question and if it was, then the Quiz record is updated in the backend and the final part of the quiz page is shown (the congratulatory page)

I hope this helps you get forward!

Thank you for the quick feedback and I totally understand the workload issue, I definitely will try this, but one question regarding the content namely; did you use a DB? If yes what format ( sorry if it is obvious and I missed it) Or just typed in. I have all content ready in excel but as you can imagine I can convert it to any format that need to be.

Hi! This app had a custom backend, but you can use AppGyver hobby backend for example. The structure I used for the quiz data is in the first picture.