Interactive QUIZ

Developer help
1

Hello, I am using Genki theme for my ghost blogging website. I want to integrate a mini interactive quiz where there will be 3 questions with a radio button and a submit button at the end of the last question. After clicking radio buttons of all the answers and clicking the submit button, I want to display the correct answers in green color in the question and the wrong answers in red. Or I want to just show the correct answers.

Here is my code so far.

When I executed it in ghost, upon clicking the submit button, no actions seem to occur. How can I fix this? Please help, thanks

2

To be sure this is a Ghost problem, test embedding the quiz on a static HTML page, perhaps even one hosted right on your laptop hard drive. Does it work in that case?

3

The code looks fine:

How are you embedding this on Ghost? Can you share the page where it’s embedded?

4

Hello Markstos, thank you so much for your reply. It works on every HTML page, I have tested it, but it doesn’t work accordingly in my webpage when I implement it.

5

Hello RyanF, thank you so much for your reply. I had embedded this code in my ghost webpage using the markdown card.

image
image1311×849 51.7 KB

6

Try using the embed card or the raw HTML card.

1 Like
7

That won’t work. As @markstos says, you’ll need to embed the HTML in an HTML card.

You don’t need the whole HTML document, just the parts inside the body tag. You can reference the CodePen I made to see exactly what I mean.

It’s also probably a good idea to put the style tag in Code Injection → Header and the script tag in Code Injection → Footer.

2 Likes
8

Thank you so much for the suggestions, it worked.

9

You are truly amazing man, thank you so much. It worked