Before you start

Follow the instructions mentioned in the article to consume the VIDIZMO Audio playback widget How to use VIDIZMO Widgets


Adding the Quiz Playback Widget

Follow the steps given below to add the quiz playback widget to your website.


Get Started


Step 1: Add the following HTML into the body section of your web application code to add the Quiz Playback widget.

 

<vdz-mashup-quiz class="quizPlayer" data-widget="true"></vdz-mashup-quiz>

Other available input properties for the Quiz player widget can be found below.


Note: Make sure data-widget property is set to ‘true’ as this applies the VIDIZMO default styling to the widget.


Input Properties


PropertyTypeDefaultRequiredDescription
mashup-idstring-yesId corresponding to a unique content in user's portal.


Listen to Quiz player events


Step 2: Add the following code into the body section of your web application to consume and bind the available events for the quiz player widget. Sample events can be seen in the following code:

document.querySelector(".quizPlayer").addEventListener('on-mashup-loading', (evt) => {
    });

document.querySelector(".quizPlayer").addEventListener('on-mashup-loaded', (evt) => {
    });

Other available events for the Quiz player widget can be found below.


Events


Event NameEvent DataTypeScenario
on-mashup-loadingsearchCriteria-When mashup search call is being sent to server, search criteria is received as event data.
on-mashup-loadedmashupInfo-When mashup search call is successful, mashupInfo is received as event data.
on-mashup-loading-failederrorjsonWhen mashup search call couldn't find any mashup against search criteria.
on-mashup-not-foundsearchCriteria-When mashup search call couldn't find any mashup against search criteria.
on-password-required--When quiz is protected by the password. When this event is raised, a form will be shown on screen where the user will be able to enter password
on-password-validatedvalidationStatusbooleanWhen password validation process has been completed.
on-initialized--This will be raised when the quiz player has loaded.
on-page-changedpageNumbernumberWhen the player has changed the page of the quiz.
on-completedmashupIdnumberWhen the quiz has been completed and the result screen is being displayed.
on-pass--When the quiz has been passed successfully, this event is raised.
on-fail--When a quiz has failed, this event is raised.
on-quiz-reattempted--When quiz has been restarted due to reattempt.
on-errorerrorobjectRaised when error occurs during form submission.


Sample Code

<html>
<head>
    <meta charset="UTF-8" />
    <!-- VIDIZMO Imports -->
    <script type="text/javascript" src="{portal-address}/static/js/vidizmo-player/player.js">
    </script>
    <link rel="stylesheet" href="{portal-address}/static/compiled/widget/widgets.css" />
    <script type="text/javascript" src="{portal-address}/static/compiled/widget/widgets.js">
    </script>
</head>
<body>
    <vdz-mashup-quiz class="quizPlayer"data-widget="true"></vdz-mashup-quiz> 
    <script>
        document.querySelector(".quizPlayer").addEventListener("on-mashup-loading", (event) => {
    });
        document.querySelector(".quizPlayer").addEventListener("on-mashup-loaded", (event) => {
    });
    </script>
</body>
</html>