MOS
/
OpenBoard
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

upgraded interactivities

Browse Source
preferencesAboutTextFull
unknown 13 years ago
parent 50062d9d68
commit 698ec0e2c7
5 changed files with 640 additions and 536 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 219
      resources/library/sankoreInteractivities/ord-phrases.wgt/template/scripts/template2.js
  2. 257
      resources/library/sankoreInteractivities/ord-words.wgt/template/scripts/template2.js
  3. 260
      resources/library/sankoreInteractivities/spl-phrase.wgt/scripts/app.js
  4. 270
      resources/library/sankoreInteractivities/spl-text.wgt/scripts/app2.js
  5. 170
      resources/library/sankoreInteractivities/spl-word.wgt/scripts/spl-word.js

219
resources/library/sankoreInteractivities/ord-phrases.wgt/template/scripts/template2.js
Unescape View File

@ -5,12 +5,12 @@
function startEditing() function startEditing()
{ {
modeEdit(); modeEdit();
} }
function stopEditing() function stopEditing()
{ {
modeView(); modeView();
} }
function initialize() function initialize()
@ -20,7 +20,7 @@ function initialize()
function checkResponse() function checkResponse()
{ {
checkWord(); checkWord();
} }
/* /*
/ END sankore api / END sankore api
@ -28,7 +28,16 @@ function checkResponse()
var sentence = "this is\nan example\nsentence"; var sentence = "";
var curSentence = "";
if(window.sankore){
sentence = (sankore.preference("rightOrdPhrases", ""))?sankore.preference("rightOrdPhrases", ""):"this is\nan example\nsentence";
curSentence = (sankore.preference("currentOrdPhrases", ""))?sankore.preference("currentOrdPhrases", ""):"";
} else {
sentence = "this is\nan example\nsentence";
}
var doCheck = true; var doCheck = true;
// array of dom elements // array of dom elements
@ -47,10 +56,10 @@ var widget_padding = 100;
function str_replace( w, b, s ){ function str_replace( w, b, s ){
while( s.indexOf( w ) != -1 ){ while( s.indexOf( w ) != -1 ){
s = s.replace( w, b ); s = s.replace( w, b );
} }
return s; return s;
} }
/* /*
@ -61,16 +70,16 @@ shuffles an array
*/ */
function shuffle( arr ) function shuffle( arr )
{ {
var pos, tmp; var pos, tmp;
for( var i = 0; i < arr.length; i++ ) for( var i = 0; i < arr.length; i++ )
{ {
pos = Math.round( Math.random() * ( arr.length - 1 ) ); pos = Math.round( Math.random() * ( arr.length - 1 ) );
tmp = arr[pos]; tmp = arr[pos];
arr[pos] = arr[i]; arr[pos] = arr[i];
arr[i] = tmp; arr[i] = tmp;
} }
return arr; return arr;
} }
/* /*
@ -81,34 +90,34 @@ returns array of dom elements
*/ */
function createElements( sentence ) function createElements( sentence )
{ {
var el; var el;
var elements = []; var elements = [];
var phrases = sentence.split( "\n" ); var phrases = sentence.split( "\n" );
for( i in phrases ) for( i in phrases )
{ {
el = document.createElement( "div" ); el = document.createElement( "div" );
$( el ).addClass( "phrase" ).text( phrases[i] ); $( el ).addClass( "phrase" ).text( phrases[i] );
elements.push( el ); elements.push( el );
} }
return elements; return elements;
} }
function checkSentence() function checkSentence()
{ {
if( !doCheck ) if( !doCheck )
return; return;
var ph = []; var ph = [];
$( "#mp_word .phrase" ).each( function() $( "#mp_word .phrase" ).each( function()
{ {
ph.push( $( this ).text() ); ph.push( $( this ).text() );
}); });
if( ph.join( "\n" ) == str_replace( "\r", "", sentence ) ){ if( ph.join( "\n" ) == str_replace( "\r", "", sentence ) ){
$( "#mp_word .phrase" ).addClass( "right" ); $( "#mp_word .phrase" ).addClass( "right" );
} }
} }
/* /*
@ -119,49 +128,56 @@ turns the widget into the view mode
*/ */
function modeView() function modeView()
{ {
if( editMode ){ if( editMode ){
sentence = str_replace( "\r", "", $( "#mp_word textarea" ).attr( "value" ) ); sentence = str_replace( "\r", "", $( "#mp_word textarea" ).attr( "value" ) );
var p = sentence.split( "\n" ); var p = sentence.split( "\n" );
var p2 = []; var p2 = [];
var t; var t;
for( var i in p ) for( var i in p )
{ {
t = jQuery.trim( p[i] ); t = jQuery.trim( p[i] );
if( t ) p2.push( t ); if( t ) p2.push( t );
} }
sentence = p2.join( "\n" ); sentence = p2.join( "\n" );
} }
// if no sankore api, insert edit button // if no sankore api, insert edit button
if( !isSankore ){ if( !isSankore ){
$( "#mp_setup" ).empty().append( '<input type="button" value="Edit">' ); $( "#mp_setup" ).empty().append( '<input type="button" value="Edit">' );
$( "#mp_setup input:button" ).click( function(){ $( "#mp_setup input:button" ).click( function(){
modeEdit(); modeEdit();
}); });
} }
// clean the previous word // clean the previous word
$( "#mp_word" ).empty(); $( "#mp_word" ).empty();
// create new set of elements var phrases;
var phrases = shuffle( createElements( sentence ) ); // create new set of elements
for( i in phrases ){ if(window.sankore && curSentence && !editMode)
$("#mp_word").append( phrases[i] ); phrases = createElements( curSentence );
} else
phrases = shuffle( createElements( sentence ) );
for( i in phrases ){
$("#mp_word").append( phrases[i] );
}
// in sankore api there would be a function to check // in sankore api there would be a function to check
// the answer, so no update parameter would be needed // the answer, so no update parameter would be needed
$( "#mp_word" ).sortable(); $( "#mp_word" ).sortable();
if( !isSankore ){ if( !isSankore ){
$( "#mp_word" ).sortable( { update: checkSentence } ); $( "#mp_word" ).sortable( {
} else update: checkSentence
$( "#mp_word" ).sortable(); } );
} else
// adjustHeight $( "#mp_word" ).sortable();
var aHeight = $( phrases[0] ).outerHeight( true );
// adjustHeight
var aHeight = $( phrases[0] ).outerHeight( true );
// apply new width // apply new width
adjust( aHeight * phrases.length ); adjust( aHeight * phrases.length );
} }
@ -172,11 +188,13 @@ adjust width or height
*/ */
function adjust( height ) function adjust( height )
{ {
$( "#mp_word" ).animate( {height: height } ); $( "#mp_word" ).animate( {
// if viewed as a widget, resize the window height: height
if( !isBrowser ){ } );
window.resizeTo( widget.width, height + widget_padding ); // if viewed as a widget, resize the window
} if( !isBrowser ){
window.resizeTo( widget.width, height + widget_padding );
}
} }
/* /*
@ -186,26 +204,39 @@ modeEdit
*/ */
function modeEdit() function modeEdit()
{ {
editMode = true; editMode = true;
// if no sankore api, insert ok button // if no sankore api, insert ok button
if( !isSankore ) if( !isSankore )
{ {
$( "#mp_setup" ).empty().append( '<input type="button" value="OK">' ); $( "#mp_setup" ).empty().append( '<input type="button" value="OK">' );
$( "#mp_setup input:button" ).click( function(){ $( "#mp_setup input:button" ).click( function(){
modeView(); modeView();
}); });
} }
$( "#mp_word").css( "margin-left", 0 ).empty() $( "#mp_word").css( "margin-left", 0 ).empty()
.append('<textarea cols="50" rows="5">'+sentence+'</textarea>'); .append('<textarea cols="50" rows="5">'+sentence+'</textarea>');
adjust( $( "#mp_word textarea" ).outerHeight() ); adjust( $( "#mp_word textarea" ).outerHeight() );
} }
$(window).mouseout(function(){
if(window.sankore){
var ph = [];
$( "#mp_word .phrase" ).each( function()
{
ph.push( $( this ).text() );
});
sankore.setPreference("currentOrdPhrases", ph.join( "\n" ));
sankore.setPreference("rightOrdPhrases", sentence);
}
});
$(document).ready(function() $(document).ready(function()
{ {
$("#ub-widget").append( '\ $("#ub-widget").append( '\
<div id="mp_setup"></div>\ <div id="mp_setup"></div>\
<div id="mp_word"></div>\ <div id="mp_word"></div>\
'); ');
modeView(); modeView();
}); });

