bonartm / quizdown-js Goto Github PK

Hi, Thanks for the beautiful library! I am very new to JS, trying my hands at a project. I have a question on the installation instructions. When I run npm run build, I see:

src/quizdown.ts → public/build/...
[!] Error: 'default' is not exported by node_modules/marked/lib/marked.esm.js, imported by src/customizedMarked.ts
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
src/customizedMarked.ts (1:7)
1: import marked from 'marked';
          ^
2: import { parse as parseYaml } from 'yaml';
3: // customize tokenizer to include yaml like header blocks
Error: 'default' is not exported by node_modules/marked/lib/marked.esm.js, imported by src/customizedMarked.ts

Hello, thanks for implementing this library, it really helped a lot!

I just wonder if it is possible to implement a quiz option such that the correct solutions to all the quiz questions will be revealed (highlighted) after the end of quiz where the end user is shown the list of questions with a tick or cross symbol at the side, like when the end user clicks on a question from the list.

Thank you!

I see 4 possible stories on how users progress through a quiz:

1. The user progresses linearly through the quiz and answers each question once. She sees the results at the end. She can then jump back to each question and correct her mistakes.
   1b. As mentioned in #26 a variation of this is that the user sees the solution in the end and cannot jump back
2. The user can jump back and forth answering questions. Once every question was visited, she can submit her solutions and study the results. She can then jump back to each question and correct her mistakes.
3. The user progresses linearly through the quiz and can only proceed to the next question if he has answered the current question correctly.
4. The user progresses linearly through the quiz and gets immediate feedback on whether he answered the previous question correctly. At the end, a summary is shown and he can then jump back to each question and correct the mistakes.

Option 1 is what currently is implemented. Option 2 is what is requested in #11. Option 3 or 4 are requested in #10. I think there are valid use cases for all modes and it should be implemented in a generic way. Then the progressMode can be customized by the creator of a quiz (using global settings or the yaml header).

Is there a possibility to open the links in questions and answers in new tab?

I'm not familiar with unit testing for typescript/ svelte projects but this projects needs some proper testing. I'm thankful for any examples and first implementations!

What is the point of cramming all code into one line? We have JavaScript deobfuscators. If someone wants to figure your code out, they can use them as they wish, with the claimer of “Copyright (c) Microsoft Corporation.” gone.

Even after deobfuscation, there are still seven thousand lines in a file. I don't understand how you would like other people to contribute to such scripts.

I realy like your new released version! It's looking great and with the new feature for translation and comments to the answers this tool is perfekt for our project 👍
But there seems to be a bug with the Icons if I restart the Test. Even if I select the correct answer, the Icons for a false answer is displayed.

You can check it out here: https://bits-training.github.io/030-lektion-e-mail/90.quiz-e-mails/

Hi. Im wondering if it is possible to start/load/initialize the quiz with some event listener, for example, Start the quiz when I press a button.
Currently I got it working just fine, when page loads. Then I tried to put all quizdown javascript into a function, which is called with button. So with a click of a button, I append

<div class="quizdown"> 
</div>

with a questions content, and call quizdown.init() But this way, it doesnt seem to be initialized. I can see the question content being appended to the div, but its just text, no quiz. Im not sure if im doing something wrong or this is intended behaviour.
Thanks in advance for reply!

I'd like to define n questions (e.g. 20), enable the question shuffling, then with this option I could restrict the displayed question to k (e.g. 10). This would result that a user would get 10 random questions, from the pool, at every page load.

Just discovered that the Syntax is very unforgiving when it comes to blank lines.

Try the following example:

---
primary_color: '#1C90F3'
title_color: black
shuffle_questions: false
shuffle_answers: true

---

## Womit ist ein Passwort zu vergleichen?

> Passwörter dienen zur Zugriffskontrolle auf sensible und schützenswerte Daten. Sie sind eher mit der PIN Ihrer Bankkarte zu vergleichen.

1. [x] Ein Passwort hat die Funktion eines Haustürschlüssels. Mit ihm wird der Zugang zu Daten und Systemen kontrolliert.



	>**Richtige Antwort**
2. [ ] Passwort kommt von „Pass“. Es ist ein persönliches Kennwort, das verschlüsselt im Reisepass vermerkt ist. 

	>Leider nicht richtig. Passwörter dienen zur Zugriffskontrolle auf sensible und schützenswerte Daten.
3. [ ] Ein Passwort ist mit einer Bankkarte vergleichbar: es ermöglicht den Zugang zum Bankkonto.

	> Mais non! Passwörter sind eher mit der PIN Ihrer Bankkarte zu vergleichen. Nur wer die PIN kennt, kann Geld abheben. Wie die PIN sollten Passwörter geheim gehalten und nirgends aufgeschrieben werden.

## Wie ist ein sicheres Passwort aufgebaut?

