Hi,
I'm developing scorm based project, I've to play the scorm 2004 packages. courses are playing and capturing the data working properly with the using of LMS functions(LMSFinish(), commit()..etc). Now I've to implement one more function i.e RESUME the package where user left last time.
Sample cmi data
scoid:"1234"
data[cmi.completion_status]:"incomplete"
data[cmi.exit]:"suspend"
data[cmi.location]:"page3"
Hope you help.
Commonly 'cmi.suspend_data' is used so you can store a string (JSON, or other delimiter format if you want or need structure) to resume answers.
'cmi.location' has 1000 characters for you to also store a string and it can be as simple as "3" or "page3" as you have it.
Your navigation in your content presentation/player would need to be able to respond to having a location to go to. And you can use the suspend_data to put student answers back the way they were when they left.
How you decide if you are 'resuming' is a little tricky since anything except 'cmi.entry' = 'ab-initio' is a resume. Some LMS systems return blank or 'resume' so then you know to fetch your 'cmi.location' and 'cmi.suspend_data' if you use it.
This is all code you have to write, or you can read up a bit on my Wiki.
https://github.com/cybercussion/SCOBot/wiki.
I had some workaround for resume and is working for me . I saved suspended_data and then retrieved that data so player resumed for that position .
#kishor-koshti
How did you do that, I mean, tell the player to resume from a given position?
I'm being able to capture the suspended_data but I don't know how to set it back the next time I launch that course.
The API object that I have on javascript seems to be read only.
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<style>
body { margin: 0; }
</style>
<script type="text/javascript">
var API = {};
function setupScormApi() {
API.LMSInitialize = LMSInitialize;
API.LMSGetValue = LMSGetValue;
API.LMSSetValue = LMSSetValue;
API.LMSCommit = LMSCommit;
API.LMSFinish = LMSFinish;
API.LMSGetLastError = LMSGetLastError;
API.LMSGetDiagnostic = LMSGetDiagnostic;
API.LMSGetErrorString = LMSGetErrorString;
}
function LMSInitialize(initializeInput) {
console.log("LMSInitialize: " + initializeInput);
// invokeCSharp("LMSInitialize: " + initializeInput);
return true;
}
function LMSGetValue(varname) {
console.log("LMSGetValue: " + varname);
//invokeCSharp("LMSGetValue: " + varname);
return "";
}
function LMSSetValue(varname, varvalue) {
console.log("LMSSetValue: " + varname + "=" + varvalue);
// invokeCSharp("LMSSetValue: " + varname + "=" + varvalue);
return "";
}
function LMSCommit(commitInput) {
console.log("LMSCommit: " + commitInput);
// invokeCSharp("LMSCommit: " + commitInput);
return true;
}
function LMSFinish(finishInput) {
console.log("LMSFinish: " + finishInput);
// invokeCSharp("LMSFinish: " + finishInput);
return true;
}
function LMSGetLastError() {
console.log("LMSGetLastError: ");
// invokeCSharp("LMSGetLastError: ");
return 0;
}
function LMSGetDiagnostic(errorCode) {
console.log("LMSGetDiagnostic: " + errorCode);
// invokeCSharp("LMSGetDiagnostic: " + errorCode);
return "";
}
function LMSGetErrorString(errorCode) {
console.log("LMSGetErrorString: " + errorCode);
// invokeCSharp("LMSGetErrorString: " + errorCode);
return "";
}
setupScormApi();
</script>
<iframe id="frm1" src="./Content/index_lms.html" style="width: 100%; height: 100%"></iframe>
</body>
</html>
Exec solution by Mehonder
// story_content/user.js
let lastSlideLoaded = ''; //global variable
function Script1() {
if (lastSlideLoaded == '') {
lastSlideLoaded = 'X';
var ACT_firstID = window.globals.parsedParams["last_slide"]; //URL Argument
if (!ACT_firstID == (null || "" || "0")) {
Jump_Slide(ACT_firstID); //Set Slide
}
} else {
SetLastSlide();
}
}
function SetLastSlide() {
// send to last slide info to server//
var xhttp = new XMLHttpRequest();
var PACKID = window.globals.parsedParams["pack_id"];
var LASTID = window.DS.presentation.playerProps.attributes.CurrentSlideId;
var lastSlideURL = "/services_index.php?page=last_slide&pack_id=" + PACKID + "&last_slide=" + LASTID;
xhttp.open('GET', lastSlideURL, true);
xhttp.send();
}
function Jump_Slide(Target_Slide) {
// trigger slide change event //
g = DS.pubSub;
p = DS.events;
i = "_player." + Target_Slide;
g.trigger(p.request.NEXT_SLIDE, i, "_current")
}
Related
Here is my Html Full File:
Index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Evolution Idle Game</title>
<link rel="stylesheet" href="idlescreen.css">
</head>
<body>
<p id="EvolPoints" class="evol-points">0 EvolutionPoints</p>
<button onclick="Upgrade()">Click to Upgrade</button>
<button onclick="BuyPointsPerClick()" id="perClickUpgrade" >Click to Start Automation</button>
<script src="main.js" charset="utf-8" type="text/javascript"></script>
</body>
</html>
Here is my full Javascript File:
Main.js
var gameData = {
Points: 0,
PointsPerClick: 1,
PointsPerClickCost: 10
}
const perClickUpgrade = document.getElementById("perClickUpgrade");
perClickUpgrade.addEventListener("click", function handleClick() {
perClickUpgrade.textContent = "Upgrade Evolution Level (Currently Level " + gameData.PointsPerClick + ") Cost: " + gameData.PointsPerClickCost + " Points";
});
function Upgrade() {
gameData.Points += gameData.PointsPerClick
document.getElementById("EvolPoints").innerHTML = gameData.Points + " Evolution Points"
}
function BuyPointsPerClick() {
if (gameData.Points >= gameData.PointsPerClickCost) {
gameData.Points-= gameData.PointsPerClickCost
gameData.PointsPerClick += 1
gameData.PointsPerClickCost *= 2
document.getElementById("EvolPoints").innerHTML = gameData.Points + " Evolution Points"
document.getElementById("perClickUpgrade").innerHTML = "Upgrade Evol Level (Currently Level " + gameData.PointsPerClick + ") Cost: " + gameData.PointsPerClickCost + " Points"
}
var mainGameLoop = window.setInterval(function() {
Upgrade()
}, 1000)
I have tried setting Points >= 10 and using various functions, but the functions do not run when the points get to ten or above. I appreciate any help! Re-posted to provide full code and hopefully a better explanation.
One example function that I have done as a test and added on is (which did not activate during program run):
function LevelTen() {
if (gameData.Points >= 10 ) {
alert("This is an alert message box."); // display string message
}
I've also added the variable LevelTen which equals ten (to avoid setting the comparison to an integer incase that was the problem). This is the alternative function, which also did not work.
function LevelTen() {
if (gameData.LevelTen <= gameData.PointsPerClick) {
alert("This is an alert message box."); // display string message
}
}
Thank you again!
I am trying to print objects from an API using JSON and AJAX and it works when I use console.log to view it. But my generateCreatureDiv function does not work for some reasons.
This is my code:
$(document).ready(function() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = this.responseText;
var creatureData = JSON.parse(response);
console.log(creatureData);
// get a creature from the data
for (var i = 0; i < creatureData.creatures.length; i++) {
var creature = creatureData.creatures;
console.log(creature[i]);
document.getElementById("CreatureEntry").innerHTML = generateCreatureDiv(creature[i]);
}
function generateCreatureDiv(creature) {
var CreatureDiv = $("<div />");
console.log("hoe");
CreatureDiv.id = "CreatureInfo";
console.log("hoe")
$("CreatureDiv").append("<h1>" + creature.name + "</h1>");
console.log("hoe");
$("CreatureDiv").append("<img>" + creature.image + "</img>");
return CreatureDiv;
console.log("hoe");
}
// create a select option for the object
// Have a
}
};
xhttp.open("GET", "https://api.myjson.com/bins/17f3jl", true);
xhttp.send();
});
<!DOCTYPE html>
<html>
<head>
<script src="./jquery-3.1.1.min.js"></script>
<script src="./script.js"></script>
<script src="./stylesheet.css"></script>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="CreatureEntry">
<select id="SelectOption">
</select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
remove the " quotes in $("CreatureDiv") .Its not select with any ID or Class.And on your code Already declare with var CreatureDiv = $("<div />"); .So change as like this
function generateCreatureDiv(creature) {
var CreatureDiv = $("<div />");
console.log("hoe");
CreatureDiv.id = "CreatureInfo";
console.log("hoe")
$(CreatureDiv).append("<h1>" + creature.name + "</h1>");
console.log("hoe");
$(CreatureDiv).append("<img>" + creature.image + "</img>");
return CreatureDiv;
console.log("hoe");
}
And change like this
document.getElementById("CreatureEntry").innerHTML += generateCreatureDiv(creature[i]);
instead of
document.getElementById("CreatureEntry").innerHTML = generateCreatureDiv(creature[i]);
Because innerHTML =generateCreatureDiv(creature[i]); it will reset previous value on each time call
This line is erasing all of the content of your DIV for each element of your array:
document.getElementById("CreatureEntry").innerHTML = generateCreatureDiv(creature[i]);
Remove the first part and just call your method and append the results?
$("CreatureEntry").append(generateCreatureDiv(creature[i]));
Also, you need to remove the quotes wherever you're referencing $("CreatureDiv") and use $(CreatureDiv).
I have a PHP script hosted in the root of a working LAMP server which provides me with the output of a MySQL query. The typical output of values.php:
2017-01-12 22:02:17/12/2017-01-12 22:03:18/12/2017-01-12
22:04:18/12/2017-01-12 22:05:18/12/2017-01-12 22:06:18/12/2017-01-12
22:07:19/12/2017-01-12 22:08:19/12/2017-01-12 22:09:19/12/2017-01-12
22:10:20/12/2017-01-12 22:11:20/12/2017-01-12 22:12:20/12/2017-01-12
22:13:21/12/2017-01-12 22:14:21/12/2017-01-12 22:15:21/12/2017-01-12
22:16:21/12/2017-01-12 22:17:22/12/2017-01-12 22:18:22/11/2017-01-12
22:19:22/11/2017-01-12 22:20:23/12/2017-01-12 22:21:23/11/2017-01-12
22:22:23/11/2017-01-12 22:23:24/11/2017-01-12 22:24:24/11/2017-01-12
22:25:24/11/2017-01-12 22:26:25/11/2017-01-12 22:27:25/11/2017-01-12
22:28:25/11
I am trying to use $.get to break it up and list it on a page. My code is as follows but it won't work:
<!DOCTYPE html>
<html>
<body>
<script>
function() {
var switch1 = true;
$.get('values.php', function(data) {
data = data.split('/');
for (var i in data)
{
if (switch1 == true)
{
document.write(data[i] + " Temp: ");
switch1 = false;
}
else
{
document.writeln(data[i]);
switch1 = true;
}
}
});
};
</script>
</body>
</html>
Any ideas where I am going wrong?
I should have added the code <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> in the html. Final code is as follows and works fine:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<script>
var switch1 = true;
$.get('values.php', function(data) {
data = data.split('/');
for (var i in data)
{
if (switch1 == true)
{
document.write(data[i] + " Temp: ");
switch1 = false;
}
else
{
document.write(data[i] + "<br>");
switch1 = true;
}
}
});
</script>
</body>
</html>
Thanks to all.
I don't know what your PHP script actually returns but if I store manually to data it seems to work the way you expected. Can you explain what exactly does not work?
I would shorten code bit though:
var switch1 = true;
var data = "2017-01-12 22:02:17/12/2017-01-12 22:03:18/12/2017-01-12 22:04:18/12/2017-01-12 22:05:18/12/2017-01-12 22:06:18/12/2017-01-12 22:07:19/12/2017-01-12 22:08:19/12/2017-01-12 22:09:19/12/2017-01-12 22:10:20/12/2017-01-12 22:11:20/12/2017-01-12 22:12:20/12/2017-01-12 22:13:21/12/2017-01-12 22:14:21/12/2017-01-12 22:15:21/12/2017-01-12 22:16:21/12/2017-01-12 22:17:22/12/2017-01-12 22:18:22/11/2017-01-12 22:19:22/11/2017-01-12 22:20:23/12/2017-01-12 22:21:23/11/2017-01-12 22:22:23/11/2017-01-12 22:23:24/11/2017-01-12 22:24:24/11/2017-01-12 22:25:24/11/2017-01-12 22:26:25/11/2017-01-12 22:27:25/11/2017-01-12 22:28:25/11"
data = data.split('/').map(function(i){
document.write(i + (switch1 ? " Temp: " : ""));
switch1 = !switch1;
});
Give this a try, should do what you are looking for...
var content = "2017-01-12 22:02:17/12/2017-01-12 22:03:18/12/2017-01-12 22:04:18/12/2017-01-12 22:05:18/12/2017-01-12 22:06:18/12/2017-01-12 22:07:19/12/2017-01-12 22:08:19/12/2017-01-12 22:09:19/12/2017-01-12 22:10:20/12/2017-01-12 22:11:20/12/2017-01-12 22:12:20/12/2017-01-12 22:13:21/12/2017-01-12 22:14:21/12/2017-01-12 22:15:21/12/2017-01-12 22:16:21/12/2017-01-12 22:17:22/12/2017-01-12 22:18:22/11/2017-01-12 22:19:22/11/2017-01-12 22:20:23/12/2017-01-12 22:21:23/11/2017-01-12 22:22:23/11/2017-01-12 22:23:24/11/2017-01-12 22:24:24/11/2017-01-12 22:25:24/11/2017-01-12 22:26:25/11/2017-01-12 22:27:25/11/2017-01-12 22:28:25/11";
var regexp = /(\d{4}-\d{2}-\d{2}\s+\d{2}:\d{2}:\d{2})\/(\d{2})/g;
var matches;
while ( matches = regexp.exec( content ) ) {
document.write( matches[1] + " Temp: " + matches[2] + "<br/>");
}
Hope this helps!
This is probably a silly question but why do I lose all the formatting when the function test() starts? What should I change in my code? I would really appreciate your help!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
background: #E6E6FA;
font-family: book antiqua;
}
h1, h2 {
color: grey;
}
</style>
</head>
<h3>Title</h3>
<body bgcolor="#E6E6FA">
<input type="text" id="userInput"></input>
<button onclick="test()">Submit</button>
<p id="Demo"></p>
<p id="Beg"></p>
<p id="Fin"></p>
<script>
function test()
{
var nam= document.getElementById("userInput").value;
var l = nam.length;
var pocz = nam.slice(0,1);
var kon = nam.slice(-1);
document.getElementById("Demo").innerHTML = document.write("Your secret code: " + l + pocz + kon);
var one = nam.slice(-1)
if (one == "a") {
document.write(nam.slice(0,-1) + "bbb");
} else {
document.write(nam + "ccc");
}
}
</script>
</body>
</html>
If document.write is called after the DOM loaded, it replaces the document. Also you are using document.write incorrectly, it doesn't return anything. Just omit it and it will work fine.
document.getElementById("Demo").innerHTML = "Your secret code: " + l + pocz + kon;
For the other uses, do the same thing and assign the value to an element via innerHTML.
Please read the documentation before you use an unfamiliar function.
Never use document.write. Ever. Just don't use it. It is completely antiquated.
Felix Kling's answer will work for the first part, since you are assigning html to an element directly. but the later calls are adding more content to the document, not replacing content, so you must append new content to the document, or make another placeholder (like demo). here is how to do it with appending new content:
function test()
{
var nam= document.getElementById("userInput").value;
var l = nam.length;
var pocz = nam.slice(0,1);
var kon = nam.slice(-1);
document.getElementById("Demo").innerHTML = "Your secret code: " + l + pocz + kon;
var one = nam.slice(-1);
if (document.getElementsByClassName("spantext").length===0)
{
var text=document.createElement("span");
text.setAttribute("class","spantext");
document.getElementsByTagName("body")[0].appendChild(text);
}
else {
var text=document.getElementsByClassName("spantext")[0];
}
if (one == "a") {
text.innerHTML=nam.slice(0,-1) + "bbb";
} else {
text.innerHTML=nam + "ccc";
}
}
fiddle
First Post on Stackoverflow so bear with me please.
I have a JQMobile web app that is generating dynamic audio file links via JSON and appending the audio player per id. I am trying to hide the player when a src is not found.
The php/mysql/jqm scripting is working, I just cannot seem to get the if/else portion it always shows the player empty or not.
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<script type="text/javascript">
var serviceURL = "http://localhost/Apps/services/";
$(document).on('pageshow', '#detailsPage', function(event) {
var id = getUrlVars()["id"];
$.getJSON(serviceURL + 'getartist.php?id='+id, displayArtist);
});
function displayArtist(data) {
var artistDetVal = data.item;
console.log(artistDetVal);
$('#artistDetPic').attr('src', 'pics/lg/' + artistDetVal.picture);
$('#fullName').text(artistDetVal.firstName + ' ' + artistDetVal.lastName);
$('#artistDetTitle').text(artistDetVal.bio);
$('#city').text(artistDetVal.city);
$('#audioBio').attr('src', 'audio/' + artistDetVal.audio) .detach().appendTo($("#audioPlayer"));
}
function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
</script>
<body>
<script type="text/javascript">
$(document).ready(function(){
function displayArtist(data) {
var artistDetVal = data.item;
$('#audioBio').text(artistDetVal.audio);
if (artistDetVal.audio>0) {
$("#audioPlayer").show();
}
else {
$("#audioPlayer").hide();
}
}
});
</script>
<audio id="audioPlayer" controls="controls"><source id="audioBio" src=""/></audio>
</body>
</html>
It seems as if your function displayArtist is being declared twice which is a "no-no". Also, the second declaration, which is the one which controls whether to show or hide the player, is never called.
Try putting the logic for showing/hiding the player in your first instance of displayArtist and removing the duplicate altogether.
function displayArtist(data) {
var artistDetVal = data.item;
console.log(artistDetVal);
$('#artistDetPic').attr('src', 'pics/lg/' + artistDetVal.picture);
$('#fullName').text(artistDetVal.firstName + ' ' + artistDetVal.lastName);
$('#artistDetTitle').text(artistDetVal.bio);
$('#city').text(artistDetVal.city);
$('#audioBio').attr('src', 'audio/' + artistDetVal.audio).detach().appendTo($("#audioPlayer"));
$('#audioBio').text(artistDetVal.audio);
if (artistDetVal.audio>0) {
$("#audioPlayer").show();
}
else {
$("#audioPlayer").hide();
}
}
Also, if artistDetVal.audio is a string you may want to use the condition if(artistDetVal.audio.length > 0)