PlotSet LogoPlotSet

How to Create a Quiz

A step by step walkthrough for building a graded quiz in PlotSet, with slider and multiple choice questions, feedback on each answer and a result at the end.

Environ 10 minutes

You will end up with an embeddable quiz that grades each answer, shows feedback and closes with a result for the reader's score.

Expect about ten minutes. Most of it goes on writing the questions and feedback in the sheet.

Les données dont vous avez besoin

One sheet with one row per question, feedback line or result band, told apart by a type column.

Exemple de CSV
TypeQuestionInput typeCorrect answerMultiple choice optionsAnswer / PointsText
questionHow many planets are in our solar system?slider8
questionWhich planet is the hottest?multiple choiceVenusMercury :: Venus :: Mars
scoreWhich planet is the hottest?VenusCorrect!
result0-3Keep exploring.
Remarques

The type column holds question, score or result. Leave it unbound and every row is a question.

A number is the answer for a slider. Exact text is the answer for a choice.

Separate multiple choice options with a double colon.

A score row names its question and the answer it answers. Write *-* for any answer.

A result band stops just before its upper number, so 0-3 and 3-5 do not overlap.

Les étapes

Le parcours exact dans PlotSet, d'un modèle vierge à un graphique terminé.

  1. 01

    Open the Quiz template

    From the PlotSet dashboard, start a new project and search for Quiz. It opens with five questions about the solar system.

    Le sélecteur de modèles de PlotSet : les catégories de graphiques listées à gauche, la grille 'Bar Charts' ouverte et la carte du modèle 'Bar Chart' affichant son bouton 'Select'.
    Chaque guide commence ici. Choisissez la catégorie, puis le modèle : c'est la même grille quel que soit le type de graphique visé.
  2. 02

    Write the questions

    Edit the question rows, or import a CSV or .xlsx file. Give each one an input type and a correct answer, and add options for a multiple choice question.

    La vue données de l'éditeur PlotSet : une grille de tableur dont les colonnes 'Name', 'Value' et 'Region' sont remplies de chiffres par province canadienne, à côté du panneau 'Data' qui propose l'import d'un CSV, 'Magic Import' et la synchronisation d'une Google Sheet.
    La vue données, ici sur un projet de graphique en barres. Importez un CSV, extrayez les chiffres d'une image avec 'Magic Import' ou synchronisez une Google Sheet. Le panneau est identique pour tous les types de graphique.
  3. 03

    Check the column bindings

    Bind the columns for the question, the correct answer, the input type and the choices, then the row type and the feedback text.

    Le panneau de données de PlotSet avec les associations de colonnes mises en évidence : 'Label/time' affecté à la colonne A, 'Values' à la colonne B et 'Filter/color' à la colonne C, et le bouton 'Auto Binding' juste en dessous.
    Les associations déterminent quelle colonne devient l'étiquette, laquelle fournit les valeurs et laquelle pilote la couleur. 'Auto Binding' les devine à partir de vos en-têtes : vérifiez-les plutôt que de les tenir pour acquises.
  4. 04

    Add feedback for each answer

    Add score rows that name a question and an answer, with a message and, if you like, an image link.

  5. 05

    Add result bands

    Add result rows for the total score, such as 0-3 and 3-5, each with a closing message.

  6. 06

    Choose the flow

    In the Quiz tab, show the questions stacked, one at a time or all at once, and decide whether an answer is required before moving on.

    L'éditeur PlotSet sur l'onglet 'Preview' : un graphique Quiz terminé sur le canevas, avec le panneau de réglages entouré en rouge le long du bord droit.
    L'onglet 'Preview' pour un graphique Quiz. Tous les réglages de style se trouvent dans le panneau entouré en rouge : apparence, en-tête, pied de page et les options propres à ce type de graphique, chacun dans un onglet distinct.
  7. 07

    Set the sliders and labels

    The Slider tab sets how close a guess must be to count. The Quiz tab lets you reword every button.

  8. 08

    Publish and embed

    Publish for a live quiz and copy the embed code from the Share dialog. Take the quiz once yourself before you share it.

    La barre d'outils de l'éditeur PlotSet avec le bouton 'Share' mis en évidence, juste à côté du bouton 'Export'.
    C'est par 'Share' qu'un graphique terminé devient un lien public et un code d'intégration.

