Customizing a Skilljar Quiz to act as a Survey

by Jeff Richmond
Follow

With a little CSS/Javascript customization, it’s possible to repurpose Skilljar’s built in Quizzes as Surveys.

How does it work? In the Global Code Snippet of your theme, 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 match any of the IDs that have been hard coded 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 setup, simply follow the steps outlined below. This should only need to be setup 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 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 setup 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.

Navigate to the Lesson containing the Quiz on your training domain, and then Right click -> 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 t  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

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. Navigate 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-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-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