cognitive-engineering-lab/mdbook-quiz

Interactive quizzes for Markdown

mdbook-quiz's Issues

quiz doesn't show up when we put a code block at the end of the file

Thanks for your work. I've noticed that the quiz doesn't show up when we put a code block at the end of the file (with no blanket line after).

For instance, if we add this line to chapter_1.md of the example of this repository:

println("hello world");

I can't show the full content of the file because it won't display well on this issue, but you can find a repository that reproduces the bug here.

Pb display tracing quiz

Hi,
here is my pb (screenshot from https://dataflowr.github.io/quiz/python.html):

I noticed that in your example (live-demo), the rendering is fine:

So there is something I am doing wrong but I do not know what?

code (taken from https://github.com/dataflowr/quiz/blob/main/dl-quiz/src/quiz_01.toml):

[[questions]]
type = "Tracing"
prompt.program = """
def print_11():
    x = 11            
    print(x)          
def print_x_outside():
    print(x)          
x = 10                
def main():
    def print_x_inside():
        print(x)      
    x = 11            
    print_11()        
    print_x_inside()  
    x = 12            
    print_x_outside() 
    print_11()        
    print_x_inside()  
main()
"""
answer.doesCompile = true
answer.stdout = """
11
11
10
11
12"""

Thank you for your help.

Anchors on quizes/responses

• I have checked the latest main branch to see if this has already been fixed
• I have searched existing issues and pull requests for duplicates

Introduction

Description of the problem:
When the user answers a quiz it returns them to the top of the page and result is not visible. The user has to scroll in order to see the result

Checked on MacOS 12.6.2, Firefox 109 and Chrome 109

Suggested fix:
A learner would expect to see the quiz result on submitting the response.
Return URL should anchor to the quiz box or quiz question/response should not navigate away.

From source installation error

I can't install the project

Here is a screenshot of the cargo and pnpm versions and the installation error:

Code snippets in prompt get cut off by bottom edge

It looks like if the question prompt ends in a code snippet, the bottom of the last line can get cut short. I've noticed this at several zoom levels, although it is most prominent at <100% zoom. I'm using Firefox version 112.0.2 on Linux. This is mostly a cosmetic issue, although when severe enough it can cause underscores on the last line to disappear entirely; see the attached photos.

Option to turn off spelling check (+log line to confirm preprocessor is active)

1. I'm writing a mdbook-quiz in Dutch. Upon building the mdbook I get errors in spelling. I see that I can add a custom .dic, but for now I'd prefer to switch this off. Is there a setting for the book.toml like for instance spelling-check = false which I can add below the [preprocessor.quiz]?

2. Another issue is that the quiz question block is NOT shown at all in the rendered website. But that could be due to some custom styling or something. I AM missing a short log line like from the quiz preprocessor starting in the pipeline, which OTHER mdbook preprocessors, like the mdbook-linkcheck DOo emit.

In the end inally I found that there is a placeholder

in the DOM of the page, which however is not shown due to .mjs error (shown in JS console). But a log message would have saved me some time and doubt. See screenshot below for some visuals for these two suggestions/questions 😅 .

Provid more context when error is thrown

I'm trying to use the quizz inside my mdbook but sadly I'm panicking at this line:

https://github.com/willcrichton/mdbook-quiz/blob/main/src/processor.rs#L207

I think maybe we could have some context to the error, for instance the variable chapter to make it easier to debug.

Show incorrect answers in answer review for MCQs

Display error -- incorrect styling makes bug report close button invisible

The quiz styling doesn't play nice with the bug reporting pop-up; in particular the close button is styled to be nearly invisible in the navy and coal themes. This is particularly important because the navy theme is the default. See attached screenshot:

This is caused is the combination of two conflicting style rules, found in index.scss.

The first style rule removes the background for the selector .mdbook-quiz .prompt .bug-report button -- that's a selector with 3 classes and 1 element; so a CSS specificity weight of 0.3.1. Presumably this is done to make the background go away on the close button, though technically it could apply to other buttons on the bug report form that use the <button> element.

mdbook-quiz/js/packages/quiz-embed/src/index.scss

Lines 164 to 168 in fd43ab7

	button {
	filter: grayscale(100%);
	border: 0;
	background: none;
	}

The second style rule puts the background back in, and also sets the foreground color. It applies to the selectors .mdbook-quiz button and .mdbook-quiz input[type=submit] -- only the first of which is important here. It has one class plus one element, so a specificity of 0.1.1. That means it between the two rules mentioned, this one loses and gets overridden by one previously mentioned.

mdbook-quiz/js/packages/quiz-embed/src/index.scss

Lines 128 to 136 in fd43ab7

	button, input[type=submit] {
	font-size: 1.1em;
	cursor: pointer;
	background-color: var(--searchbar-bg);
	color: var(--searchbar-fg);
	border: 1px solid var(--searchbar-border-color);
	border-radius: 4px;
	padding: 3px 5px;
	}

Therefore the close button is using the button foreground color (technically --searchbar-fg) and the background color of the body (instead of --searchbar-bg). And in two of the themes (including the default), the button text color isn't readable on the body background color.

Note that the submit button isn't affected by this error because it's an <input type="submit"/> rather than <button>.

My recommendation would be to add color: var(--fg); to the first selector.

Though, do note that you already have a selector for just the close button on line 180; perhaps you want to do all of the styling for the close button in that rule?

Using left/right arrows when submitting a bug loses the form

• I have checked the latest main branch to see if this has already been fixed
• I have searched existing issues and pull requests for duplicates

URL to the section(s) of the book with this problem:
https://rust-book.cs.brown.edu/

Description of the problem:
If the user presses on the left or right arrow keys while writing the text in the bug form, the current page changes and the form is lost. It happened to me several times and it's a waste of time; this happens easily when the user needs to move the cursor to add or change text.

The keys are captured by the left menu system rather than the form.

Suggested fix:
Make the form capture all the keys when it has the focus.

Add a "?" panel to answer review

People are conflating the "this is YOUR answer" with "this is the ACTUAL answer". Idea: show a blurry or "?" panel that indicates that the real answer is hidden away.

Is it possible to make quiz work in the generated static output?

I have noticed that quizzes created with mdbook-quiz are displayed correctly when serving the mdbook locally using mdbook serve. However, when I generate static HTML files and access them from the book/index.html file, the quizzes do not render.

Is there a workaround or specific configuration that would allow quizzes to be displayed and rendered correctly in the generated static HTML files?

Enable random order in answers

This is more of a feature request, the current display always provides multiple choice answers in the same order, would it be possible to randomize the answers? Providing the right answer might then become challenging though, but a map could be used instead of an array for the answers?

Close bug report pop-up.

• I have checked the latest main branch to see if this has already been fixed
• I have searched existing issues and pull requests for duplicates

URL to the section(s) of the book with this problem:

Description of the problem:
It took me a few seconds to figure out how to close the bug report pop-up. It's not obvious that I need to click the bug icon again to close the pop-up box.

Suggested fix:
Other websites I've seen allow the user to click anywhere outside of a pop-up to cancel it. Or have a close (X) button on the dialog itself.

Document a workflow for using JSON schema to write quizzes

mdbook-quiz.schema.json is now part of the release, but I couldn't figure out VSCode integration...

In example, add a multi-choice question with (python) code in the prompt

Context: I used mdbook-quiz to make quizzes for a course in python and I struggled a bit with the format of the prompt.prompt for multiple choices question.

What I did: I first thought that you could enter any markdown as for the mdbook. For some reason, this is not the case. As far as I understand, what was causing problem is my poor understanding of the rust parser. In the end, the prompt needs to be only one line and to include some code I did use the following syntax:
<pre><code class=\"language-python\"> ... </code></pre>
Not sure, this is the right way to do? More examples available at: https://github.com/dataflowr/quiz

A better solution would be that the prompt could be any markdown (i.e. like what is used as input for mdbook) but I do not know if this is possible?

I did not try to make tracing question in python but this might be another nice example to add.

syntax highlighting only working for rust

I'm having this waning log:

Could not find the language 'cpp', did you forget to load/include a language module? [lib.js:152:25938](http://localhost:3000/quiz/lib.js)
Falling back to no-highlight mode for this block. 
<code class="language-cpp">
[lib.js:152:25973](http://localhost:3000/quiz/lib.js)

My question:

[[questions]]
type = "MultipleChoice"
prompt.prompt = """
```cpp
int x = 0;
```
"""

I have the same error with python too.
I think it is because the code only imports rust:

mdbook-quiz/js/packages/quiz/src/components/snippet.tsx

Line 6 in b000274

import rust from "highlight.js/lib/languages/rust";

And indeed for rust the highlight is working

Support checkbox in addition to radio button for multiplechoice answers

Currently, you can only choose one possible solution as the answer, would it be possible to support the selection of multiple choices as the answer?

Mobile Chrome cuts off fullscreen submit button

Add "show correct answers" button at bottom of answer review as well

Language

Is there any way to configure the language for default strings, like "Question", "Response", "Determine whether .. program if it were executed." etc.?

Option to review completed quiz questions

Would be nice to have an option to see all choices after completing a quiz question and not only the correct answer at the end of a quiz.
Currently finished chapter 4.2 References & Borrowing and this came up after the last question of the last quiz, which I had some trouble on.
Thanks, and I appreciate the work going into this project.

From Source Installation Problem (npm install -g graco)

I am unable to install graco using npm. After running the (sudo) npm install -g graco command, I am getting the errors below.

Consent form isn't showing up on pages that don't have quizzes

Is there a binary out there?

Hello @willcrichton,

sounds great!
Unfortunately I can't install Rust.
Is there a binary out there?

Thanks & greetings
rufus42

Improve diagnostics for pre-validation quiz errors

e.g. TOML parsing failure

Add an optional back button

Would be nice to go back and fix a previous answer. Needs to be configurable for cases like the Ownership Inventory.

Loading module was blocked because of a disallowed mime type

I've encountered an issue with the .mjs file type while using mdbook quiz. When I open a page containing the quiz and test it through a server I get the following errors in different browsers:

Firefox:

Loading the module from https://xxx/mdbook/quiz/quiz-embed.mjs was blocked due to a disallowed MIME type.

Microsoft Edge:

Failed to load module script: Expected a JavaScript module script, but the server responded with a MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

To resolve this issue the server must serve the .mjs file appropriately. However, when you don't have control over the server or are publishing files for public use, this can lead to problems (as I am here). Some tools may also not support the .mjs extension.

A workaround to make the quiz-embed.mjs module work is to append .js to the end of .mjs files, like quiz-embed.mjs.js. This is accepted but it requires manual replacement of all artifacts in the generated code.

Is there a reason for using the .mjs file extension?

If it was for module clarity, preferred over .js, one could use .mjs during development and convert to .js during the build step. However, ensure that changing to a .js file does not introduce additional issues. Currently this workaround is working for me without any issues.

---

adding supporte for draft chapter

mdbook allows you to define draft chapter in your summary.

But currently if you have a draft chapter and we use mdbook-quiz we panic because of this line https://github.com/willcrichton/mdbook-quiz/blob/main/src/processor.rs#L207

As a minimal reproduction case, we can simply use the example provided in this repository and add this line to SUMMARY.md :

# Summary

- [Chapter 1](./chapter_1.md)
- [Chapter 2]()

I think the simple fix would be doing only treat the case were the option is Some using a if let Some construct.

Make "See the Correct Answers" Button Optional

Description:

It would be nice to have a feature that allows users to make the "See the Correct Answers" button optional in the quiz configuration. Currently, this button appears automatically when a user answers some questions incorrectly. However, in certain use cases, we may want to hide this button to encourage learners to attempt the quiz without immediately seeing the correct answers.

Proposed Solution:
To implement this feature, a configuration variable must be added to the quiz configuration file. This variable, let's call it show-correct-answers, can be set to true or false. When set to true, the button behaves as it does currently, appearing when a user answers questions incorrectly. When set to false, the button is hidden, and users can only review their answers without seeing the correct ones, while keeping the "retry the quiz" button always visible.

Example Usage:

<!-- Quiz Configuration -->
show-correct-answers`: false

support for nested folder

Currently if we put a quiz in a nested folder, that doesn't seem to work.
I've created a minimal example here: https://github.com/Tudyx/mdbookquiz-nested-folder

That's already super great to have quiz in flat book but it is planned to add support for nested one in the future?

I think it will be a good use case because the mdbook doc is kind of encouraging to have a nested structure.