> Allein Buchstaben oder sinnvolle Buchstabenkombinationen und Geburtsdaten können leicht erraten werden. Daher sollen auch Zahlen etc. verwendet werden.

1. [x] Ein Passwort sollte grundsätzlich mindestens 8 Zeichen lang sein, Buchstaben und Zahlen sowie Groß- und Kleinschreibung enthalten, nicht im Wörterbuch stehen und keine Namen, Geburtsdaten oder Autokennzeichen enthalten.

	>**Richtige Antwort**
2. [ ] Ein Passwort sollte nur aus Buchstaben bestehen.

	>Wrong answer! Passwörter sollten mindestens 8 Zeichen lang sein und Buchstaben und Zahlen sowie Groß- und Kleinschreibung enthalten. Sie sollten nicht im Wörterbuch stehen und keine Namen, Geburtsdaten oder Autokennzeichen sein.




    
3. [ ] Passwörter sollten aus persönlichen Informationen wie Geburtsdatum, Name des Haustieres oder ähnlichem zusammengesetzt sein.

	>Leider nein. Passwörter sollten mindestens 8 Zeichen lang sein und Buchstaben und Zahlen sowie Groß- und Kleinschreibung enthalten. Sie sollten nicht im Wörterbuch stehen und keine Namen, Geburtsdaten oder Autokennzeichen sein.

Multiple blank lines before or after the description will break the quiz. Only zero or one line is allowed. Maybe it is possible to make the parser more robust in this situation?

Hi!

Any chance to fix the layout under Internet Explorer 1809 for Windows 10?

Instead of showing the box with the questions and options, there is plain text like this:

--- primary_color: '#1C90F3' title_color: black shuffle_questions: false shuffle_answers: true shuffle_answers: true --- ## Was sind Computerviren? > Computerviren sind kleine Programmteile, die sich unbemerkt an ein anderes Programm anhängen und so auf fremden Rechnern ausgeführt werden können. 1. [x] Kleine Programmteile, die sich unbemerkt an ein anderes Programm anhängen und so auf fremden Rechnern ausgeführt werden können.> > Richtige Antwort! Lösungsbuchstabe S 2. [ ] Mikroskopisch...

Thanks!

To keep it valid markdown and stay consistent with the top level hint, use a blockquote element for answer hints:

- [ ] yes
    > this is not the right answer
- [x] no
    > this is a multiline comment
    > it continous here
- [ ] maybe

which will look like:

• yes

  this is not the right answer

• no

  this is a multiline comment
  it continous here

• maybe

Then one can also use marked to parse it which makes it simpler to process:

if (token['type'] == 'blockquote'){
    // add to explanation
}

Originally posted by @bonartm in #3 (comment)

I would like to see the possibility to have multiple quiz pages which all belong to a single (super) quiz. So if you visit a summary page you could see the results in all the pages together.

Example:
You navigate to page quizA.html and resolve all the questions on this page. Afterwards you continue on page quizB.html and so on. On each page you see the results of this single page – everything looks and feels just like it is currently. But if you visit summaryResults.html you find a summary of all the quizzes on different pages you visited as long as they belong to the same domain.

Hi bonartm,

I realy like your Quiz Engine and the Hugo Plugin you wrote. I realy like to use it in a projekt I'm currently on.
Unfortunately, all texts and buttons are only available in English and the website is currently only being developed in German. The majority of users are also not good at English and the hurdle would be too big.
Is there an easy way to translate all texts? Search and replace in the final minified JS-file is a bit confusing and I'm not familiar with npm development ;-)
A multilingual version woud be very nice! Especially in combination with the multilingual function in HUGO.

Fill in the blanks quizzes seem to be a work in progress. I'm not sure if it's the same but I'd like to express my desire to have a type of quiz where a question needs to be answered typing a text that matches a specified string.

Any ETA on that type of quiz? I'd be willing to contribute as much as I can or help testing it.

Thank you very much in advance,
Rodrigo

Provide a basic pass / fail functionality and custom message display based on its results

Example:

Code:

---
passingGrade: 80
customPassMsg: You have Passed!
---

i can't find the option to make an answer required... (disabling the right arrow).

is it intended to make all questions optional?

As far as I know, the quiz depends on navigation by mouse. How about navigation by keyboard in order to improve the accessibility?

The quiz cannot be accessed by key navigation in the Safari browser on a MacOs.

Would you mind having another look at #22 ?

Cheers!

It seems that is not possible navigate to and activate the links to the individual questions on the results page by keyboard. This is crucial for accessibility requirements.

It would be great if the links to the questions on the results page could be accessed by Shift-Tab etc.

**See update below! #32 (comment) **

When opening the first page of a quiz, you can access the possible answers using the tab key and the cursor keys.

