Making text / HTML into a gap-fill style quiz

Need help
1

Hey everyone, I’ve got another head-melting idea to brainstorm with you if you’d be so kind.

I’m trying to make a gap-fill style quiz with two different question types:

  1. Text with clickable empty spaces. The empty spaces would be linked to a type of Thing with the possible answers. When the space is clicked, the Thing linked to that space is sent to the page to show a hidden group with the possible answers. When an answer is clicked from the revealed group, the Thing is cleared from the page, the answer group disappears, and the answer selected appears in the text space.

  2. Text with some words replaced by input fields. When a word is entered into an input field and the user clicks submit, a workflow runs to compare the value to a list of possible answers to check if it’s right or not.

I’m ok with creating the things, using custom states and making the workflows, what I can’t figure out is how to get clickable things into a text / HTML object. I’ve read a lot on the forum, and I’ve seen ideas like using clickable hyperlinks that refer to the current page with a parameter tagged on (e.g. the unique ID of the answer as a parameter that triggers a workflow through ‘get parameter from URL’), but that would reload the page if it’s just an HTML or BBCode link. I’d need the clickable object in type 1. above to trigger a navigation workflow with parameters to avoid page reload, but I don’t know how to trigger workflows from multiple clickable words within a text object or HTML object.

As for quiz type 2. above, I’m stumped. I was thinking of putting input fields at the end of text boxes and splitting the full text up into bits before and bits after the empty space, but with variable text lengths it’ll look a mess when the box resizes, or the last line of text in the box doesn’t reach the end and there’s a big empty space between the text and the input field.

Any ideas would be really appreciated, thank a lot for reading.

Richard.

Edit: I’m getting the feeling I’m going to need to use the Toolbox plugin with a listener and some javascript inside an HTML element. I’m a total Javascript newbie, so if anyone can help me with that I’d be super grateful.

2

Interesting idea! How far did you take it?

Good plan to check answers with workflows, to avoid having the answers “on the page” and hackable.

Would you be wanting immediate checking, rather than all together?

Is quiz type 1 where you have a picklist for each word?

Is quiz type 2 like this?

image
image766×47 3.22 KB

There’s several ways to implement this, for example all inside HTML …

A) Check each word as it is entered

On input change, send a list of 2 texts to JavascriptToBubble: [“question-id”, “answer”]

B) Check all words on submit

On submit, send a list of texts to JavascriptToBubble: [“answer1”, “answer2”, “answer3”]

Then use Run Javascript to set each question’s class to incorrect or correct to show feedback.

1 Like
3

I did something similar a while back, with drag and drop. It may not match your requirements exactly but you may be able to adapt some of it. Link: Fill in the Gap quiz using drag and drop

2 Likes
4

It’d be a submit version because it’s preparation for a language exam.

Yes in quiz one there’d be a picklist in the form of a group appearing at the bottom of the page (to mimic how the real test displays them).

I haven’t researched the JavaScript within the html yet, so I’m not really sure how to implement what you’re saying :-/ How would you send things from inside an HTML element to the JavaScripttobubble element / workflow?

5

Thanks Louisa, I actually already found your post before and it was the one that inspired me to think this quiz could be possible to implement on bubble. Thanks a lot for posting it!

1 Like
6

The submit button event handler can iterate through the inputs, build a list of answers, and call the JavaScripttobubble function with the list.

The hardest part will be checking the answers in the workflow …

I’ll help you in more detail if you like the format and decide to take that approach.

Another approach is to send the answers along with the questions, its a lot easier to implement, and is okay if you don’t care about users choosing to “view source” to see the answers.

Or maybe hash each answer and send the hashes, and check if the hashes match, and the hash of all the answers joined together matches … hmmm

7

Thanks for your help @mishav, you really sound like you know what you’re talking about.

I’m not bothered about users cheating by viewing the page source, and given that I’m a total javascript newbie I’d appreciate the easiest option! The hashes option sounds interesting too. If you’d be able to help with either I’d really appreciate it.

Hopefully other Bubblers can benefit from this too. Apart from Louisa I’ve never seen anyone else trying to implement quizzes on Bubble. Thanks again for your help!

8

@richardosborne14 you’re welcome!

My suggestions are assuming you want to write your own from HTML / css / javascript.

@louisadekoya is possibly giving you a good nudge in another direction, by reusing what someone else has done.

Have a search for “javascript library quiz” and there are quite a few available that might be suitable to get something working faster.

9

Thanks @mishav, I found a really nice library here that looks like it has everything I need:

I’ll go away and try to learn some javascript basics and let you know what I come up with. Thanks again for all the advice.

1 Like
10

This topic was automatically closed after 70 days. New replies are no longer allowed.