Random Math Cards in Captivate

March 29, 2020

Phil Cowcill Follow

(5)

Comments

(11)

March 29, 2020

Random Math Cards in Captivate

Phil Cowcill Follow

(5)

(11)

(5)

Summary

Using some simple JavaScript within Captivate, you can randomly generate numbers to create Math flash cards to help participants learn their basic math skills. However, subtraction and division can cause problems with negative numbers or decimal points. Learn how to over come these issues.

When I started full-time teaching in 1995, I would teach my students how to create an app that would randomly generate math cards to help participants practice the basics addition, subtraction, multiplication and division. This exercise is an excellent way to learn some coding and logic all the while creating an app that can be used in a variety of places. When I first taught this, we used tools like Authorware, Director, Flash (Animate) and I’ve even made a web version of this app. However, I have not made a Captivate version of this app. So, here is a sample of what it looks like in Captivate. I do use an animation from Adobe Animate to flip the cards over. However, all the work is done inside of Captivate.

Take a look and see what you think.

Video Player

Media error: Format(s) not supported or source(s) not found

Download File: https://elearningimages.adobe.com/files/2020/03/Math-Flash-Cards-Final_Small.mp4?_=1

00:00

Use Up/Down Arrow keys to increase or decrease volume.

Animation

blog

captivate variables

displaying variables

(5)

Comments

(11)

Phil Cowcill Follow

I've been developing eLearning in a variety of formats since 1983

11 Comments

farukerdogan

May 13, 2020

farukerdogan

May 13, 2020

An other great sharing. Thank you!

(1)

jsv1

Mar 30, 2020

jsv1

Mar 30, 2020

Phil Cowcill love these tutorials of yours. This is on my to do list for things to attempt this week. Appreciate you sharing this with the rest of us.

(2)

(1)

Lieve Weymeis

Mar 30, 2020

Lieve Weymeis

Mar 30, 2020

It is a while ago, but I explained step by step generating a random number with JS in two blog posts:

http://blog.lilybiri.com/playing-with-numbers-part-1

There is a second post as well.

()

(1)

Ludovic Mercier

Mar 30, 2020

Ludovic Mercier

Mar 30, 2020

…

Hi Paul !… Why did you shave your hair ???…

(Just a joke Phil !… Hope you don’t mind… but I can’t help doing it… )

I just finished to look at your videos posted this morning (and didn’t miss the others you already share by the way)… So BIG thank you !!!!… And I hope you will become another “ressource man” in this community !… Especially in Javascript, which I think is laking (don’t worry Greg I didn’t forget you !…) with this program.

But… If I may…

1./ Can you speak a little slowly ?… I’m french… And I assume I’m not the only non-native english speaker here…

2./ It would be nice of you also to share with us, in the text, the Javascript code you use in your demo ?…

Thanks again !…

And stay safe !…

😉

…

(1)

(4)

Phil Cowcill

Ludovic Mercier

's comment

Mar 30, 2020

Phil Cowcill

Mar 30, 2020

Ludovic Mercier

's comment

Thank you Ludovic for your comments. I do appreciate the comment about slowing down. I speak one way when I’m teaching and a different way when in conversation. This video was recorded as if I was in a conversation. I will slow down the pace of my talk in my next video.

As for the JavaScript code, here is what I had for the addition.
var ans = 0;

var card1Num = getRandom(randMax, randMin );
var card2Num = getRandom(randMax, randMin );
console.log(“Max = ” + randMax + “, Min = ” + randMin);

// save random value to Captivate variable card1 & card2.
// card1 & card2 are the variables read into the flip card animation

window.cpAPIInterface.setVariableValue(“card1”, card1Num);
window.cpAPIInterface.setVariableValue(“card2”, card2Num);

ans = card1Num + card2Num;
window.cpAPIInterface.setVariableValue(“theAnswer”, ans);

function getRandom(max, min) {
return Math.floor(Math.random() * (max – min) + min);
}
In the Subtraction, here is the code.
var d1 = 0;
var d2 = 0;
var ans = 0;

d1 = window.cpAPIInterface.getVariableValue(“randMax”);
d2 = window.cpAPIInterface.getVariableValue(“randMin”);

var card2Num = getRandom(d1, d2);
var ans = getRandom(d1, d2);

var card1Num = card2Num + ans;

window.cpAPIInterface.setVariableValue(“card1”, card1Num);
window.cpAPIInterface.setVariableValue(“card2”, card2Num);

window.cpAPIInterface.setVariableValue(“theAnswer”, ans);

It’s a little different than the addition because I was doing some experimenting. It does work well though.

(1)

Ludovic Mercier

Phil Cowcill

's comment

Mar 30, 2020

Ludovic Mercier

Mar 30, 2020

Phil Cowcill

's comment

Another BIG thank you so !…

I try to collect all the coding in Javascript I found here or on the forum… Being myself not an expert on this langage… I used to work in Actionscript (with Flash) but as the Latin, it will soon be a dead one…

Hope to see (and hear) you soon !…

😉

(1)

Phil Cowcill

Ludovic Mercier

's comment

Mar 30, 2020

Phil Cowcill

Mar 30, 2020

Ludovic Mercier

's comment

I still use Animate (Flash) a fair bit. I use it to create HTML5 animations used in Captivate. I also use it to create mobile apps for iOS and Android. If you optimize your code, it works very well and you can build apps very quickly for both platforms.

()

Greg Stager

Ludovic Mercier

's comment

Mar 30, 2020

Greg Stager

Mar 30, 2020

Ludovic Mercier

's comment

Thanks for the shout out, Ludovic!

Nice Job, Phil.
I admit to feeling a bit inspired to do more walkthru videos of some JavaScript now.

(2)

Add Comment

You must be logged in to post a comment.