Downloads

Qwizcards online quizzes and flashcards is available as a WordPress plugin, and as stand-alone JavaScript that you can include in any web page.

WordPress Plugin

To install the Qwizcards WordPress plugin:

From your WordPress Dashboard, go to Plugins, then Add New.

Enter Qwizcards in the Search Plugins box at the top right.

Click Install.

Or, you can download the plugin and install it manually:

Go to https://wordpress.org/plugins/qwiz-online-quizzes-and-flashcards to download to your local computer.

Upload the plugin file to your WordPress plugins directory (…/wp-content/plugins).

Activate the plugin with Dashboard > Plugins > Installed Plugins

Stand-alone JavaScript

By including the Qwizcards JavaScript files in your own pages, you can create quizzes and Quiz shortcodes and Flashcard shortcodes).

Currently, labeled diagrams cannot be created outside WordPress, norflashcard decks using the standard Qwizcards shortcodes (see Quizzes  can you use the “wizard” (which creates shortcodes for you) – but we’ll have these features soon!

To create quizzes and flashcard decks on your own pages, add this code to the <head> section of each web page:

    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

    <script src="https://swinginghotspot.com/wp-content/plugins/qwiz-online-quizzes-and-flashcards/qwiz_qcards_common.js"></script>
    <script src="https://swinginghotspot.com/wp-content/plugins/qwiz-online-quizzes-and-flashcards/qwiz.js"></script>
    <script src="https://swinginghotspot.com/wp-content/plugins/qwiz-online-quizzes-and-flashcards/qwizcards.js"></script>
    <script src="https://swinginghotspot.com/wp-content/plugins/qwiz-online-quizzes-and-flashcards/terms.js"></script>

    <link href="https://swinginghotspot.com/wp-content/plugins/qwiz-online-quizzes-and-flashcards/qwiz.css" rel="stylesheet" type="text/css" />
    <link href="https://swinginghotspot.com/wp-content/plugins/qwiz-online-quizzes-and-flashcards/qwizcards.css" rel="stylesheet" type="text/css" />


 

These HTML tags load the needed jQuery scripts from jQuery’s repository (a “CDN” – content delivery network) and load the Qwizcards scripts from the qwizcards.com site.  So you don’t actually need to download anything!

Customization

You can customize your quizzes and flashcards by including code such as the following in the <head> or <body> sections of your web page, before the script code shown above.

<script>
   var qwiz_params = {
      'icon_qwiz': 'Icon and link',
      'T':         {
         'Got it!':            'Show next card',
         'Need more practice': 'Show this card again later'
      }
   };
</script>

This code sets two properties: “icon_qwiz” (for the Qwizcards icon that appears on the first page/card of a quiz or flashcard deck); and “T” (for “translations”).

The icon_qwiz property value determines how the Qwizcards icon is displayed.  It may have the following values: “Icon and link”, “Icon only”, “Not displayed”.

The T property is an object that may contain properties consisting of the values of strings displayed by the qwiz.js and qwizcards.js scripts.  You can enter new values for each such string, which will replace the default strings displayed by the scripts.  In this example, “Got it!” and “Need more practice” are the default labels of two buttons that accompany flashcards.  With this code, the first button instead will have the label, “Show next card”, and the second button will have the label, “Show this card again later”.

Labeled diagrams

Please note that the stand-alone version of Qwizcards does not allow you to create new labeled diagrams, for now.  Labeled diagrams are created through integration with the WordPress editor, TinyMCE.

If you create a labeled diagram within WordPress, you should be able to copy the page (use Text mode) to another web site, where the stand-alone version will be able to display the labeled-diagram.

Working example

<!DOCTYPE HTML>
<html>
<head>
    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

    <script src="https://swinginghotspot.com/wp-content/plugins/qwiz-online-quizzes-and-flashcards/qwiz_qcards_common.js"></script>
    <script src="https://swinginghotspot.com/wp-content/plugins/qwiz-online-quizzes-and-flashcards/qwiz.js"></script>
    <script src="https://swinginghotspot.com/wp-content/plugins/qwiz-online-quizzes-and-flashcards/qwizcards.js"></script>
    <script src="https://swinginghotspot.com/wp-content/plugins/qwiz-online-quizzes-and-flashcards/terms.js"></script>

    <link href="https://swinginghotspot.com/wp-content/plugins/qwiz-online-quizzes-and-flashcards/qwiz.css" rel="stylesheet" type="text/css" />
    <link href="https://swinginghotspot.com/wp-content/plugins/qwiz-online-quizzes-and-flashcards/qwizcards.css" rel="stylesheet" type="text/css" />

</head>
<body>
[qdeck]
[q] Define "gene"
[a] The unit of heredity.
[q] Define "heredity."
[a] The passing of traits from parent to offspring.
[/qdeck]

</body>
</html>

Leave a comment

Your email address will not be published.