story_html5.html access variables via javascript
Jun 28, 2014
I have a project that prints a certificate likethis:
javascripton print certbutton:
var newWin=window.open('http://www.mywebsite.com/University/certificate.php',"_blank", "directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=820,height=610");
This certificate.php loads a background image and pulls variables from the player and displays them, it further submits the score to mysql via AJAX. It works flawlesslyon story.html but when using story_html5.html it doesn't work I can't understand why unless that this code works for flash and not on html5. How do i pull variables out of html5?
certificate.php:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<!-- saved from url=(0014)about:internet -->
<TITLE>Certificate</TITLE>
<STYLE>
.result {
position:absolute;
text-align: center;
left:440px;
top:300px;
width:360px;
font-family:Arial, Helvetica, sans-serif;
color:#61503B;
z-index:2;
}
.bgimage{
position:relative;
z-index:1;
}
</STYLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</HEAD>
<BODY>
<div class='bgimage'><img src='CertificateBG.png' width='800' height='600'/></div>
<!-- include jquery library file-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- The ajax/jquery stuff -->
<script type="text/javascript">
try {
var player=window.opener.GetPlayer();
} catch(e) {
alert('Error submitting to database contact an administrator -- Error #1 No Variables --' + StudentID);
}
//this grabs the player object from the parent (launching window)
var player=window.opener.GetPlayer();
//now we pull a field value. You can pull as many as you like. That replace jumble lets you bring over text fields with multiple lines.
var StudentID=player.GetVar("StudentID").replace(/(\r\n|\r|\n)/g, '<br />');
var CourseID=player.GetVar("CourseID").replace(/(\r\n|\r|\n)/g, '<br />');
var coursename=player.GetVar("CourseName").replace(/(\r\n|\r|\n)/g, '<br />');
var learnerName=player.GetVar("learner").replace(/(\r\n|\r|\n)/g, '<br />');
var score=player.GetVar("MyScore").replace(/(\r\n|\r|\n)/g, '<br />');
var currentDate = new Date()
var day = currentDate.getDate()
var month = currentDate.getMonth() + 1
var year = currentDate.getFullYear()
var todaydate = month + "/" + day + "/" + year;
document.write("<div class='result'><b>"+learnerName.replace('%20', ' ')+" </b><br> <br> has completed the course,<br><br> <b>" +coursename.replace('%20', ' ')+"</b><br/><br/><em>with a score of "+score.replace('%20', ' ')+" <br/><br/>"+todaydate+" </em> <br/><br/></div>");
//debugs
//document.write("<div class='studentid'>"+StudentID+"</div>");
//document.write("<div class='courseid'>"+CourseID+"</div>");
//document.write("<div class='score'>"+score+"</div>");
//document.write("<div class='todaydate'>"+todaydate+"</div>");
//begin AJAX POSTING OF Javascript variables
var formData = {StudentID:StudentID, CourseID:CourseID, Score:score };
$(document).ready(function (){
$.ajax({
url: 'http://www.mywebsite.com/university/submittest.php',
type: "post",
data: formData,
dataType: 'html',
beforeSend: function() {
$('#current_page').append("Submitting to Database..");
},
success: function(data, textStatus, jqXHR)
{
alert('Your scores have been reocrded to our database '+data);
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error submitting to database contact an administrator -- Error #2 Submission PHP'+errorThrown);
}
});
});
</script>
so again works fine in flash on firefox and ie and all web browsers but on a mobile device like android such as chrome or samsung s4 browser it goes into html5 and it never works all variables are blank what am I missing?
Thanks!
David
5 Replies
Solved Replacing
var StudentID=player.GetVar("StudentID").replace(/(\r\n|\r|\n)/g, '
');
var CourseID=player.GetVar("CourseID").replace(/(\r\n|\r|\n)/g, '
');
var coursename=player.GetVar("CourseName").replace(/(\r\n|\r|\n)/g, '
');
var learnerName=player.GetVar("learner").replace(/(\r\n|\r|\n)/g, '
');
var score=player.GetVar("MyScore").replace(/(\r\n|\r|\n)/g, '
');
with
var StudentID=player.GetVar("StudentID");
works in HTML5 the .replace breaks in HTML5 not sure why but whatevs, this code above should be money for anyone making a home grown LMS as I have done.
Thanks David for sharing here - and I know a lot of users who mention creating their own LMS, so I'm sure it'll be helpful!
David, could you post a sample of the "submit.php" file that works with this for the non-coders so they can also collect the info to a database such as mysql? Would appreciate it.
Thanks for sharing again, David!
This discussion is closed. You can start a new discussion or contact Articulate Support.