An E-Learning platform with Quiz

Need help App Organization
1

I’m trying to build an e-learning platform with a flexible course authoring capability like that of Canva or WordPress (block editor). As of now I was able to find a plugin and a template which enables to build a Canva clone.

Creative Editor|Design with canvas

Image Editor - Like Canva

The tricky part for me is however building quiz (multiple choice questions, multiple responses, setting pictures as options/choices etc.).

I tried setting up data structure with

  1. questions
  2. options (with a “correct choice” field)
  3. answers (user’s response)
  4. responses (with a “list of answers”)

and creating templates for each type of question. But it is limiting the authoring capability of the same (why I need a Canva like solution here).

Can someone point me in the right direction?

PS: I’m a newbie in bubble/coding.

2

i have created several videos on this.

https://www.youtube.com/results?search_query=bubble+tiplister+quiz

as a quick summary.
data structure to use can be
a) questions saving the text and list of users who answered it. display by using do a search for questions whose list of users answered does not contain current user
b) options saving a) . display by linking each question with a list of options. eg parent groups questions list of options.
c) user responses. saving a) and b) and the user . display by using do a search for user response where question = X and user = Y. first item

what made you think you need 3 and 4 above? as seen in your approach?

3

Thanks for the response.

I did refer to a couple of your videos before I started building this.

The quiz is actually part of a small learning module (like a 10 slide PowerPoint presentation), may contain 2, 3 or more questions and may be placed in any of the slides.

A learning module <-> list of slides (contains fields for content and a question data type)
If the question data type is not empty, the slide is deemed as a quiz slide.

Question <-> list of options and a field to note correct option

Whenever a user is viewing a learning module, a Response is created. When a question is answered, an Answer is created with its parent question, selected option and a flag (isCorrect) indicating whether its right or wrong. All such created answers are added to Response as a list of answers.

But the main concern for me is the design of questions.
i.e., some may have text as options and some may have images or gifs as options. These images may also vary in dimensions according to the question.

How can I create an authoring/editing architecture for an app user to create a question as mentioned above?

4

ah ok a response is for a whole module, gotcha.

You could set up an option set that is called “Question Type”
then add conditionals in the repeating group that is displaying questions
eg if question type is Image then show a picture otherwise hide and collapse it
if question type is multichoice then show a repeating group of 4 options
if question type is single answer then show an input where you add an answer.

To create an editing architecture have a repeating group showing the full list of questions.
create a dropdown where you can select which question type
then an input to display and edit the question
then an input to display and edit question number
and a save button modifying the question.
to add new questions have an input, qs type dropdown and create button that creates new questions.

1 Like
5

I am building a similar platform, and I am getting stuck at this one point:

@TipLister I have a privacy rule set up for the “isAnswer?” field. How can I check if the response is correct or not?

Hey @Patric let’s catch up…

6

you could run an api workflow that has the checkmark “ignore privacy roles” in it when the user clicks “Mark” or “Next question”:
The api workflow gets passed the question and text answer and if text answer = questions right answer the field “is Answer” is marked as correct for that response.

7

Any other potential ways to do this. I feel this way the performance could take a bad hit if the list of users get larger. I am looking to avoid as many list fields as possible that could potentially be above 20.

8

Do a search for Responses where Question = this question and user = this user. first item is or is not empty.* each items Question

I tend to focus on first getting a testable MVP out there to test assumptions before scalability.

9

Great. Thanks for your help.

1 Like
10

That’s a great way to achieve the editing architecture.

Do you have any inputs on a much advanced editor, capable of redesigning slides?
Say for one question, the image is on right side and for another it’s on the left side. The author should be able to move around these elements.

11

might be useful to first test the MVP before making everything perfect

how to do it would be again optionset eg slide layout
then 5 groups, 1 showing depending on optionset of that slide
each group hidden if collapsed
1 group has image left, one right etc.

each question you can edit which option set its slide layout is by giving it a field in the database.

1 Like
12

Hello creating something similar to this but stuck, cos i actually want to save multi choice questions and list of choices to the same lesson, such that it doesn’t overwrite the first question that was already saved to the lesson.

so a lesson which is created then saved, and when the quiz 1 is added with it’s list of choices. such that when quiz 2 is created it doesn’t overwrite quiz 1 and likewise if quiz 3 is created, such that all quizzes(1, 2, 3) and their respective list of choices are saved to the same lesson