Video: Using Firestore with Adobe Captivate — Create Your Own LMS
Listen to a 20 minute screen share where the developers discuss creating a mini LMS (Learning Management System) using Adobe Captivate and Google Firestore.
Transcript:
File Name: Integrating Firestore with Adobe Captivate.mp4
File Length: 00:17:34
FULL TRANSCRIPT (with timecode)
00:00:00:06 - 00:00:04:06
All right, so this is our little LMS that we made
00:00:06:01 - 00:00:10:08
that works with a Firestore database and
00:00:11:20 - 00:00:14:12
Google Auth.
00:00:14:17 - 00:00:16:17
I'm going to sign in and create a new account.
00:00:22:12 - 00:00:35:18
It's going to bring up my accounts. Choose one.
00:00:35:20 - 00:00:40:07
And that just created an account at our LMS, we have three
00:00:42:02 - 00:00:58:04
modules here. This one and this one are actually one captivate file that picks up. At a certain point, this is a separate captivate file, so pre-test and post-test are one captivate file. This is a second Captivate file.
00:01:00:06 - 00:01:07:19
I'm gonna click on pre-test here. One thing you might have noticed was post-test was cleared out because they hadn't taken the pretests.
00:01:09:10 - 00:01:12:17
So this is the beginning of the Pre-test here.
00:01:14:12 - 00:01:26:04
And I'm logged into Firestore. We can see that I'm on slide one of Adobe Captivate because we're storing Last side visited.
00:01:27:19 - 00:01:45:21
And you guys feel free to jump in here and add in anything that I'm forgetting or should be mentioned like ... Timothy, you had to populate this stuff with null to get these values to appear in the database before anything was clicked on, right?
00:01:47:06 - 00:02:04:05
Yeah, it's just setting up the user with the attributes that we want to store on that user record, which will be later populated by the values that are going to get passed from their answers inside the captivate module. And the last slide visited,
00:02:05:17 - 00:02:19:02
we do that. So if they don't complete the module and they log out the next time that they come back, we grab that last slide visited that we can just pop them right into the slide that they left off on.
00:02:19:21 - 00:02:22:03
So Grant is logging in here and he's going to
00:02:24:22 - 00:02:49:07
start the captivity module, I'll do a few clicks here and then go back to the database and you can watch it saving his values in real time. This is our Captivate module. It's set up with a pre-test which looks like this. If I drag my window down, you'll see that it's responsive design. And,
00:02:51:11 - 00:02:54:05
you can talk on and off your choices.
00:02:55:18 - 00:03:14:16
In this case, we're not telling people whether or not it was right or wrong, but sometimes we indicate whether or not it answers right or wrong right there with this dot, we might give them a green check or a red X in this case. We're not doing that. We're just going to ask people to submit. Their choice.
00:03:16:10 - 00:03:21:12
And then move on, this is another style screen.
00:03:25:04 - 00:03:37:06
So while Grant's getting set up, I'll make a few clicks, but this is all being stored in the fire store database in real time. So this is the anonymized user I.D., the Grant just mentioned and.
00:03:38:19 - 00:03:54:20
our database is showing that his last slide visited is 37, so if he leaves the course and comes back, it's going to pick up where he left off, and that's done through JavaScript. So I'm going to change this value to zero,
00:03:56:22 - 00:03:59:03
so that when he starts up the course again.
00:04:00:18 - 00:04:02:08
It will start at the beginning.
00:04:04:14 - 00:04:07:14
And so we can see his database here.
00:04:10:02 - 00:04:10:20
Right now, I'm
00:04:11:04 - 00:04:16:06
on slide zero, which is the begin button to enter the course.
00:04:18:09 - 00:04:20:20
And I just see that you fired and the answer.
00:04:22:10 - 00:04:28:08
So right now, I am just toggling on and off each of the answers, I'm not selecting anything.
00:04:29:08 - 00:04:30:09
Hmm. OK.
00:04:33:07 - 00:04:37:16
So each time it lights up red here on the left, I can see that Grant is clicking on the screen.
00:04:39:15 - 00:04:41:20
And now he just made a selection.
00:04:48:14 - 00:04:55:06
So on the second question, I got that correct. And the first question I got the incorrect.
00:04:56:13 - 00:04:58:24
So incorrect is zero, correct is one.
00:04:59:14 - 00:05:02:18
Yeah, and null is "has not answered yet".
00:05:04:12 - 00:05:07:12
And now I am into the forms.
00:05:18:10 - 00:05:20:03
And I'm typing in real time.
00:05:25:07 - 00:05:26:14
Inside of Captivate.
00:05:31:01 - 00:05:49:06
So that's one drawback to Captivate, it doesn't save your fill in the blanks forever. In this instance, it saves them forever. So if Grant comes back to the screen, he's going to see what he wrote. It will repopulate that in Adobe Captivate.
00:05:55:03 - 00:06:06:19
Well, I'm going to toggle over to my Captivate tab just to show just to record where you're at a little bit. So I'm going to hit submit.
00:06:09:14 - 00:06:16:15
On these, my data is being stored. In the Firestore database, just the way Grant's was.
00:06:22:03 - 00:06:23:09
This is a case study.
00:06:27:15 - 00:06:29:04
That the learning has to read.
00:06:32:19 - 00:06:39:04
And then they're going to continue to type their answer. So what you just saw populating the database was a Grant.
00:06:41:15 - 00:06:52:12
typing in this box. So this is the data that will be retained in the database forever and the user can come back and
00:06:54:09 - 00:07:00:04
they'll see their data populated here, whether or not they do it in a session or two weeks from now.
00:07:04:07 - 00:07:07:09
So I'm back now looking at Grant online.
00:07:09:04 - 00:07:10:02
And ...
00:07:11:16 - 00:07:15:04
He's continuing to type in the box in the second, fill in the blank.
00:07:27:04 - 00:07:28:23
And if we had 100 users
00:07:30:18 - 00:07:36:13
participating the same time, we see all of these users lighting up here and the users table.
00:07:39:08 - 00:07:45:04
I guess you don't really call it a table, but. In this user's column.
00:07:48:21 - 00:07:54:11
And we'd be able to monitor what is going on and, of course, in real time by looking here at
00:07:56:09 - 00:07:57:16
Firestore console.
00:08:02:13 - 00:08:09:10
So the variables inside Captivate are recorded in the FIREBASE database and then
00:08:11:08 - 00:08:16:15
obviously use those variables inside of Captivate to visually show indications
00:08:18:05 - 00:08:32:07
whether the users find it wrong or right, and in the case of these are getting the answer wrong, I guess, for any of these, but the user can actually go and read more about the specific question
00:08:33:21 - 00:08:36:18
and why or why not they got this right or wrong.
00:08:42:24 - 00:08:50:09
So we're not just writing values to the Firestore database, we're also reading them back. Into Captivate
00:08:51:16 - 00:08:54:04
to a
00:08:54:06 - 00:09:08:04
bidirectional communication between Firestore and Captivate where Captivate can emit values, which we can grab and store, and it can also read values that we give to it from Firestore.
00:09:09:22 - 00:09:13:23
Timothy, do you want to just explain that a little bit like how you did that,
00:09:16:08 - 00:09:18:24
just JavaScript and some of the
00:09:20:18 - 00:09:22:19
sort of built-In functions that
00:09:24:08 - 00:09:28:12
Captivate has? You can you can tell it to
00:09:30:06 - 00:09:48:22
emit when a value changes for a variable that's defined within captivate. And with the JavaScript, you have a listener that is waiting for that message to be emitted for that particular variable, any number of variables, it's not limited to one.
00:09:50:20 - 00:10:12:14
And so you just have listeners that are waiting for Captivate to say, hey, this variable changed. Here's the name of the variable. Here's its value. The JavaScript that's listening for that grabs it and pushes it into the user document, which we saw earlier in the fire Firebase Firestore console.
00:10:16:21 - 00:10:25:15
So menu takes us back to that's an age HTML page. That's our entry page in our little LMS that
00:10:25:17 - 00:10:35:22
we built. So we are now we can now look at the Firestore database and see that the pre-test was complete and now you can access the post-test.
00:10:38:14 - 00:10:43:23
Yes, we'll get some piece of functionality to mention there ...
00:10:44:01 - 00:10:48:02
because you're not you're not limited to just using Firestore database of interact with the
00:10:49:19 - 00:11:24:11
with the captivate modules. We've got another layer of HTML that can also read within the same application. For that menu page to provide information and functionality to to the user, That extends beyond just the captivate modules, and you could really go crazy with that if you wanted to. I mean, you could have analytics, you know, any sort of number of functionalities that you wanted to incorporate the data and Firestore or to present your outside of a captivate module.
00:11:24:13 - 00:11:25:16
You could you could do that.
00:11:27:18 - 00:12:05:10
This is another version of the same thing where we have an intro course. Three modules and of course, one. Three modules in course to two modules and of course, three, and this is another course, of course, four, and you can see that these are complete, but and this one's partially complete. We broke our Captivate modules into subtopics that have their own menus. And if you complete a third of the module, you get a little check, if you complete two thirds of the module, you'll get two of those.
00:12:05:23 - 00:12:41:02
So you did some pretty amazing work here to to look for very well, both of both Timothy and Grant set up the variables to check to see how much of the module has been completed and if one third or all of it or two thirds have been completed to give that information to the to the learner. So these are these are pretty involved Captivate modules. And this is a much more involved dashboard that shows a module complete part of the module complete where the whole course complete.
00:12:43:07 - 00:12:56:14
So one of the coolest features is how do we get the reporting to the client? I'm going to go back into the Firestore database and give myself admin privileges and we're going to see a whole new set of features appear here.
00:12:59:14 - 00:13:21:11
OK, so just logged back in to our little mini LMS and this project with one of my accounts, that is that admin user and these buttons appeared. This will download all those results in the database in a CSV file, for these two.
00:13:23:04 - 00:13:55:16
For this module that's broken into two sections, and then this one will download an additional CSF for this course, which we haven't talked about. So I just clicked on that. So I just downloaded the CSV and opened it up on my Mac and opened up on numbers, which is the Mac kind of spreadsheet tool, and all the information that was in the database is now in a spreadsheet and makes it really easy for us to see who's done what.
00:13:56:12 - 00:14:05:13
Timothy, do you want to explain a little bit about what you did here to get the Firestore stuff into a CSV download?
00:14:07:07 - 00:14:17:11
I yeah, that's that's just, again, sort of the extensibility that you have available to you when you have a data set.
00:14:19:13 - 00:14:27:17
And the CSV is is basically the JavaScript that's just grabbing as an admin, the user would have to be in had been to see those buttons
00:14:29:15 - 00:14:43:20
with the JavaScript is just grabbing all of those documents for for the users that are registered and have their information stored and in JavaScript still generating a CSV file
00:14:45:13 - 00:14:49:08
that gets downloaded through the action of clicking that button. So.
00:14:51:08 - 00:14:53:11
Kind of just maybe the most
00:14:54:24 - 00:15:07:24
I don't know if it's a rudimentary but certainly useful but fairly basic implementation of just one of many different utilities that you can sort of provide and customize
00:15:09:15 - 00:15:17:21
for clients that might need to understand the picture in a different way of what the users have completed and the progress that they're at.
00:15:18:08 - 00:15:54:01
Yeah, the context for this is that participants take a pre-test and they participate in a workshop and then they come back and take the post-test. And so the CSV makes it easy for the workshop administrators to figure out who's done what and how they did. Well, if anyone wants to know more about how he integrated Google Auth into this, they can just contact us through any of the contact tools where you see this tutorial using Google Auth helped us out a lot with all kinds of things.
00:15:55:02 - 00:16:15:24
As a matter of fact, today I did it and I hadn't logged on with my browser in a while. So Google sent me a text to authenticate with Two-Factor authentication just to make sure that I am who I say I am. So Google provides a lot of support for security and that that's what makes this nice.
00:16:19:16 - 00:16:22:09
Thanks, everyone, for watching on how we we incorporated a real
00:16:22:11 - 00:16:23:12
time database
00:16:24:02 - 00:16:54:02
into Adobe Captivate, how we saved variables into Firestore from Adobe, captivate how we read them back, how reading back those variables allowed us to do a number of things, create a dashboard, create show people what they've completed. Pick up where they left off. Allow people to remediate. Capture the data. Export that into a CSV file for our administrators to see what's going on.
00:16:55:24 - 00:17:14:06
Create really advanced authentication with a high level of security and hopefully create a good, easy, responsive design Adobe Captivate course that allows people to log into it without all the layers of a big fancy LMS getting in the way.
00:17:15:10 - 00:17:21:18
In future videos, I'd like to tell you a lot about how we incorporated some pretty advanced Google analytics techniques
00:17:22:06 - 00:17:33:22
for that type of reporting. I'd like to show you how we can build upon this for adaptive learning to apply custom learning experience to users based on their choices and their clicks. Thanks a lot.
