Customizing a Skilljar Quiz to act as a Survey

by Jeff Richmond
Follow

With a little CSS/Javascript customization, it’s possible to turn your Skilljar’s built-in quizzes into surveys so you can get valuable course feedback. In this article, we'll walk you through how to do this and give you the code snippet you'll need to complete your customization. 

Contents

How does it work?

In the Global Code Snippet of your theme settings within your Skilljar dashboard, there is some Javascript that checks on page load if that page contains a quiz, and if so, confirms if the ID of that quiz matches any of the IDs that have been hardcoded as “surveys” in the custom code. If the code finds a match, then CSS styling is applied that removes certain elements of the quiz that are unnecessary for the Survey use case, as well as swaps the word “quiz” to “Survey” everywhere it occurs.

image8.png

To get this set up, simply follow the steps outlined below. This should only need to be set up once for a specific Skilljar quiz to be turned into a "survey" across all courses:

  1. How to Add a New Quiz ID to be Picked up by the Survey Styling
  2. Gather the Published "Quiz-Data" ID from the front end (student-facing domain)
  3. Adding the Code Snippet with the Data String to your theme

How do I do this?

How to Add a New Quiz ID to be Picked up by the Survey Styling

First, create a quiz you want to use as a survey and add it to a lesson within a published course you can view on your training site. It would be a good idea to use a Hidden course for this since you will just need it to extract the Published Course ID once. 

After this has been set up once, you will be able to reuse the same quiz across your entire training domain and the quiz should update to be branded as a "survey" everywhere it is used as long as the course is published on the same domain. 

 

Gather the Published "Quiz-Data" ID from the front end (student-facing domain)

First, you’ll need to extract the Published Quiz ID from the Quiz you are trying to convert into a survey.

This only needs to be done once per survey (quiz), and once you’ve extracted the ID and entered it into the Javascript you can then use that survey in as many places as you’d like on your training site and it will always work.

Go to the Lesson containing the Quiz on your training domain, and then right-click it and select Inspect to open the Browser Dev Tools.

image1.png

Once the Inspector is open, search for the quiz element’s source code by selecting ctrl+F on your keyboard and searching for "data-quiz" to find the following code and the associated published quiz information. In the example below, the string that you would need to save is: 1g4u9ayi18pa2:

<div id="quiz-container" class="course-scrollable-content course-text-content quiz" 
data-quiz="1g4u9ayi18pa2">


The text string inside the ‘data-quiz’ property is the Published Quiz ID that you'll need to input into the code snippet in the next step of this process.

Here is a screenshot as well to show what to inspect when you inspect the page. 

image12.png

Screen_Shot_2020-09-28_at_5.19.52_PM.png

Code Snippet

Adding the Code Snippet with the Data String to your Theme

Once you have the Published Quiz ID, you'll need to add it to the list of IDs in the Javascript code below. Go to the Global Code Snippet section of your Theme and add the code snippet after replacing the red-bolded-string below with your quiz-data string:

<!-- START Quiz to Survey -->
<!-- Global Head/Code Snippet -->

<style>
.is-survey .sj-text-quiz-start span,
.is-survey .sj-text-quiz-submit span,
.is-survey .sj-text-quiz-passed span,
.is-survey .sj-text-quiz-failed span,
.is-survey .sj-text-quiz-take-again span,
.is-survey .sj-text-quiz-completed span,

.is-survey .score,
.is-survey .time,
.is-survey .results {
  display: none;
}
.is-survey .sj-text-quiz-start::after {
  content: 'Start Survey';
}
.is-survey .sj-text-quiz-submit::after {
  content: 'Submit Survey';
}
.is-survey .sj-text-quiz-take-again::after {
content: 'Take this survey again';

}
.is-survey .sj-text-quiz-passed::after {
  content: 'Thank you for your feedback!';
}
.is-survey .sj-text-quiz-failed::after {
  content: 'Thank you for your feedback!';
}
.is-survey .sj-text-quiz-completed::after {
  content: 'Thank you for your feedback!';
}

</style>
<script>
QUIZ_SURVEY_IDS = [
  "quiz-data-string",
]
$(document).ready(function() {
  if ($('#quiz-container').length && ~QUIZ_SURVEY_IDS.indexOf($('#quiz-container').attr('data-quiz'))) {
    $('#lesson-main-content').addClass('is-survey');
  }
});
</script>
<!-- END Quiz to Survey -->

If you are looking to add multiple survey style quizzes to the theme so that this customization is represented on other quizzes, you can add additional ID's to this object with quotes surrounding it, and a comma in between each value. For example, if we had multiple quizzes as surveys it would look as follows:

QUIZ_SURVEY_IDS = [
  "12jkbdjb121223", "s3doijdis1238"
]

That’s it! Now you can add this survey (quiz) to any course you want and the survey styling will take hold as long as the published quiz IDs match up.

 

Powered by Zendesk