257
resources/library/sankoreInteractivities/ord-words.wgt/template/scripts/template2.js
Unescape View File

@ -5,12 +5,12 @@
function startEditing() function startEditing()
{ {
modeEdit(); modeEdit();
} }
function stopEditing() function stopEditing()
{ {
modeView(); modeView();
} }
function initialize() function initialize()
@ -20,7 +20,7 @@ function initialize()
function checkResponse() function checkResponse()
{ {
checkWord(); checkWord();
} }
/* /*
/ END sankore api / END sankore api
@ -28,7 +28,16 @@ function checkResponse()
var word = "a*long*,*long*time*ago*..."; var word = "";
var curWord = "";
if(window.sankore){
word = (sankore.preference("rightOrdWords", ""))?sankore.preference("rightOrdWords", ""):"a*long*,*long*time*ago*...";
curWord = (sankore.preference("currentOrdWords", ""))?sankore.preference("currentOrdWords", ""):"";
} else {
word = "a*long*,*long*time*ago*...";
}
var img = "template/images/horse.png"; var img = "template/images/horse.png";
var doCheckWord = true; var doCheckWord = true;
@ -55,31 +64,31 @@ returns array of dom elements
*/ */
function createWordLetters( word ) function createWordLetters( word )
{ {
var ch, el; var ch, el;
var letters = []; var letters = [];
if( word.indexOf( '*' ) != -1 ) if( word.indexOf( '*' ) != -1 )
{ {
var tmp = word.split( '*' ); var tmp = word.split( '*' );
for( i in tmp ) for( i in tmp )
{ {
ch = tmp[i]; ch = tmp[i];
el = document.createElement( "div" ); el = document.createElement( "div" );
$(el).addClass( "letter" ).text( ch ); $(el).addClass( "letter" ).text( ch );
letters.push( el ); letters.push( el );
} }
} }
else else
{ {
for( var i = 0; i < word.length; i++ ) for( var i = 0; i < word.length; i++ )
{ {
ch = word.charAt( i ); ch = word.charAt( i );
el = document.createElement( "div" ); el = document.createElement( "div" );
$(el).addClass( "letter" ).text( ch ); $(el).addClass( "letter" ).text( ch );
letters.push( el ); letters.push( el );
} }
} }
return letters; return letters;
} }
@ -92,22 +101,22 @@ if they are in the right order
*/ */
function checkWord() function checkWord()
{ {
if( !doCheckWord ) if( !doCheckWord )
return; return;
var str = ""; var str = "";
$( "#mp_word .letter" ).each( function(){ $( "#mp_word .letter" ).each( function(){
str += $(this).text(); str += $(this).text();
}); });
var w = word; var w = word;
while( w.indexOf( '*' ) != -1 ) while( w.indexOf( '*' ) != -1 )
{ {
w = w.replace( '*', '' ); w = w.replace( '*', '' );
} }
if( str == w ){ if( str == w ){
$( "#mp_word .letter" ).addClass( "right" ); $( "#mp_word .letter" ).addClass( "right" );
//message( "Right!" ); //message( "Right!" );
} }
} }
/* /*
@ -118,16 +127,16 @@ shuffles an array
*/ */
function shuffle( arr ) function shuffle( arr )
{ {
var pos, tmp; var pos, tmp;
for( var i = 0; i < arr.length; i++ ) for( var i = 0; i < arr.length; i++ )
{ {
pos = Math.round( Math.random() * ( arr.length - 1 ) ); pos = Math.round( Math.random() * ( arr.length - 1 ) );
tmp = arr[pos]; tmp = arr[pos];
arr[pos] = arr[i]; arr[pos] = arr[i];
arr[i] = tmp; arr[i] = tmp;
} }
return arr; return arr;
} }
@ -140,56 +149,63 @@ turns the widget into the view mode
*/ */
function modeView() function modeView()
{ {
if( editMode ){ if( editMode ){
word = $( "#mp_word input:text" ).attr( "value" ); word = $( "#mp_word input:text" ).attr( "value" );
} }
// if no sankore api, insert edit button // if no sankore api, insert edit button
if( !isSankore ){ if( !isSankore ){
$( "#mp_setup" ).empty().append( '<input type="button" value="Edit">' ); $( "#mp_setup" ).empty().append( '<input type="button" value="Edit">' );
$( "#mp_setup input:button" ).click( function(){ $( "#mp_setup input:button" ).click( function(){
modeEdit(); modeEdit();
}); });
} }
// clean the previous word // clean the previous word
$( "#mp_word" ).empty(); $( "#mp_word" ).empty();
// create new set of letters // create new set of letters
var letters = shuffle( createWordLetters( word ) ); var letters;
for( i in letters ){ if(window.sankore && curWord && !editMode)
$("#mp_word").append( letters[i] ); letters = createWordLetters( curWord );
} else
letters = shuffle( createWordLetters( word ) );
for( i in letters ){
$("#mp_word").append( letters[i] );
}
// in sankore api there would be a function to check // in sankore api there would be a function to check
// the answer, so no update parameter would be needed // the answer, so no update parameter would be needed
if( !isSankore ){ if( !isSankore ){
$( "#mp_word" ).sortable( { update: checkWord } ); $( "#mp_word" ).sortable( {
} else $( "#mp_word" ).sortable(); update: checkWord
} );
// adjustWidth } else $( "#mp_word" ).sortable();
var totalLettersWidth = 0;
for( i in letters ){ // adjustWidth
var currentWidth = $( letters[i] ).outerWidth( true ); var totalLettersWidth = 0;
totalLettersWidth += currentWidth; for( i in letters ){
} var currentWidth = $( letters[i] ).outerWidth( true );
totalLettersWidth += 1; totalLettersWidth += currentWidth;
}
var width = Math.max( totalLettersWidth += 1;
totalLettersWidth,
min_view_width var width = Math.max(
); totalLettersWidth,
min_view_width
);
// shift the words to the right to center them // shift the words to the right to center them
if( width > totalLettersWidth ){ if( width > totalLettersWidth ){
$( "#mp_word" ).css( "margin-left", Math.round( (width - totalLettersWidth)/2 ) ); $( "#mp_word" ).css( "margin-left", Math.round( (width - totalLettersWidth)/2 ) );
} }
else{ else{
$( "#mp_word" ).css( "margin-left", 0 ); $( "#mp_word" ).css( "margin-left", 0 );
} }
// apply new width // apply new width
adjustWidth( width ); adjustWidth( width );
} }
@ -200,11 +216,13 @@ adjustWidth
*/ */
function adjustWidth( width ) function adjustWidth( width )
{ {
$( "#ub-widget" ).animate( {width: width } ); $( "#ub-widget" ).animate( {
// if viewed as a widget, resize the window width: width
if( !isBrowser ){ } );
window.resizeTo( width + widget_padding, widget.height ); // if viewed as a widget, resize the window
} if( !isBrowser ){
window.resizeTo( width + widget_padding, widget.height );
}
} }
/* /*
@ -214,25 +232,36 @@ modeEdit
*/ */
function modeEdit() function modeEdit()
{ {
editMode = true; editMode = true;
// if no sankore api, insert ok button // if no sankore api, insert ok button
if( !isSankore ) if( !isSankore )
{ {
$( "#mp_setup" ).empty().append( '<input type="button" value="OK">' ); $( "#mp_setup" ).empty().append( '<input type="button" value="OK">' );
$( "#mp_setup input:button" ).click( function(){ $( "#mp_setup input:button" ).click( function(){
modeView(); modeView();
}); });
} }
$( "#mp_word").css( "margin-left", 0 ).empty().append('<input value="'+word+'">'); $( "#mp_word").css( "margin-left", 0 ).empty().append('<input value="'+word+'">');
adjustWidth( input_width ); adjustWidth( input_width );
} }
$(window).mouseout(function(){
if(window.sankore){
var str = "";
$( "#mp_word .letter" ).each( function(){
str += $(this).text();
});
sankore.setPreference("currentOrdWords", str);
sankore.setPreference("rightOrdWords", word);
}
});
$(document).ready(function() $(document).ready(function()
{ {
$("#ub-widget").append( '\ $("#ub-widget").append( '\
<div id="mp_setup"></div>\ <div id="mp_setup"></div>\
<div id="mp_word"></div>\ <div id="mp_word"></div>\
'); ');
modeView(); modeView();
}); });

260
resources/library/sankoreInteractivities/spl-phrase.wgt/scripts/app.js
Unescape View File

@ -3,162 +3,178 @@
function createElements( phrase ) function createElements( phrase )
{ {
var s = ''; var s = '';
for( var i = 0; i < phrase.length; i++ ) for( var i = 0; i < phrase.length; i++ )
{ {
ch = phrase.charAt( i ); ch = phrase.charAt( i );
if( ch == " " ){ if( ch == " " ){
ch = "&nbsp;"; ch = "&nbsp;";
} }
s += '<div class="letter">' + ch + '</div>' + s += '<div class="letter">' + ch + '</div>' +
'<div class="dash">&nbsp;</div>'; '<div class="dash">&nbsp;</div>';
} }
return s; return s;
} }
$(document).ready(function() $(document).ready(function()
{ {
var w = new wcontainer( "#ub-widget" ); var w = new wcontainer( "#ub-widget" );
var sentence = "";
if(window.sankore)
sentence = (sankore.preference("ordSplPhrases", ""))?sankore.preference("ordSplPhrases", ""):"this is a bunch of words which should be split apart";
else
sentence = "this is a bunch of words which should be split apart";
w.maxWidth = 600; w.maxWidth = 600;
w.setEditContent( '<div class="inputwrap"><textarea class="percent">this is a bunch of words which should be split apart</textarea></div>' ); w.setEditContent( '<div class="inputwrap"><textarea class="percent">' + sentence + '</textarea></div>' );
w.setViewContent( '<div class="upper"><div class="dash fixed">. </div></div>' ); w.setViewContent( '<div class="upper"><div class="dash fixed">. </div></div>' );
w.setData( "dashWidth", w.elements.container.find( ".dash" ).outerWidth() ); w.setData( "dashWidth", w.elements.container.find( ".dash" ).outerWidth() );
w.setViewContent( '<div class="upper"><div class="dash fixed">M</div></div>' ); w.setViewContent( '<div class="upper"><div class="dash fixed">M</div></div>' );
w.setData( "lineHeight", w.elements.container.find( ".dash" ).outerHeight() ); w.setData( "lineHeight", w.elements.container.find( ".dash" ).outerHeight() );
w.setViewContent( "" ); w.setViewContent( "" );
// onViewMode // onViewMode
w.onViewMode = function() w.onViewMode = function()
{ {
// clean up the text // clean up the text
var phrase = w.elements.container.find( "textarea" ).val() var phrase = w.elements.container.find( "textarea" ).val()
.replace( /\r/g, '' ).replace( /\n/g, ' ' ).replace( / /g, ' ' ).trim(); .replace( /\r/g, '' ).replace( /\n/g, ' ' ).replace( / /g, ' ' ).trim();
// store the text // store the text
w.setData( "phrase", phrase ); w.setData( "phrase", phrase );
// remove all dots (they are to be set during the exercise) // remove all dots (they are to be set during the exercise)
phrase = phrase.replace( / /g, '' ); phrase = phrase.replace( / /g, '' );
// create the html // create the html
w.setViewContent( createElements( phrase ) ); w.setViewContent( createElements( phrase ) );
// the behaviour // the behaviour
w.elements.containerView.find( ".letter" ) w.elements.containerView.find( ".letter" )
.mouseover( function() .mouseover( function()
{ {
var el = $( this ).next(); var el = $( this ).next();
// determine new hover class // determine new hover class
var is_fixed = ( el.get( 0 ).className.indexOf( "fixed" ) != -1 ); var is_fixed = ( el.get( 0 ).className.indexOf( "fixed" ) != -1 );
var hover_class = is_fixed? var hover_class = is_fixed?
"dash_hover_fixed" : "dash_hover"; "dash_hover_fixed" : "dash_hover";
// assign new hover class // assign new hover class
el.addClass( hover_class ) el.addClass( hover_class )
.data( "hc", hover_class ); .data( "hc", hover_class );
}) })
.mouseout( function() .mouseout( function()
{ {
var el = $( this ).next(); var el = $( this ).next();
// remove current hover class // remove current hover class
var hc = el.data( "hc" ); var hc = el.data( "hc" );
el.removeClass( hc ); el.removeClass( hc );
}) })
.click( function() .click( function()
{ {
var el = $( this ).next(); var el = $( this ).next();
// remove current hover class // remove current hover class
$( this ).trigger( "mouseout" ); $( this ).trigger( "mouseout" );
// toggle fixed class // toggle fixed class
el.toggleClass( "fixed" ); el.toggleClass( "fixed" );
// determine new hover class // determine new hover class
// assign new hover class // assign new hover class
$( this ).trigger( "mouseover" ); $( this ).trigger( "mouseover" );
w.checkAnswer(); w.checkAnswer();
w.adjustSize(); w.adjustSize();
}); });
w.checkAnswer(); w.checkAnswer();
}; };
// viewSize // viewSize
w.viewSize = function() w.viewSize = function()
{ {
var w = 0; var w = 0;
var h = 0; var h = 0;
var dh = winstance.getData( "lineHeight" ); var dh = winstance.getData( "lineHeight" );
var dw = winstance.getData( "dashWidth" ); var dw = winstance.getData( "dashWidth" );
winstance.elements.containerView.find( "div:visible" ).each( function() winstance.elements.containerView.find( "div:visible" ).each( function()
{ {
w += $( this ).outerWidth(); w += $( this ).outerWidth();
h = Math.max( h, $( this ).outerHeight( true ) ); h = Math.max( h, $( this ).outerHeight( true ) );
}); });
var square = w*h; var square = w*h;
h = Math.max( h, $( winstance.elements.containerView ).height() ); h = Math.max( h, $( winstance.elements.containerView ).height() );
if( winstance.maxWidth ) if( winstance.maxWidth )
{ {
w = Math.min( w, winstance.maxWidth ); w = Math.min( w, winstance.maxWidth );
h = parseInt( square / w ); h = parseInt( square / w );
} }
return { w: w, h: h+dh }; return {
}; w: w,
h: h+dh
};
};
// editSize // editSize
w.editSize = function() w.editSize = function()
{ {
return { return {
w: winstance.elements.containerEdit.find( "textarea" ).parent().outerWidth( true ), w: winstance.elements.containerEdit.find( "textarea" ).parent().outerWidth( true ),
h: winstance.elements.containerEdit.find( "textarea" ).parent().outerHeight( true ), h: winstance.elements.containerEdit.find( "textarea" ).parent().outerHeight( true ),
}; };
}; };
w.checkAnswer = function() w.checkAnswer = function()
{ {
var phrase = ""; var phrase = "";
var ch = ""; var ch = "";
this.elements.containerView.find( "div:visible" ).each( function() this.elements.containerView.find( "div:visible" ).each( function()
{ {
if( this.className.indexOf( "fixed" ) != -1 ){ if( this.className.indexOf( "fixed" ) != -1 ){
phrase += ' '; phrase += ' ';
} }
else if( this.className.indexOf( "dash" ) != -1 ){ else if( this.className.indexOf( "dash" ) != -1 ){
return; return;
} }
else{ else{
ch = $( this ).html(); ch = $( this ).html();
phrase += ch; phrase += ch;
} }
}); });
if( phrase == this.getData( "phrase" ) ){ if( phrase == this.getData( "phrase" ) ){
this.elements.containerView.addClass( "answerRight" ); this.elements.containerView.addClass( "answerRight" );
} }
else{ else{
this.elements.containerView.removeClass( "answerRight" ); this.elements.containerView.removeClass( "answerRight" );
} }
}; };
window.w = w; window.w = w;
window.winstance = w; window.winstance = w;
w.modeView(); w.modeView();
$(window).mouseout(function(){
if(window.sankore){
sankore.setPreference("ordSplPhrases", w.getData("phrase"));
}
});
}); });

270
resources/library/sankoreInteractivities/spl-text.wgt/scripts/app2.js
Unescape View File

@ -3,168 +3,182 @@
function createElements( text ) function createElements( text )
{ {
var s = ''; var s = '';
var words = text.split( " " ); var words = text.split( " " );
for( var i = 0; i < words.length; i++ ) for( var i = 0; i < words.length; i++ )
{ {
if( i ){ if( i ){
s += '<div>&nbsp;</div>'; s += '<div>&nbsp;</div>';
} }
s += '<div class="letter">' + words[i] + '</div>' + s += '<div class="letter">' + words[i] + '</div>' +
'<div class="dash">.</div>'; '<div class="dash">.</div>';
} }
return s; return s;
} }
$(document).ready(function() $(document).ready(function()
{ {
var w = new wcontainer( "#ub-widget" ); var w = new wcontainer( "#ub-widget" );
var sentences = "";
if(window.sankore)
sentences = (sankore.preference("ordSplText", ""))?sankore.preference("ordSplText", ""):"hello, this is the first sentence. hi, this is the second sentence. hello again, this is the third sentence. good morning, this is the fifth sentence. hi, sorry, i\'m late, i\'m the fourth sentence.";
else
sentences = "hello, this is the first sentence. hi, this is the second sentence. hello again, this is the third sentence. good morning, this is the fifth sentence. hi, sorry, i\'m late, i\'m the fourth sentence.";
w.maxWidth = 600;
w.maxWidth = 600; w.setEditContent( '<div class="inputwrap"><textarea class="percent">' + sentences + '</textarea></div>' );
w.setViewContent( '<div class="upper"><div class="dash fixed">. </div></div>' );
w.setData( "dashWidth", w.elements.container.find( ".dash" ).outerWidth() );
w.setViewContent( '<div class="upper"><div class="dash fixed">M</div></div>' );
w.setData( "lineHeight", w.elements.container.find( ".dash" ).outerHeight() );
w.setViewContent( "" );
w.setEditContent( '<div class="inputwrap"><textarea class="percent">hello, this is the first sentence. hi, this is the second sentence. hello again, this is the third sentence. good morning, this is the fifth sentence. hi, sorry, i\'m late, i\'m the fourth sentence.</textarea></div>' );
w.setViewContent( '<div class="upper"><div class="dash fixed">. </div></div>' );
w.setData( "dashWidth", w.elements.container.find( ".dash" ).outerWidth() );
w.setViewContent( '<div class="upper"><div class="dash fixed">M</div></div>' );
w.setData( "lineHeight", w.elements.container.find( ".dash" ).outerHeight() );
w.setViewContent( "" );
// onViewMode
// onViewMode w.onViewMode = function()
w.onViewMode = function() {
{ // clean up the text
// clean up the text var text = w.elements.container.find( "textarea" ).val()
var text = w.elements.container.find( "textarea" ).val() .replace( /\r/g, '' ).replace( /\n/g, ' ' ).replace( / /g, ' ' );
.replace( /\r/g, '' ).replace( /\n/g, ' ' ).replace( / /g, ' ' );
// store the text // store the text
w.setData( "text", text ); w.setData( "text", text );
// remove all dots (they are to be set during the exercise) // remove all dots (they are to be set during the exercise)
text = text.replace( /\. /g, ' ' ).trim( ["."] ); text = text.replace( /\. /g, ' ' ).trim( ["."] );
// create the html // create the html
w.setViewContent( createElements( text ) ); w.setViewContent( createElements( text ) );
// the behaviour // the behaviour
w.elements.containerView.find( ".letter" ) w.elements.containerView.find( ".letter" )
.mouseover( function() .mouseover( function()
{ {
var el = $( this ).next(); var el = $( this ).next();
// determine new hover class // determine new hover class
var is_fixed = ( el.get( 0 ).className.indexOf( "fixed" ) != -1 ); var is_fixed = ( el.get( 0 ).className.indexOf( "fixed" ) != -1 );
var hover_class = is_fixed? var hover_class = is_fixed?
"dash_hover_fixed" : "dash_hover"; "dash_hover_fixed" : "dash_hover";
// assign new hover class // assign new hover class
el.addClass( hover_class ) el.addClass( hover_class )
.data( "hc", hover_class ); .data( "hc", hover_class );
}) })
.mouseout( function() .mouseout( function()
{ {
var el = $( this ).next(); var el = $( this ).next();
// remove current hover class // remove current hover class
var hc = el.data( "hc" ); var hc = el.data( "hc" );
el.removeClass( hc ); el.removeClass( hc );
}) })
.click( function() .click( function()
{ {
var el = $( this ).next(); var el = $( this ).next();
// remove current hover class // remove current hover class
$( this ).trigger( "mouseout" ); $( this ).trigger( "mouseout" );
// toggle fixed class // toggle fixed class
el.toggleClass( "fixed" ); el.toggleClass( "fixed" );
// determine new hover class // determine new hover class
// assign new hover class // assign new hover class
$( this ).trigger( "mouseover" ); $( this ).trigger( "mouseover" );
w.checkAnswer(); w.checkAnswer();
w.adjustSize(); w.adjustSize();
}); });
w.checkAnswer(); w.checkAnswer();
}; };
// viewSize // viewSize
w.viewSize = function() w.viewSize = function()
{ {
var w = 0; var w = 0;
var h = 0; var h = 0;
var dh = winstance.getData( "lineHeight" ); var dh = winstance.getData( "lineHeight" );
var dw = winstance.getData( "dashWidth" ); var dw = winstance.getData( "dashWidth" );
winstance.elements.containerView.find( "div:visible" ).each( function() winstance.elements.containerView.find( "div:visible" ).each( function()
{ {
w += $( this ).outerWidth(); w += $( this ).outerWidth();
h = Math.max( h, $( this ).outerHeight( true ) ); h = Math.max( h, $( this ).outerHeight( true ) );
}); });
var square = w*h; var square = w*h;
h = Math.max( h, $( winstance.elements.containerView ).height() ); h = Math.max( h, $( winstance.elements.containerView ).height() );
if( winstance.maxWidth ) if( winstance.maxWidth )
{ {
w = Math.min( w, winstance.maxWidth ); w = Math.min( w, winstance.maxWidth );
h = parseInt( square / w ); h = parseInt( square / w );
} }
return { w: w, h: h+dh }; return {
}; w: w,
h: h+dh
};
};
// editSize // editSize
w.editSize = function() w.editSize = function()
{ {
return { return {
w: winstance.elements.containerEdit.find( "textarea" ).parent().outerWidth( true ), w: winstance.elements.containerEdit.find( "textarea" ).parent().outerWidth( true ),
h: winstance.elements.containerEdit.find( "textarea" ).parent().outerHeight( true ), h: winstance.elements.containerEdit.find( "textarea" ).parent().outerHeight( true ),
}; };
}; };
w.checkAnswer = function() w.checkAnswer = function()
{ {
var text = ""; var text = "";
var ch = ""; var ch = "";
this.elements.containerView.find( "div:visible" ).each( function() this.elements.containerView.find( "div:visible" ).each( function()
{ {
if( this.className.indexOf( "fixed" ) != -1 ){ if( this.className.indexOf( "fixed" ) != -1 ){
text += '.'; text += '.';
} }
else if( this.className.indexOf( "dash" ) != -1 ){ else if( this.className.indexOf( "dash" ) != -1 ){
return; return;
} }
else{ else{
ch = $( this ).html(); ch = $( this ).html();
if( ch == "&nbsp;" ){ if( ch == "&nbsp;" ){
ch = " "; ch = " ";
} }
text += ch; text += ch;
} }
}); });
console.log( text );
if( text == this.getData( "text" ) ){ if( text == this.getData( "text" ) ){
this.elements.containerView.addClass( "answerRight" ); this.elements.containerView.addClass( "answerRight" );
} }
else{ else{
this.elements.containerView.removeClass( "answerRight" ); this.elements.containerView.removeClass( "answerRight" );
} }
}; };
window.w = w; window.w = w;
window.winstance = w; window.winstance = w;
w.modeView(); w.modeView();
$(window).mouseout(function(){
if(window.sankore){
sankore.setPreference("ordSplText", w.getData( "text" ));
}
});
}); });

170
resources/library/sankoreInteractivities/spl-word.wgt/scripts/spl-word.js
Unescape View File

@ -1,99 +1,113 @@
function createWord( word ) function createWord( word )
{ {
var s = ''; var s = '';
for( var i = 0; i < word.length; i++ ) for( var i = 0; i < word.length; i++ )
{ {
ch = word.charAt( i ); ch = word.charAt( i );
s += s +=
'<span class="upper">' + '<span class="upper">' +
'<span>' + ch + '</span>' + '<span>' + ch + '</span>' +
(( i < word.length - 1 ) ? (( i < word.length - 1 ) ?
'<span class="dash">&ndash;</span>' : '' ) + '<span class="dash">&ndash;</span>' : '' ) +
'</span>'; '</span>';
} }
return s; return s;
} }
$(document).ready(function() $(document).ready(function()
{ {
var w = new wcontainer( "#ub-widget" ); var w = new wcontainer( "#ub-widget" );
var words = "";
if(window.sankore)
words = (sankore.preference("ordSplWords", ""))?sankore.preference("ordSplWords", ""):"so*phis*ti*ca*ted";
else
words = "so*phis*ti*ca*ted";
w.setEditContent( '<div class="inputwrap"><input class="percent" value="' + words + '"></div>' );
w.setViewContent( '<span class="upper"><span class="dash fixed">&mdash;</span></span>' );
w.setData( "dashWidth", w.elements.container.find( "span.dash" ).outerWidth() );
w.setViewContent( "" );
w.setEditContent( '<div class="inputwrap"><input class="percent" value="so*phis*ti*ca*ted"></div>' ); // onViewMode
w.setViewContent( '<span class="upper"><span class="dash fixed">&mdash;</span></span>' ); w.onViewMode = function()
w.setData( "dashWidth", w.elements.container.find( "span.dash" ).outerWidth() ); {
w.setViewContent( "" ); var word = w.elements.container.find( "input" ).val().trim( ['*'] );
// onViewMode
w.onViewMode = function()
{
var word = w.elements.container.find( "input" ).val().trim( ['*'] );
w.setData( "word", word ); w.setData( "word", word );
word = word.replace( /\*/g, '' ); word = word.replace( /\*/g, '' );
w.setViewContent( createWord( word ) ); w.setViewContent( createWord( word ) );
w.elements.container.find( "span.upper" ).click( function(){ w.elements.container.find( "span.upper" ).click( function(){
$( this ).find( "span.dash" ).toggleClass( "fixed" ); $( this ).find( "span.dash" ).toggleClass( "fixed" );
w.adjustSize(); w.adjustSize();
w.checkAnswer(); w.checkAnswer();
}); });
w.checkAnswer(); w.checkAnswer();
}; };
// viewSize // viewSize
w.viewSize = function() w.viewSize = function()
{ {
var w = 0; var w = 0;
var h = 0; var h = 0;
winstance.elements.containerView.find( "span.upper span:visible" ).each( function() winstance.elements.containerView.find( "span.upper span:visible" ).each( function()
{ {
w += $( this ).outerWidth(); w += $( this ).outerWidth();
h = Math.max( h, $( this ).outerHeight() ); h = Math.max( h, $( this ).outerHeight() );
}); });
var dw = winstance.getData( "dashWidth" ); var dw = winstance.getData( "dashWidth" );
return { w: w+dw, h: h }; return {
}; w: w+dw,
h: h
};
};
// editSize // editSize
w.editSize = function() w.editSize = function()
{ {
return { return {
w: winstance.elements.containerEdit.find( "input" ).outerWidth( true ), w: winstance.elements.containerEdit.find( "input" ).outerWidth( true ),
h: winstance.elements.containerEdit.find( "input" ).outerHeight( true ), h: winstance.elements.containerEdit.find( "input" ).outerHeight( true ),
}; };
}; };
w.checkAnswer = function() w.checkAnswer = function()
{ {
var word = ""; var word = "";
this.elements.container.find( "span.upper span:visible" ).each( function() this.elements.container.find( "span.upper span:visible" ).each( function()
{ {
if( this.className.indexOf( "fixed" ) != -1 ){ if( this.className.indexOf( "fixed" ) != -1 ){
word += '*'; word += '*';
} }
else if( this.className.indexOf( "dash" ) != -1 ){ else if( this.className.indexOf( "dash" ) != -1 ){
return; return;
} }
else{ else{
word += $( this ).text(); word += $( this ).text();
} }
}); });
if( word == this.getData( "word" ) ){ if( word == this.getData( "word" ) ){
this.elements.container.addClass( "answerRight" ); this.elements.container.addClass( "answerRight" );
} }
else{ else{
this.elements.container.removeClass( "answerRight" ); this.elements.container.removeClass( "answerRight" );
} }
}; };
window.w = w; window.w = w;
window.winstance = w; window.winstance = w;
w.modeView(); w.modeView();
$(window).mouseout(function(){
if(window.sankore){
sankore.setPreference("ordSplWords", w.getData("word"));
}
});
}); });
Write Preview
Loading…
Cancel
Save