Partez du modèle Quiz avec des données d'exemple déjà chargées, puis remplacez-les par les vôtres.

Ouvrir le modèle

Publier, intégrer ou exporter

La dernière ligne droite est la même pour tous les types de graphique : 'Share' transforme le graphique en lien public actif et en code d'intégration, 'Export' l'enregistre sous forme de fichier statique.

Share : lien public et code d'intégration

Activer le code d'intégration et le lien public revient à publier le graphique. Le lien peut être envoyé à qui vous voulez sans risque, et le code d'intégration s'insère dans n'importe quelle page sous la forme d'une iframe qui conserve les infobulles au survol et l'interactivité. Si vous modifiez le graphique par la suite, cliquez sur 'Recreate' pour répercuter ces changements sur le lien comme sur le code.

La barre d'outils de l'éditeur PlotSet avec le bouton 'Share' mis en évidence, juste à côté du bouton 'Export'.
C'est par 'Share' qu'un graphique terminé devient un lien public et un code d'intégration.
La fenêtre 'Share' de PlotSet : l'interrupteur qui active le code d'intégration et le lien public, les boutons 'Link', 'Embed', Facebook, Reddit, Twitter, LinkedIn et Email, et le lien public du graphique avec un bouton 'Copy'.
Activez le code d'intégration et le lien public, puis copiez le lien ou récupérez l'iframe. 'Recreate' répercute vos modifications ultérieures sur le lien et le code déjà partagés.

Export : SVG, PNG ou JPG

Le bouton 'Export' génère une copie statique à la taille dont vous avez besoin. Le SVG reste net à toutes les échelles et peut encore être modifié dans un outil de design ; PNG et JPG sont les choix sûrs pour les présentations et les documents. C'est le multiplicateur d'échelle qui vous donne une image nette sur un écran retina.

La barre d'outils de l'éditeur PlotSet avec le bouton 'Export' mis en évidence.
C'est par 'Export' que vous obtenez un fichier statique pour une diapositive ou un rapport.
La fenêtre 'Export chart' de PlotSet : un sélecteur d'échelle réglé sur 2x, les champs de largeur et de hauteur à 1000 × 600, et le menu des formats ouvert, affichant SVG, PNG et JPG.
Le SVG reste net à toutes les tailles et modifiable dans un outil de design ; PNG et JPG sont les choix sûrs pour une présentation. Réglez l'échelle avant d'exporter pour que l'image soit nette sur un écran retina.

Conseils de style pour un Quiz

Mix the question types

A slider or two between multiple choice questions keeps readers engaged.

Explain the answer

A line of explanation after each answer is what readers remember.

Keep it short

Five to ten questions suits most readers.

Use pictures sparingly

An image helps on feedback rows. Too many slow the page.

Erreurs courantes en créant un Quiz

A question is never marked correct

The answer text must match a choice exactly. Check spelling and spaces.

No feedback appears

The score row's question must match the question text exactly, or use its number.

The result card shows default text

No result band matched the final score. Check that the bands cover every possible score.

Everything is treated as a question

The type column is not bound. Bind it to separate questions, feedback and results.

En savoir plus sur le Quiz

Vous n'êtes pas sûr que le Quiz soit le bon choix ? Découvrez ce que c'est, quand l'utiliser et quand l'éviter.

À propos du Quiz

Quiz : questions fréquentes

Yes. Set the input type to dropdown and list the options.

Créez votre Quiz maintenant

Gratuit pour commencer avec plus de 600 modèles. Aucune carte bancaire requise.