FAQ content

Quizzes: Preview, share, and embed quizzes

In this article

Preview a quiz

While viewing your quiz in Preview Mode, you can:

  • See exactly how your survey will look to the public, including your welcome screen, form fields, page breaks, and thank you screen.
  • Try out correct/wrong answer text, field rules, file uploads, and other features.
  • Test out look & feel, visibility, password, and other settings.
  • Submit your quiz and test out grading & email notifications.
  • Review your test submissions. While in Preview Mode, all submissions will be separated from your users' submission data.

Launch Preview Mode

  1. While editing your quiz, click on the Preview link above the workpad.
The Preview button above the workpad

Preview Mode features

When in Preview Mode, a green navigation bar will appear over the top of your quiz. This not only lets you know you're in Preview Mode, but it also provides you with several options.

  1. If you have added page breaks to your quiz, click on the Jump to Page button and select a page to view from the dropdown.
  2. Under the Options dropdown, you can choose to:
    • Ignore Required questions. Selecting this option will allow you to submit your quiz without having to fill in required fields.
    • Show Hidden Fields. Selecting the option will allow you to view hidden fields, which is helpful if you have field rules in place.
  3. Click the Share/URL button to view your quiz's embed code and public URL.
  4. Toggle between the Desktop View, Tablet View, and Mobile View display options to preview what your form will look like on various screen sizes/devices.
  5. Click the Preview Mode Reports button to view and analyze all of submissions made while in Preview Mode.
    • All submissions made in Preview Mode are kept in a separate list in your quiz's reports.
    • You can use all of the same analysis reports on your preview data as you can your real data.
  6. Click on the close (close) button to exit Preview Mode. This will take you to the public view of your quiz.
A quiz in Preview Mode

Share / embed a quiz

When you're ready to start gathering submissions, there are a few ways you can share your quiz:

  • Embedding the entire quiz in a webpage: each quiz has its own embed code, which you can use to integrate the quiz into your library website or another webpage.
    • Got LibGuides? You can easily embed a quiz using the LibWizard content item -- no need to copy and paste code!
  • Embedding a button widget in a webpage: rather than embed the entire quiz inside of a page, you can embed a button widget that will launch the quiz inside of a modal window.
  • Visiting the quiz's URL: each quiz also has its own standalone URL, which you can use to view it directly in your browser. This is great for sharing a link to a quiz in an email -- especially if you have given your quiz a friendly URL.

There are two ways you can find your quiz's embed code and URL: from the workpad (when editing your quiz); and from the Quizzes page itself.


View a quiz's sharing options

Via the workpad
  1. Edit your quiz.
  2. Click on the Share/URL button above the workpad.
The Share/URL button above the workpad
Via the Quizzes page
  1. Click on Quizzes in the command bar.
  2. For the quiz you want to share, click on the Form Code (</>) icon in the URL/Code column.
Viewing a form's embed code from the Quizzes page

Sharing options

Direct / Friendly URL

Each quiz has its own unique, customizable URL which you can share with patrons. By default, this URL consists of a unique ID number that isn't very memorable (known as the Direct URL). However, you can replace that number with your own custom URL slug, referred to as a Friendly URL.

To easily view and copy your quiz's current URL, look no further than the Direct URL/Friendly URL field in the Quiz widget code window.

The Friendly URL link
Embedded in page

You can embed the entire content of your quiz inside of an another webpage. When using this option, you will be provided with some embed code to insert into your page's HTML. Wherever you place the code is where your quiz will display on the page.

When a user visits a page with your embedded quiz, it will display inside of an <iframe> element, using the height and width in your Quiz Options > Look and Feel settings. (Please note: if you have enabled the LIbAuth Authentication access control for your quiz, your authentication log-in page may not be allowed to display inside of <iframe> elements. As a result, the embedded widget may not display.)

To copy the embed code for your quiz:

  1. In the Quiz Widget Code window, go to the Embedded tab.
  2. If your quiz currently has a page header or banner, you can choose to exclude it from the embedded widget by selecting the Do NOT Display Banner Header checkbox.
  3. Click inside the blue text area containing your widget's HTML code. This will automatically copy it to your clipboard.
Options under the Embedded tab
Popup via Button

As an alternative to embedding the entire quiz within a page, you can embed a button that launches it inside of a window. When using this option, you will be provided with some embed code to insert into your page's HTML.

When a user clicks the button, a modal window will appear over the current page. Your quiz will display inside of an <iframe> element within that window, using the height and width in your Quiz Options > Look and Feel settings. (Please note: if you have enabled the LIbAuth Authentication access control for your quiz, your authentication log-in page may not be allowed to display inside of <iframe> elements. As a result, the quiz may not display inside of the window.)

To copy the embed code for the button widget:

  1. In the Quiz Widget Code window, click on the Popup via Button tab.
  2. If your quiz currently has a page header or banner, you can choose to exclude it from the widget by selecting the Do NOT Display Banner Header checkbox.
  3. For the Type of Button, select which style of widget you want to create:
    • Button in the page: this will create a button that you can place within your page's content. Wherever you insert your widget's code in the page is where the button will appear.
    • Tab on the side of the screen: this will create a tab that floats along the edge of the window, regardless of where you insert your widget's code.
  4. To customize the button's label, use the Button Text field.
  5. If you selected Tab on the side of the screen, you can customize the side and position of the widget on the screen.
    • To display the button on either side of the window, select Left or Right as the Button Location. Then, use the Button Vertical Position to set how far from the top of the page (in pixels or a percentage) the button will display.
      • For example, a value of 50% will be halfway down the side.
      • Decreasing the value will move it closer to the top, while increasing it will move it closer to the bottom.
    • To display the button along the top or bottom, select Top or Bottom as the Button Location. Then, use the Button Horizontal Position to set how far from the left of the page (in pixels or a percentage) the button will display.
      • For example, a value of 50% will be halfway across the page.
      • Decreasing the value will move it closer to the left, while increasing it will move it closer to the right.
  6. To customize the text color of the button, click inside the Button Text Color field and use the color picker to choose a new one. Or, enter the HEX code value of the color you'd like to use.
  7. To customize the backgroung color of the button, click inside the Button Background Color field and use the color picker to choose a new one. Or, enter the HEX code value of the color you'd like to use.
  8. Click inside the blue text area containing your widget's HTML code. This will automatically copy it to your clipboard.
Options under the Popup via Button tab