But, unlike in a previous release of quizdown-js, the tab key on the first page does not allow you to leave the answer box. As a result, there is no keyboard navigation availabe to highlight the arrow buttons etc. below the answer box to get to the second question / page of a quiz.

However, when you click on the arrow right-button by mouse, on the second page the tab key does work and allows access to all buttons as it should be.

So it seems that only the first page of a quiz is buggy.

Please check here for an example
https://bits-training.github.io/01-lektion-e-mails/90.quiz-e-mails/

and here for the former, working version:
https://bits-training.de/training/030-lektion-e-mail/90.quiz-e-mails/

and here for the manual describing the way it should work
https://bits-training.github.io/barrierefreiheit/

Hello,

I would like to fork and extend quizdown-js to support interactive videos for teaching purpose, something like:

<div class="quizdown" video="https://www.youtube.com/watch?v=YOUTUBE_VIDEO">
	---
	primary_color: steelblue
	shuffle_questions: false
	shuffle_answers: true
	---

	### Select your superpowers!

	! 30

	- [ ] Enhanced Strength
	- [ ] Levitation
	- [x] Shapeshifting

	### What's the capital of Germany?

	! 120

	> Hint: The _largest_ city in Germany...

	1. [x] Berlin
	1. [ ] Frankfurt
	1. [ ] Paris
	1. [ ] Cologne
</div>

In this imaginative example, the question should stop (or hide) the video and appears at 30 seconds of video, and the second question will be show 120 seconds, so, if the student answers correctly the video continue.

I would like to implement something like that using quizdown-js, I believe that it is not difficult to achieve this result because we just need to add the time information and indicates the video. What do you think? How can I contribute?

Best regards
Rodrigo

I would love to see a back button from question two on to go back for corrections.

I would like to automatically save quiz results.
Is it possible to do so and if so, could you please provide me with a guide?
Can I use a callback or an event to save quiz results after they have been processed by the parser?
If so, could you please provide me with an example?

Hi There!

So happy I found this script! Was looking high and low for such a script.

I was wondering, how can I add a reward at the end? I like to add a simple text-link.

Regards,

When I try to render a code block containing <, a failure occurs:

TypeError: Cannot read properties of undefined (reading 'items'). App could not render. Please check your quizdown syntax.

This is the full HTML page:

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/quizdown@latest/public/build/quizdown.js">
        </script>
        <script>quizdown.init();</script>
    </head>
    <body>
        <div class="quizdown">
            ---
            primaryColor: steelblue
            shuffleQuestions: false
            shuffleAnswers: true
            ---
        
            ### Select your superpowers!
        
            ```plaintext
            Property<String>
            ```

            - [ ] Enhanced Strength
            - [ ] Levitation
            - [x] Shapeshifting
        </div>
    </body>
</html>

When I remove the < character, the quiz renders fine.

< is a pretty common character in Java code (and probably other languages) so I expect this to be rendered successfully like other code.

I've noticed that when I use the Quizdown Editor, the same markup works without issue.

I'd like to include quizdown-js in SCORM modules that report back to a Learning Management System. The big hurdle is getting the 'grade' to JS outside of the quizdown object when the user is ready to evaluate.

I'm looking for suggestions as to how to accomplish this. I am thinking about:

• adding a callback option to the quizdown options object that eventually adds that callback function to the Evaluate button, or
• creating an public function that can be called to get the grade.

Hi, really amazing work for this simple quiz form for web. I have tried quizdown for Hugo based documentation sites for educational purposes, but it usually takes a long time on layout modifications, so I migrated to docsify, also an open source projects for direct markdown rendering into html for static documentation sites. I tried pretty much all I can do to fully integrate quizdown into docisfy but never succeeded. Docsify's official has their own tutorial on writing a plugin, which is located here, but I barely understand javascript, can you please try to integrate quizdown feature into docsify? I tried find quiz-related plugins for docsify, but none of them met my demand, yet none of them have such complete quiz features like quizdown. Thank you for this amazing work again.

I would like to use this for a graded assignment, where the student wouldn't get to retake the quiz without an external process happening.

I see that fill in the blank is a work in progress. Will there be support for Free response questions as well where you can check the exact string input? If so, is there a way to do this for quizdown using Sphinx? Thanks.

Is it possible to activate or focus the block with the choices when opening a quiz page automatically - or at least when going to the next page with the next question?

The demo https://bonartm.github.io/quizdown-live-editor/ seemingly (?) does not support keyboard navigation.

It seems that equations are not supported. It would be great to be able to use MathJax within quizdown-js

Fantastic app you have here! Any way to get the final quiz score with a method call? I didn't see anything in the docs.

Since the app uses shadow dom inserting an element into the list using drag and drop is not working on touch devices. It has to to with the line

let target = document.elementFromPoint(ev.clientX, ev.clientY).closest(".item");

which doesn't return anything inside the shadow dom.