Giter VIP home page Giter VIP logo

hugo-quiz's Introduction

hugo-quiz

build and deploy

A hugo shortcode for writing quizzes with a markdown-like syntax, called quizdown.

🚀 See the demo based on the hugo learn theme or try the interactive quizdown live editor.

  • supports markdown text formatting, images and syntax highlighting.
  • different quiz-types: single-choice, multiple-choice, sequence.
  • support for hints and explanations.
  • options for color theme, question shuffling, localization.
  • mobile friendly with touch support for all question types.

Installation

Quizdown is a javascript library which is developed in a separated project. hugo-quiz uses a simple shortcode to use quizdown with Hugo. For the library, you can either use a link to a CDN or download and link to the local quizdown.js file.

Hugo-learn theme

  1. To install and setup the library, copy the file demo/layouts/partials/custom-header.html into your local layouts/partials/ folder. This inserts the nescessary javascript code inside the head section of the hugo website.
  2. To install the shortcode, copy the content from demo/layouts/shortcodes/quizdown.html into your local layouts/shortcodes/ folder.
  3. Currently, the --minify flag of the hugo command causes issues with the raw quizdown-markdown code. Please remove the flag when building your website or use the following option in your config.toml:
[minify]
  disableHTML = true

Other themes (without a custom-header.html)

If your theme does not offer a custom-header.html you need to add the library (and the extensions you want to use) to the head section of your website:

<head>
    ...
  <script 
     src="https://cdn.jsdelivr.net/npm/quizdown@latest/public/build/quizdown.js">
  </script>
  <script 
      src="https://cdn.jsdelivr.net/npm/quizdown@latest/public/build/extensions/quizdownKatex.js">
  </script>
  <script 
      src="https://cdn.jsdelivr.net/npm/quizdown@latest/public/build/extensions/quizdownHighlight.js">
  </script>
  <script>quizdown.register(quizdownHighlight).register(quizdownKatex).init()</script> 
  ...

</head>

Usage (edit example in 🚀 quizdown editor)

Write quizzes in plain markdown in any of your files in the content directory:

# Hugo Quiz

{{< quizdown >}}

---
primary_color: orange
secondary_color: lightgray
text_color: black
shuffle_questions: false
---

## The sound of dog

---
shuffle_answers: false
---

What do dogs sound like?

> Some hint

- [ ] yes
- [ ] no
- [ ] `self.sound = "meow"`
- [x] wuff

## Put the [days](https://en.wikipedia.org/wiki/Day) in order!

> Monday is the *first* day of the week.

1. Monday
2. Tuesday
3. Wednesday
4. Friday
5. Saturday  
{{< /quizdown >}}

📚 Documentation

The quizzes are for fun and not for serious assessment. Since everything is rendered on the client side, the hints and solutions to the questions become visible once javascript is disabled in the browser.

Check out the documentation on the main project page. You might be interested in:

Demo

Tested with version 0.80.0 of Hugo and the Hugo Learn theme.

Visit https://bonartm.github.io/hugo-quiz/ for a live demo based on the hugo-learn theme. You can also view a local version of the demo.

First download the theme:

git submodule update --init --recursive

Then start the server:

cd demo
hugo server -D

hugo-quiz's People

Contributors

bonartm avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

hugo-quiz's Issues

Cannot run local demo

(Sorry for my ignorance, this is the first time I hear of hugo, so I might be missing something totally obvious)

With current master when I:

cd demo
hugo server -D

the server starts, but serves an empty page:

$ wget -qO- "http://localhost:1313/hugo-quiz/"
<pre>
</pre>

CDN issue

Hello,

I successfully integrated 'hugo-quiz' into my website. However, I encountered an issue I'd like to address. Despite using Hugo without minification for the quiz-specific pages, I faced corruption problems in the production environment due to the CDN (CloudFlare).

I resolved this by configuring CloudFlare "Page Rules" to disable "Performance" for these pages.

However, I believe it would be more effective if this issue could be resolved on your end. Perhaps allowing the option to pass a JSON array with the questions instead of relying on Markdown could be a viable solution.

