Creating a custom question slide with True/False options
March 21, 2017
Creating a custom question slide with True/False options
March 21, 2017
CEO, eLearningOcean, HealthDecisions
Newbie 6 posts
Followers: 33 people

There are probably millions of different quiz-type interactions that we can imagine,  of which only a few Captivate can provide as pre-formed quiz slide types.   Captivate tries to provide a sufficiently flexible environment to create unique quiz interactions but it is really easy to get lost in the user interface trying to find just the right combination of functions.   In this short article,  we’ll go through the process of creating a quiz slide with the following characteristics:

snip7

The desired characteristics are that the student gets points for selecting the correct answers,   true or false,   and that only one of true/false can be active at a time for a given question.    These are two separate requirements.   Another,  perhaps less obvious requirement might be that there are no other question types in the module.   We’ll deal with that as well.

As a bonus,  we will introduce an undocumented javascript function that enables you to create a scoring event,  similar to clicking a scored checkbox by hand.

Activate the quizzing functions

First,  you need to actually create a question slide from one of Captivate’s canned types to get the needed quiz functionality and potential reporting.   On the toolbar,  selecting Quiz -> Question Slide -> (any question type)  will create both a question slide and a reporting slide.    Since this question slide will be unused,  mark it hidden by going to toolbar View -> Hide Slide

The great thing is that hidden questions do not impact the quiz results,  so this is an easy solution.

Creating the questions

First, we add regular empty slide after the hidden question slide where we will make our custom quiz.

Question text is simply placed in a smart-shape rectangles.

The true/false buttons is where things get more interesting.  We will create three buttons – the true/false buttons and a third button that will be hidden and will be used to tell Captivate that the answer is correct.  All the buttons will look the same, so we make one and then just duplicate them.

Create the button as follows:

– create a circular “smart shape”

– select “Use as Button” on the shape’s properties tab

– create a new “state” for the button by opening up the “state view” and adding a “new state.”  I name this state “selected”

– format both your new “selected” and the system-provided  “Down”  state to look the same.   then exit the state editor.

– change the name of the shape to “Question_T_1”      You’ll see why in a minute.

This shape will be used for all the buttons in the quiz.   We create the extra state “selected” as this is one that we can directly control.   Captivate manages the system states, which makes them harder to control.  The format of the shape name is important.  We will be using a short javascript routine to control the toggling function, and with a unique format for the shape names,  you can create a general routine that can find these shapes rather than identifying each button individually in the code.

Next,  duplicate the shape you just created to fill in each of your questions with the needed true/false buttons, and a third button that we will use to signal that the answer is actually correct.   You will see that Captivate automatically changes the number from _1 to _2, _3, _4 as you duplicate the shapes.

Next,  go through and edit the shape names to have the same name patterns as shown below. The names should look like this:

snip6

Dealing with scoring

At this point, we need to active scoring on the answer buttons, which we will use in our javascript routine to mark when a correct answer has been selected. Add the following to all of the answer buttons shape properties tab:

Actions -> Reporting -> Include in Quiz

also check “Add to Total” and “Report answers”

Toggling true/false

I prefer using JavaScript over using advanced actions as I find it more flexible and faster to program, but there are many good reasons not to as well.   In this case,  the JavaScript enables us to create a very small routine that deals with the toggling problem for all the buttons based on how they are named.     Add the following code to your page by using Actions -> On Enter -> Execute JavaScript  and adding the following to the script screen:

$('div[id^="Question"].cp-frameset').on("click", manageButtons );

function manageButtons(e) {
  var target = e.target.id ;
   
  var trueind = /_T_/;
  var falseind = /_F_/;
 
  var invTarget = (target.match(trueind) && target.replace(trueind,"_F_") ) || (target.match(falseind) && target.replace(falseind,"_T_") );

  cp.changeState(target, "selected"); 
  cp.changeState(invTarget, "Normal");
 
 }

As an overall explanation of what this does,  first we find all shapes that have an ID that starts with “Question” and hook on a function to run when these shapes are clicked.   Then we change the shape state to “selected” and the state of the other related shape to “Normal”      As it turns out,  Captivate appears to only add a success score when the shape state is something other than Normal..

Submit

The submit button performs the heavy lifting for checking if the answers are correct and relaying that information to Captivate to pass the score on to the LMS.   We create a shape to be the button,  then mark it to Use as Button in the properties.

To get the needed functionality,  the submit button will call a javascript function we define.   This is done under

Properties -> Action -> Execute Javascript

the javascript is as follows:

theAnswers = { 
 "Answer_1" : "Question_T_1",
 "Answer_2" : "Question_F_2",
 "Answer_3" : "Question_T_3",
 "Answer_4" : "Question_F_4",
 "Answer_5" : "Question_T_5"
 }
for ( answer in theAnswers) {
rightAnswer = theAnswers[answer]
theState = cp.getCurrentStateNameForSlideItem(rightAnswer);
if (theState != "Normal" ) { cp.SubmitInteractions(answer, cp.QuestionStatusEnum.CORRECT, 0) }
}

cpCmndNextSlide = 1;

also,  uncheck the box “Continue Playing the Project”  as we will control the player.

The way this works is that first, we define which of the true/false buttons needs to be selected to indicate a correct answer.  We then loop through each of these buttons to see if it was actually selected.   The magic is in the function “cp.SubmitInteractions”  which enables us to essentially click the answer button in javascript, indicating a correct response. Note that neither this or the function “cp.getCurrentStatementForSlideItem”  are documented.

Hiding the Answer Buttons

The answer buttons are not for the user,  so we just hide them under a smart shape that has the same color as the background where they cannot be clicked.

Timing

In general,  for question slides, we eliminate as much of Captivate’s built in timing control as possible.   All shapes timing are set to “Display for rest of slide” and start at time 0 (zero).  The Submit button is set to pause at 0.1 second.   That’s it.

Conculsion

Using the Quiz summary slide, you can see that scores are correctly summed for the complete interaction.

There is a lot of flexibility on quiz formats once some basic aspects of how scoring works in Captivate are clarified.  The strategy outlined here creates tremendous flexibility in developing custom user interactions, with the actual scoring and reporting performed by a simple JavaScript routine associated with a submit button.

There are numerous great tutorials on line that address all kinds of aspects of quizzes.  This approach is one of many alternatives.

For further information, contact sdwarwick (at) healthdecisions (dot) us

All Comments
Sort by:  Most Recent
Feb 4, 2019
Feb 4, 2019

Hi – I am a new user of Captivate, and I found your post helpful as this is exactly what I am trying to do i.e. get 5 T/F questions on one slide. It does work in browser view but not when published to PDF – is there a way to do this? – also is there a way to identify which of the answers were wrong? Thanks and regards Robert.

Like
()
May 18, 2018
May 18, 2018

I read this over a few times and followed it to the letter. When I’m done creating all the buttons etc I then need to define which of the true/false buttons needs to be selected to indicate a correct answer. Problem is the quiz tab for each shape shows completely blank…? I went back over the article and 3x checked I was following it to the letter…any advice? I’m using Captivate 2017 / ver 10.0.0.192

Like
()
Sep 11, 2017
Sep 11, 2017

Thanks for this nice solution!

How can I set a custom variable for the quiz result? cpQuizInfoPassFail didn’t work and I need a variable like quizResult = true/false or 1/0 to trigger it on the result page to show individual elements.

How I need to modify the JS on the submit button?

I am using CP 10.

Thanks for your help!

Greetings,
Stefan

Like
()