DaVinci – JS Based Lesson Player

Based on an unused prototype I made for a former employer. They insisted Flash was still the future (this is when iPads just rolled out and many of us saw the writing on the wall for Flash). Runs on JavaScript and HTML5’s audio player. It also loades its data from a standalone JSON file, which allows you to build multiple lessons with just one system. All layout is CSS-based, so it’s fully customizable.

When time allows, I’ll add some more features to this, but for now it’s stable and it works.

DaVinci GitHub Repository

//Load cl (Current Lesson)
/**
 * cl
*/
var cl = (function () {
    $.ajax({
		url:lessonURL,
		async:false,
		dataType: 'json',
		success: function (data) {
			cl = data;									
		},
		error: function (xhr, textStatus, errorThrown) {
			console.log("Error: " + textStatus + " | " + errorThrown + " | " + xhr);			
			return "Unloaded";
		}
	});
	return cl.lesson;
})();

//Init Globals
var totalPages = 0;
var currPage = 0;
var currStep = 0;

//Create davinci
var davinci = {
	init: function(){
		$("#lessonTitle").html(cl.lessonTitle);	
		$("#lessonSummary").html(cl.lessonSummary);			
		$(cl.pages).each(function(){
			$("#lessonNav").append('
'+this.pageTitle+"
");			
		});	
		this.showPage(currPage);	
	},
	showPage: function(pageNum) {
		currPage = pageNum;
		cp = cl.pages[pageNum];
		$("#pageTitle").html(cp.pageTitle);	
		$("#pageSummary").html(cp.pageSummary);
		currStep = 0; //On a new page, so default to first step.
		this.showStep(currStep);
	},
	goPage: function(p) {
		if(p === "undefined") {p = 1;} //If p isn't set, assume we're moving forward.
		currPage += p;	
		if (currPage < 0) { //Gone back too far, reset to zero;
			currPage = 0;
			this.showPage(currPage);
		} else if (currPage < totalPages) { //Normal page advancement
			this.showPage(currPage);
		} else { //End of lesson. Todo: Add logic to advance to next lesson (or end).		
			currPage = 0;
			this.showPage(currPage);		
		}
	},
	goStep: function(s) {		
		currStep += s;
		if (currStep < 0) {
			currStep = 0;
			this.goPage(-1);
		} else if (currStep < cl.pages[currPage].pageMedia.length) {
			this.showStep(currStep);
		} else {
			//currStep is too large, advance to the next page.
			this.goPage(1);
		}
	},
	showStep: function(s) {
		cs = cl.pages[currPage].pageMedia[s];
		$("#stepTitle").html(cs.title);
		ccText = $.ajax({url: media + cs.cc, async: false}).responseText;
		$("#slideshowContainer").html('').show();
		$("#stepCC").html(ccText);
		this.setAudio(media+cs.audio);
	},
	setAudio: function(mediaFile) {
		$("#mainAudio").trigger('stop'); //Stop it if it's already playing.
		$("#mainAudio").html('');
		$("#mainAudio").trigger('load');
		$("#mainAudio").trigger('play');
	}	
};

$("document").ready(function () {	
	davinci.init();
});