Error building site

Hello,
Thanks for hugo quiz.
first of all, I want to say that I am a beginner and I have perhaps missed something. I also want to state that I am not able to determine whether my problem is due to hugo-quiz or blogdown.

I have tried to install hugo-quiz using blogdown (from Rstudio team).
Here are the steps that I have followed:
Firstly, create blogdown with the hugo-theme-learn
This step works.
Secondly Try to modify some content
I have created new md files, and Rmarkdown files.
This step works.
Thirdly
I have added the custom-header.html file in the directory ./layouts/partials/custom-header.html
and the "quidown.html" file in the ./layouts/shortcodes
I run the local server. It works.
Fourthly
I add a markdown file with a quiz in the directory :
./content/basics/Statistiques/Quizz
I first added the file while the local server was on. I could have a quiz.
However, when I stopped the server and try to serve anew the site, it does not work anymore and I receive an error message instead.

".\content\basics\Statistiques\Quizz\index.md:1:1": unable to process menus for page "basics\\Statistiques\\Quizz\\index.md": invalid character 's' looking for beginning of value
Rebuild failed:

Logged 1 error(s)

I have tried several things :

  • delete the Quizz directory, serve site . Without the Quizz directory, the site works.
  • Add the directory 'Quizz' when the local server is off and serve site afteward, it does not work.
  • delete the Quizz directory, serve site, add the directory "Quizz" in the content directory, sometimes it works, sometimes it does not (and I cannot figure out why)

The file name is "index.md"

The content of the file is exactly:

---
title: "quizz test"
author: "NS"
date: "27/05/2022"
categories: ["R"]
tags: ["R Markdown", "Introduction", "Généralités"]
draft: false
images: []
menu:
  docs:
  parent: "statistiques"
weight: 100     
---
 

# Hugo Quiz
{{< quizdown >}}

---
primary_color: orange
secondary_color: lightgray
text_color: black
shuffle_questions: false
---
  
  ## The sound of dog
  
  ---
  shuffle_answers: false
---
  
  What do dogs sound like?
  
  > Some hint

- [ ] yes
- [ ] no
- [ ] `self.sound = "meow"`
- [x] wuff

## Put the [days](https://en.wikipedia.org/wiki/Day) in order!

> Monday is the *first* day of the week.

1. Monday
2. Tuesday
3. Wednesday
4. Friday
5. Saturday  
{{< /quizdown >}}

install

hi there, one thing I do not get. From where should I install (and to where) the "quizdown.js". Cannot find it. Or can't I see it. Or am I to stupid - it is already quick later here.

Statistics

Hello
Thanks for hugo and js scrips. Pretty cool !

Do you have any idea about a special needs:
I would like to do not display the scores to the candidate or any people.
The teacher or "admin" are only the person authorized to display the scores. It should be by sent mail ou just a thru a web page.

Thanks for your ideas !
Cheers

Back function

I would like to see a "Back" button starting with question 2 in a quiz - in case you realize that you've made a mistake in a previous answer.

Javascript Is Not Cached

I don't know why, but cdn.jsdelivr.net always responds with 200 (full load) instead of 304 (Not Modified) - so, JavaScript is not cached at all; it hugely impacts performance.

I use this in my Hugo "head" as per instructions:

{{/* Put custom HTML markup before the end of <head>. */}}
    <script 
    src="https://cdn.jsdelivr.net/npm/quizdown@latest/public/build/quizdown.js">
    </script>
    <script 
    src="https://cdn.jsdelivr.net/npm/quizdown@latest/public/build/extensions/quizdownKatex.js">
    </script>
    <script 
    src="https://cdn.jsdelivr.net/npm/quizdown@latest/public/build/extensions/quizdownHighlight.js">
    </script>
    <script>quizdown.register(quizdownHighlight).register(quizdownKatex).init()</script> 

Multi-answer issue

Dear valuable contributor,

I am creating the quiz for my site. The only issue is we could not support multi-answer for the question (can choose multiple answer for one question). Can you please help to update and share it with many many thanks?

Regards,
Viet

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.