Commit 9d2b43ba authored by icc's avatar icc

Prepared for alpha2.

parent 0726942c
This diff is collapsed.
EJS.Helpers.prototype.date_tag = function(name, value , html_options) {
if(! (value instanceof Date))
value = new Date()
var month_names = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var years = [], months = [], days =[];
var year = value.getFullYear();
var month = value.getMonth();
var day = value.getDate();
for(var y = year - 15; y < year+15 ; y++)
{
years.push({value: y, text: y})
}
for(var m = 0; m < 12; m++)
{
months.push({value: (m), text: month_names[m]})
}
for(var d = 0; d < 31; d++)
{
days.push({value: (d+1), text: (d+1)})
}
var year_select = this.select_tag(name+'[year]', year, years, {id: name+'[year]'} )
var month_select = this.select_tag(name+'[month]', month, months, {id: name+'[month]'})
var day_select = this.select_tag(name+'[day]', day, days, {id: name+'[day]'})
return year_select+month_select+day_select;
}
EJS.Helpers.prototype.form_tag = function(action, html_options) {
html_options = html_options || {};
html_options.action = action
if(html_options.multipart == true) {
html_options.method = 'post';
html_options.enctype = 'multipart/form-data';
}
return this.start_tag_for('form', html_options)
}
EJS.Helpers.prototype.form_tag_end = function() { return this.tag_end('form'); }
EJS.Helpers.prototype.hidden_field_tag = function(name, value, html_options) {
return this.input_field_tag(name, value, 'hidden', html_options);
}
EJS.Helpers.prototype.input_field_tag = function(name, value , inputType, html_options) {
html_options = html_options || {};
html_options.id = html_options.id || name;
html_options.value = value || '';
html_options.type = inputType || 'text';
html_options.name = name;
return this.single_tag_for('input', html_options)
}
EJS.Helpers.prototype.is_current_page = function(url) {
return (window.location.href == url || window.location.pathname == url ? true : false);
}
EJS.Helpers.prototype.link_to = function(name, url, html_options) {
if(!name) var name = 'null';
if(!html_options) var html_options = {}
if(html_options.confirm){
html_options.onclick =
" var ret_confirm = confirm(\""+html_options.confirm+"\"); if(!ret_confirm){ return false;} "
html_options.confirm = null;
}
html_options.href=url
return this.start_tag_for('a', html_options)+name+ this.tag_end('a');
}
EJS.Helpers.prototype.submit_link_to = function(name, url, html_options){
if(!name) var name = 'null';
if(!html_options) var html_options = {}
html_options.onclick = html_options.onclick || '' ;
if(html_options.confirm){
html_options.onclick =
" var ret_confirm = confirm(\""+html_options.confirm+"\"); if(!ret_confirm){ return false;} "
html_options.confirm = null;
}
html_options.value = name;
html_options.type = 'submit'
html_options.onclick=html_options.onclick+
(url ? this.url_for(url) : '')+'return false;';
//html_options.href='#'+(options ? Routes.url_for(options) : '')
return this.start_tag_for('input', html_options)
}
EJS.Helpers.prototype.link_to_if = function(condition, name, url, html_options, post, block) {
return this.link_to_unless((condition == false), name, url, html_options, post, block);
}
EJS.Helpers.prototype.link_to_unless = function(condition, name, url, html_options, block) {
html_options = html_options || {};
if(condition) {
if(block && typeof block == 'function') {
return block(name, url, html_options, block);
} else {
return name;
}
} else
return this.link_to(name, url, html_options);
}
EJS.Helpers.prototype.link_to_unless_current = function(name, url, html_options, block) {
html_options = html_options || {};
return this.link_to_unless(this.is_current_page(url), name, url, html_options, block)
}
EJS.Helpers.prototype.password_field_tag = function(name, value, html_options) { return this.input_field_tag(name, value, 'password', html_options); }
EJS.Helpers.prototype.select_tag = function(name, value, choices, html_options) {
html_options = html_options || {};
html_options.id = html_options.id || name;
html_options.value = value;
html_options.name = name;
var txt = ''
txt += this.start_tag_for('select', html_options)
for(var i = 0; i < choices.length; i++)
{
var choice = choices[i];
var optionOptions = {value: choice.value}
if(choice.value == value)
optionOptions.selected ='selected'
txt += this.start_tag_for('option', optionOptions )+choice.text+this.tag_end('option')
}
txt += this.tag_end('select');
return txt;
}
EJS.Helpers.prototype.single_tag_for = function(tag, html_options) { return this.tag(tag, html_options, '/>');}
EJS.Helpers.prototype.start_tag_for = function(tag, html_options) { return this.tag(tag, html_options); }
EJS.Helpers.prototype.submit_tag = function(name, html_options) {
html_options = html_options || {};
//html_options.name = html_options.id || 'commit';
html_options.type = html_options.type || 'submit';
html_options.value = name || 'Submit';
return this.single_tag_for('input', html_options);
}
EJS.Helpers.prototype.tag = function(tag, html_options, end) {
if(!end) var end = '>'
var txt = ' '
for(var attr in html_options) {
if(html_options[attr] != null)
var value = html_options[attr].toString();
else
var value=''
if(attr == "Class") // special case because "class" is a reserved word in IE
attr = "class";
if( value.indexOf("'") != -1 )
txt += attr+'=\"'+value+'\" '
else
txt += attr+"='"+value+"' "
}
return '<'+tag+txt+end;
}
EJS.Helpers.prototype.tag_end = function(tag) { return '</'+tag+'>'; }
EJS.Helpers.prototype.text_area_tag = function(name, value, html_options) {
html_options = html_options || {};
html_options.id = html_options.id || name;
html_options.name = html_options.name || name;
value = value || ''
if(html_options.size) {
html_options.cols = html_options.size.split('x')[0]
html_options.rows = html_options.size.split('x')[1];
delete html_options.size
}
html_options.cols = html_options.cols || 50;
html_options.rows = html_options.rows || 4;
return this.start_tag_for('textarea', html_options)+value+this.tag_end('textarea')
}
EJS.Helpers.prototype.text_tag = EJS.Helpers.prototype.text_area_tag
EJS.Helpers.prototype.text_field_tag = function(name, value, html_options) { return this.input_field_tag(name, value, 'text', html_options); }
EJS.Helpers.prototype.url_for = function(url) {
return 'window.location="'+url+'";'
}
EJS.Helpers.prototype.img_tag = function(image_location, alt, options){
options = options || {};
options.src = image_location
options.alt = alt
return this.single_tag_for('img', options)
}
{
"title": "Embedded JS",
"contentType": "library",
"majorVersion": 1,
"minorVersion": 0,
"patchVersion": 0,
"runnable": 0,
"machineName": "EmbeddedJS",
"author": "Jupiter",
"license": "MIT",
"preloadedJs": [
{"path": "js/ejs_production.js"},
{"path": "js/ejs_viewhelpers.js"}
]
}
{
"title": "Board game",
"background": "image.url/here.png",
"hotspots": [
{
"title": "Step 1",
"coords": {x: 45, y: 98},
"image": "image.url/forspotimage.png",
"action": {
"machineName": "H5P.Questionset",
"options": {
"questions": [
{
"machineName": "H5P.Multichoice",
"options": {
"title": {
"name": "Title",
"description": "Optional title for question box",
"type": "text"
},
"question": {
"name": "Question",
"description": "Question asked",
"type": "text"
},
"singleAnswer": {
"name": "Single answer",
"description": "Whether only a single answer shall be possible",
"type": "boolean"
},
"answers": {
"name": "Answers",
"description": "Answers available for the user",
"type": "combined",
"array": true,
"minEntries": 3,
"maxEntries": 6,
"fields": {
"text": {
"name": "Answer text",
"description": "Answer text",
"type": "text"
},
"correct": {
"name": "Correct answer",
"description": "Whether this is a correct answer",
"type": "boolean"
}
}
}
}
}
]
}
}
}, {
"title": "Step 2",
"coords": {x: 76, y: 234},
"image": "image.url/foryetanotherspot.png"
}
]
// TODO: Progress indicator
// TODO: Question Sets
}
\ No newline at end of file
.boardgame {
position: relative;
width: 100%;
height: 100%;
}
.hotspot {
position: absolute;
z-index: 2;
}
.hotspot .info {
display: none;
z-index: 100;
position: relative;
top: -50px;
left: -10px;
background: rgba(255,255,255,0.75);
border: 1px solid #333333;
border-radius: 5px;
width: 120px;
height: 45px;
padding: 4px;
font-weight: bold;
font-family: sans-serif;
font-size: 120%;
}
.hotspot.hover .info {
display: block;
}
.action-container {
position: relative;
z-index: 100;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
}
.action-container .questionset {
float: right;
width: 50%;
background: white;
border: 1px solid #eaea00;
}
.progress {
position: absolute;
}
// Will render a Board game.
// Options format:
// {
// title: "Title for board game",
// ...
// }
window.H5P = window.H5P || {};
H5P.Boardgame = function (options, contentId) {
if ( !(this instanceof H5P.Boardgame) )
return new H5P.Boardgame(options, contentId);
var $ = H5P.jQuery;
var cp = H5P.getContentPath(contentId);
//
// An internal Object only available to Board games.
//
function HotSpot(dom, hs_params) {
var defaults = {
"title": "Hotspot",
"image": "",
"position": new H5P.Coords(),
"action": ""
};
var that = this;
var params = $.extend({}, defaults, hs_params);
this.passed = false;
// Render HotSpot DOM elements
var $hsd = $('<div class="hotspot"></div>');
$hsd.append($('<div class="info"><div class="title">' + params.title + '</div><div class="status"></div><div class="score"></div></div>'));
// Insert DOM in BoardGame
$(".boardgame", dom).append($hsd);
$hsd.css({
left: hs_params.coords.x + 'px',
top: hs_params.coords.y + 'px',
width: hs_params.coords.w + 'px',
height: hs_params.coords.h + 'px',
backgroundImage: 'url(' + cp + hs_params.image + ')'
});
this.action = new (H5P.classFromName(params.action.machineName))(params.action.options, contentId);
// Attach event handlers
$hsd.hover(function (ev) {
$(this).addClass('hover');
}, function (ev) {
$(this).removeClass('hover');
}).click(function (ev) {
// Start action
// - Create container
var $container = $('.boardgame', dom).append('<div class="action-container" id="action-container"></div>');
// - Attach action
that.action.attach('action-container');
$(that.action).on('h5pQuestionSetFinished', function (ev, result) {
$('#action-container', dom).remove();
// Update score in hotspot info
$hsd.find('.score').text(result.score);
// Switch background image to passed image.
that.passed = result.passed;
if (result.passed) {
$hsd.css({backgroundImage: 'url(' + cp + hs_params.passedImage + ')'});
} else {
$hsd.css({backgroundImage: 'url(' + cp + hs_params.failedImage + ')'});
}
// Trigger further event to boardgame to calculate total score?
$(that).trigger('hotspotFinished', result);
});
});
}
var defaults = {
title: "",
background: "",
width: 635,
height: 500,
splashScreen: "",
hotspots: [],
extras: [],
progress: {
enabled: false,
incremental: true,
includeFailed: false,
coords: {"x": 0, "y": 0, "w": 200, "h": 100},
images: []
}
};
var params = $.extend({}, defaults, options);
var $myDom, $progress;
var hotspots = new Array();
// Update progress meter.
var _updateProgress = function () {
if (!$progress) {
return;
}
// TODO: This only computes for incremental: true, includeFailed: false.
var c = 0;
for (var i = 0; i < hotspots.length; i++) {
if (hotspots[i].passed) {
c += 1;
}
}
if (params.progress.images.length > c) {
$progress.css({backgroundImage: 'url(' + cp + params.progress.images[c] + ')'});
}
};
// Function for attaching the multichoice to a DOM element.
var attach = function (target) {
var $target;
if (typeof(target) == "string") {
$target = $("#" + target);
} else {
$target = $(target);
}
// Render own DOM into target.
$myDom = $target;
$myDom.html('<div class="boardgame"></div>');
$('.boardgame', $myDom).css({
backgroundImage: 'url(' + cp + params.background + ')',
width: params.width,
height: params.height
});
// Set event listeners.
// Add hotspots.
for (var i = params.hotspots.length - 1; i >= 0; i--) {
var spot = new HotSpot($myDom, params.hotspots[i]);
hotspots.push(spot);
$(spot).on('hotspotFinished', function (ev, result) {
console.log("Hotspot is done. Time to calculate total score so far.");
_updateProgress();
});
}
// Start extras
for (var j = params.extras.length - 1; j >= 0; j--) {
var a = (H5P.classFromName(params.extras[j].name))($myDom, params.extras[j].options);
}
// Add progress field
if (params.progress.enabled) {
$progress = $('<div class="progress"></div>');
$(".boardgame", $myDom).append($progress);
$progress.css({
left: params.progress.coords.x + 'px',
top: params.progress.coords.y + 'px',
width: params.progress.coords.w + 'px',
height: params.progress.coords.h + 'px'
});
_updateProgress();
}
return this;
};
// Masquerade the main object to hide inner properties and functions.
var returnObject = {
attach: attach, // Attach to DOM object
defaults: defaults // Provide defaults for inspection
};
return returnObject;
};
{
"title": "Boardgame",
"description": "The user is presented with a board with several hotspots. By clicking a hotspot he invokes a mini-game.",
"majorVersion": 1,
"minorVersion": 0,
"patchVersion": 6,
"runnable": 1,
"machineName": "H5P.Boardgame",
"author": "Amendor AS",
"license": "cc-by-sa",
"preloadedDependencies": [
{"machineName": "EmbeddedJS", "majorVersion": 1, "minorVersion": 0},
{"machineName": "H5P.MultiChoice", "majorVersion": 1, "minorVersion": 0},
{"machineName": "H5P.QuestionSet", "majorVersion": 1, "minorVersion": 0}
],
"preloadedCss": [
{"path": "css/boardgame.css"}
],
"preloadedJs": [
{"path": "js/boardgame.js"}
],
"init": "h5pBoardgame.init",
"w": 635,
"h": 500
}
{
"title": {
"label": "Title",
"description": "Board game title",
"type": "text"
},
"background": {
"label": "Background image",
"description": "Image covering the background of the board game.",
"type": "image"
},
"width": {
"label": "Game width",
"type": "integer"
},
"height": {
"label": "Game height",
"type": "integer"
},
"splashScreen": {
"label": "Splash screen",
"description": "Introduction screen shown while resources are loaded.",
"type": "image"
},
"hotspots": {
"label": "Hotspots",
"description": "List of hotspots in the game window where questions are found.",
"type": "combined",
"array": true,
"minEntries": 1,
"maxEntries": -1,
"fields": {
"title": {
"label": "Title",
"description": "Title for hotspot. Will be displayed on hover",
"type": "text"
}
"image": {
"label": "Hotspot image",
"description": "Image used for the hotspot when the user has not completed the minigame.",
"type": "image"
},
"passedImage": {
"label": "Hotspot passed image",
"description": "Image used for hotspot when user has passed the minigame",
"type": "image"
},
"failedImage": {
"label": "Hotspot failed image",
"description": "Image used for hotspot when user has passed the minigame",
"type": "image"
},
"position": {
"label": "Hotspot position",
"type": "coords",
"dimension": true
},
"action": {
"label": "Action",
"description": "What to do when clicking this hotspot",
"type": "h5p-library",
"allowedLibs": ["H5P.QuestionSet"]
}
}
},