Example
500th Challenge Milestone: A Special Bonus Entry
As we celebrate reaching the incredible milestone of 500 challenges, I wanted to create something special as a bonus entry. This project represents a celebration of our journey here at E-Learning Heroes and a useful resource for the e-learning community.
This post doesn't fall under "Interactive Comparisons in E-Learning" but is instead a special creation to mark our 500th milestone. I want to thank DavidAnderson for his consistency and motivation throughout this journey - your challenges have pushed us all to grow as e-learning professionals!
About the Project
"500 E-Learning Tips at Your Fingertips" is an interactive collection of 500 unique e-learning tips. Clicking anywhere on the image reveals a random tip from this comprehensive knowledge base. The best feature of this interactive is the ability to save your favorite tips with a simple heart icon click and export them to PDF for future reference or sharing with colleagues.
Implementation
This interactive experience was implemented using JavaScript. The core of the project is an array of 500 carefully curated e-learning tips covering instructional design, accessibility, engagement strategies, and assessment techniques.
The system uses localStorage to track which tips have been viewed, ensuring users see all 500 tips before any repeats occur. The favorites functionality allows users to build their own personalized collection of tips that can be printed in a clean, professional format.
What makes this project special to me is that it combines practical utility with a celebration of our community's collective knowledge. Each tip represents a small but valuable insight that can improve our e-learning creations.
I hope you find these tips both inspiring and practically useful in your own e-learning journey!
About Me
Curious about more e-learning innovations? Connect with me on LinkedIn to share ideas, discuss implementation techniques, or simply chat about instructional design challenges.
I'm always looking to expand my network of creative e-learning professionals! Let's connect and inspire each other with new approaches to engaging, effective learning experiences.
2 Replies
- nyanaaCommunity Member
https://easyupload.io/o38kv1
add attachemnt but i cant see. Uploaded this- SamHillSuper Hero
Hi nyanaa I don't understand why you are using Storyline to wrap this content? I would get rid of Storyline and just get yourself a SCORM wrapper, such as the https://github.com/pipwerks/scorm-api-wrapper.
If you want the content to scale, Storyline just uses a CSS transform to scale the content, and so you could do the same with JavaScript to ensure the content fills the browser and shrinks with it when resized.
I think including Storyline is unnecessary as you are not leveraging anything from Storyline.
If you want to continue with your set-up, you just need to start adding some debug into the LMS integration script so you can determine whether the content is finding the API. Just start outputting everything to the console.log. As an example:
function findSCORMAPI() { var win = window; var findAttempts = 0; var maxAttempts = 10; // Önce SCORM 1.2 API'sini ara while (win && findAttempts < maxAttempts) { findAttempts++; // SCORM 1.2 API'si if (win.API) { console.log("Found the SCORM 1.2 API"); return win.API; } // SCORM 2004 API'si if (win.API_1484_11) { console.log("Found the SCORM 2004 API"); return win.API_1484_11; } // Üst pencereye geç if (win.parent && win.parent !== win) { win = win.parent; } else { break; } } console.error("Could not find the SCORM API"); return null; }
Rather than looking for the LMS API, the Storyline published content will already do that for you, so all you really need to do, is leverage the Storyline SCORM communications instead, but because the WebObject is inserted via an iframe, you will need to call any function/object in Storyline using "parent."
For example, when you do this:
var player = GetPlayer();
You should be doing this:
// Get the player from the parent frame var player = parent.GetPlayer();
You can also check the scormdriver.js file for SCORM API functions that you can call. Storyline SCORM functions will determine if the API is SCORM 2004, or 1.2 so you don't need to make that decision.
So calling something like this:
parent.SCORM_SetScore(intScore, intMaxScore, intMinScore);
Storyline will then check the API, and call the appropriate SCORM API function.
Also, your script looks for both the SCORM 1.2 API and SCORM 2004 API, however, your script only includes the correct methods for SCORM 1.2 API. Therefore, if the SCORM 2004 API is found, the script will fail. For a start, the method names changed from LMSSetValue in SCORM 1.2 to SetValue in SCORM 2004.
In a nutshell, whenever you are calling a function/object in Storyline, for example getting a reference to the player, ensure you precede with "parent."
There is quite a lot wrong with the script, and it needs quite a bit of work to fix up. But if you continue with it, first add lots of console.log output so you can see where it is failing.
- nyanaaCommunity Member
''If you want the content to scale, Storyline just uses a CSS transform to scale the content, and so you could do the same with JavaScript to ensure the content fills the browser and shrinks with it when resized.''
Do you have any recommendations or suggested resources for JavaScript? Could you share a guide on how I can learn it? Thank you very much in advance for your help
- nyanaaCommunity Member
Actually, I don't want to generate two separate SCORM packages. Here's what I'm trying to achieve:
I'm having issues with mobile scaling when preparing my HTML project. To solve this, I embed the HTML project as a Web Object inside Articulate Storyline and publish it. This way, the desktop layout appears correctly on mobile as well — just the way I want it.
However, after publishing from Storyline, the SCORM functionality inside my HTML project no longer works. Although the layout is displayed properly, the SCORM tracking doesn't function.
Attached, you will find both the Storyline project and the HTML project.
I'm not trying to generate two SCORM packages — what I want is for the SCORM functionality in my HTML project to still work after being published from Storyline.Thank you for your help!
- SamHillSuper Hero
Hi nyanaa you will run into issues with this. For example, if the Storyline course, that is hosting the SCORM content in a WebObject, is published as SCORM, you will have two separate pieces of content trying to use the same SCORM API and the same SCORM data model elements.
Are you able to provide any further information on the content you are including in the WebObject? Can you confirm which SCORM data model elements it is using? You will have to be sure that the two pieces of content are not using the same data. For example, if your main content writes a score, and then the content in the WebObject writes a score, they are writing to the same score and will conflict.
It is possible to integrate a piece of content using a WebObject that does use the SCORM API, but you really have to know SCORM well and be sure that there are no conflicts of data.