Case Study: I Get By With a Little Help from JavaScript… with Amazing Results

A while ago, I was asked if I could put together a set of addition problems for children in Captivate. However, the requirements were a bit daunting:

1. The learner could continue solving problems, one after the other, all day. In essence, the number of problems to solve would need to be in the hundreds.
   

   Thoughts: Wouldn’t that mean creating hundreds of Captivate slides? Should they be quiz slides or content slides?

2. The learner should be able to choose the lowest number and the highest number to add. For instance, the learner could choose to solve only one-digit numbers or to solve numbers that range between 134 and 189.
   

   Thoughts: Oh-oh. Now I’m looking at possibly thousands of slides, and choosing to jump to a certain section of slides depending on what range of numbers the learner chooses. But, really, I could maybe set up different quiz pools in which one pool is single digits, another is double-digit numbers, etc., and then randomly select from the proper pools.

   Three problems with this:
   1) I’d still have to create thousands of questions slides for those pools to work right.
   2) Every question in every pool must be part of the published files because questions are chosen randomly at run-time, so that’s going to make for a very big project.
   3) There’s still no way I could guarantee that I would show only numbers between an arbitrary range the learner chooses, such as only numbers between 43 and 65.

3. The learner should be able to change the range at any time.
   

   Thoughts: Know what? I’m sorry, this isn’t going to work. Unless…wait a minute…

I started to think about how JavaScript could help. The next thing I knew, I had created:

1. One slide in Captivate capable of presenting an infinite number of sum problems, in which…
2. …the learner can choose the range, any range, at any time.

Yes! A little bit of JavaScript here will go a long way to making this a simple project.

How does this work?

First, I put three text entry boxes on the stage as you can see in the image. They are nothing special. The only thing I did to them was to:

1. Set each to accept numbers only so that learners wouldn’t accidentally input other characters.
2. Set each text entry box to a variable name of my choosing:
   _rangeButton, _rangeTop, _learnerAnswer

Below you can see both the playback and the source stages. It’s important to run this off a web server, and not locally.

1. Try the HTML5 version: http://www.elearningjoe.com/tools/captivate/jscpmath/index.html
2. Try the Flash version:   http://www.elearningjoe.com/tools/captivate/jscpmath/CP-JS_MathProblems.htm

MORE NOTES ARE BELOW THE IMAGES.

Each of the two buttons executes JavaScript in Captivate.

Here is the JavaScript I wrote for Show Me a Problem. I’ve added line numbers here for easier referencing.

1. var lowNum = window.cpAPIInterface.getVariableValue(‘_rangeBottom’);
2. var highNum = window.cpAPIInterface.getVariableValue(‘_rangeTop’);
3. var rand1 = Math.floor(Math.random() * (highNum – lowNum)) + lowNum;
4. var rand2 = Math.floor(Math.random() * (highNum – lowNum)) + lowNum;
5. cpAPIInterface.setVariableValue(‘_rand1’, rand1);
6. cpAPIInterface.setVariableValue(‘_rand2’, rand2);

Lines 1 and 2 grab the values for the variables in Captivate _rangeBottom and _rangeTop, which start by default at 1 and 10 but that the learner can change at any time. It places them into two new declared I declared called lowNum and highNum.

Lines 3 and 4 each calculate a random integer within the defined range and puts them into the variables I declared called rand1 and rand2.

Lines 5 and 6 then put the random integer values into the Captivate variables called ­_rand1 and _rand2.

Pretty simple, right?

Here is the JavaScript for Am I Right?

1. var rand1 = window.cpAPIInterface.getVariableValue(‘_rand1’);
2. var rand2 = window.cpAPIInterface.getVariableValue(‘_rand2’);
3. var sum = window.cpAPIInterface.getVariableValue(‘_learnerAnswer’);
4. var sumFeedback;
5. var corrSum = rand1 + rand2;
6. if (sum == corrSum ) { sumFeedback = ‘That is correct!’; }
7. else { sumFeedback = ‘Sorry, the answer is ‘ + corrSum + ‘.’; }
8. cpAPIInterface.setVariableValue(‘_sumFeedback’, sumFeedback);

The first three lines grab the values for the variables in Captivate _rand1, _rand2 and _learnerAnswer and I place them into three variables I declare called rand1, rand2 and sum.

You might be wondering why we have to load the random values from Captivate. Wouldn’t it remember the values for the JavaScript variables rand1 and rand2 from the script we attached to Show Me a Problem? Didn’t I declare the JavaScript variables rand1 and rand2 in that script?

Yes, that is true, but there’s no guarantee that the learner will click the Show Me a Problem button first, so that script may not execute before the learner attempts to answer the first problem.

In fact, I set the starting values for the Captivate variables I created, _rangeBottom and _rangeTop, to 1 and 10 so that those two fields won’t start out empty. This means the learner could attempt to answer the problem 1 + 10 before entering new values and pressing Show Me a Problem. Therefore, I must declare them and load their values in this script in case the learner’s first step is to answer the problem on the screen, answering 1 + 10.

Line 4 declares the variable for our feedback.

Line 5 declares the variable corrSum and immediately sets it to be the addition of my two random numbers.

Lines 6 and 7 then checks whether the learner’s answer (sum) is equal to the value we just calculated (corrSum). If so, I set the feedback variable to That is correct! If not, we set it to Sorry, the answer is followed by the correct answer and a period.

Finally, Line 8 puts the value of our feedback variable into the Captivate variable _sumFeedback.

Let me know if you have any questions.