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

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

12 Comments
2019-02-04 04:03:53
2019-02-04 04:03:53

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
2018-05-18 15:01:53
2018-05-18 15:01:53

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
2017-09-11 14:17:19
2017-09-11 14:17:19

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
2017-07-20 18:32:52
2017-07-20 18:32:52

Thanks for posting this, Steven! Your posts have opened up a crazy new world for me in Captivate.

I have one question regarding this custom quiz and quiz reporting that I hope you can answer. Do you know if it’s possible to assign the Interaction ID to a custom quiz like this for scorm reporting purposes? Currently it creates a unique ID somewhere under the hood, but I’d really love the ability to customize it like the built in quiz slides allow for.

I’ve tried to tap into the quizObject to see what’s there, but with this custom quiz, i keep getting “quizObject: undefined” in the console.log

Any advice you could provide would be great! Thanks.

-Will

Like
(5)
>
Anonymous
's comment
2017-07-20 21:12:05
2017-07-20 21:12:05
>
Anonymous
's comment

as it turns out, the interaction ID is something you can set!

when you click on the button that is included in the quiz, go to properties->actions and look at the bottom under “reporting” the interaction ID can be set there. it is typically assigned randomly but it looks like you can make it anything you want.

Like
>
sdwarwick
's comment
2017-07-20 22:46:05
2017-07-20 22:46:05
>
sdwarwick
's comment

Thanks so much for your quick response.

This totally works when added to the submit button! Great addition!

I don’t want to push my luck too far, but would you by any chance know how to add custom question text (questionData.qt) to a custom question for reporting? Either pointed at a text caption OR written out in the JS?

Thanks again for your help and sharing with the community!

Like
>
Anonymous
's comment
2017-07-20 23:19:31
2017-07-20 23:19:31
>
Anonymous
's comment

regrets, haven’t had to do that yet.

Like
>
sdwarwick
's comment
2017-07-21 00:34:24
2017-07-21 00:34:24
>
sdwarwick
's comment

No worries. I still owe you a beer and my thanks for the interactionID help.

If i figure it out, I’ll post it back here.

Cheers,
Will

Like
>
Anonymous
's comment
2017-07-30 22:45:16
2017-07-30 22:45:16
>
Anonymous
's comment

I found the solution to this question and wanted to share in case it’s ever of use to you:

First, I renamed the text captions to “myQuestion1”, 2, 3… on the stage.

Next I added this line of code to the for loop, right before the actual submit:
cp.D.Answer_1q0.qt = cp.D.myQuestion1c.accstr;

Obviously, just repeat that line for each question and it’s good to go.

Hope this helps someone somewhere,
Will

Like
2017-05-04 13:36:27
2017-05-04 13:36:27

Hi,

This is such a great post!
I am using the logic for another kind of quiz.
Everything works except the quiz variables like :
numberOfRightAnswers
baseScore etc….

So I can get access to the total score.. especially to manage partial score..

Any idea?

I am using Captivate 10.

Thanks,

Gary

Like
(2)
>
garyc56322630
's comment
2017-05-04 13:37:12
2017-05-04 13:37:12
>
garyc56322630
's comment

Correction..

So I cannot get access to the current score.. and total..

Like
>
garyc56322630
's comment
2017-05-04 23:16:20
2017-05-04 23:16:20
>
garyc56322630
's comment

you have to make sure you have defined the variables as “captivate” variables as well. they don’t show up when you try to display them using $$variablename$$ unless you do. does that help?

Like
Add Comment