💥Using this super power
In order to use this, you must understand how to call a Javascript function from within your authoring tool (Storyline, Captivate, etc). Please do not contact support for instructions on how to do this from within your tool. What is being provided here is a way for your multimedia lesson html to be able to issue a Javascript message to a snippet of code from plaYEAH! that will be listening for certain messages to perform operations like hiding or clicking the complete and continue button.
STEP 1: Add this code to Site Footer Code section on your Thinkific site.
This will enable the course player to receive Javascript messages from your multimedia lesson/
<!-- plaYEAH! Magic Multimedia Lesson --><script src="https://cdn.jsdelivr.net/gh/robgalvinco/[email protected]/playeah/event-manager.min.js"></script>
STEP 2: Add this code to your HTML that you are importing into the Multimedia lesson
You should place this code snippet in the <HEAD> section above other scripts.
This will expose functions that can be called from your HTML/Javascript.
<script>
function hide_cc() {
/* hide thinkific course player complete and continue button*/
window.parent.postMessage('hide_complete', '*');
}
function show_cc() {
/* show thinkific course player complete and continue button*/
window.parent.postMessage('show_complete', '*');
}
function click_cc() {
/* click thinkific course player complete and continue button*/
window.parent.postMessage('click_complete', '*');
}
function click_ic() {
/* click thinkific course player mark incomplete button*/
window.parent.postMessage('click_incomplete', '*');
}
function hide_tcp() {
/* hide thinkific course player sidenav */
window.parent.postMessage('hide_tcp_chapters', '*');
}
function show_tcp() {
/* shows thinkific course player sidenav */
window.parent.postMessage('show_tcp_chapters', '*');
}
</script>
STEP 3: Call the functions above when you want to trigger them
This part you will need to figure out depending on the platform you are using. Essentially you will have to call the corresponding Javascript functions when you want to control things pm the course player
Try a sample
- 💥Download a sample ZIP file
- 💥Create a multimedia lesson and import this zip file
- 💥Click the buttons in the HTML lesson to see how the course player responds
<html>
<head>
<script>
function hide_cc() {
/* hide thinkific course player complete and continue button*/
window.parent.postMessage('hide_complete', '*');
}
function show_cc() {
/* show thinkific course player complete and continue button*/
window.parent.postMessage('show_complete', '*');
}
function click_cc() {
/* click thinkific course player complete and continue button*/
window.parent.postMessage('click_complete', '*');
}
function click_ic() {
/* click thinkific course player mark incomplete button*/
window.parent.postMessage('click_incomplete', '*');
}
function hide_tcp() {
/* hide thinkific course player sidenav */
window.parent.postMessage('hide_tcp_chapters', '*');
}
function show_tcp() {
/* shows thinkific course player sidenav */
window.parent.postMessage('show_tcp_chapters', '*');
}
</script>
</head>
<body>
<h1> Multimedia Lesson Sample </h1>
<p> Controlling the complete and continue button, great for SCORM/Captivate based lessons</body>
<div><button onclick="hide_cc()">Hide Completed and continue button</button></div>
<div></div><button onclick="show_cc()">Show Completed and continue button</button></div>
<div></div><button onclick="click_cc()">Click Completed and continue button</button></div>
<div></div><button onclick="click_ic()">Click Mark Incompleted button</button></div>
<div></div><button onclick="hide_tcp()">Hide course player nav</button></div>
<div></div><button onclick="show_tcp()">Show course player nav</button></div>
</body>
</html>