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. 237
      resources/library/sankoreInteractivities/ord-phrases.wgt/template/scripts/template2.js
  2. 275
      resources/library/sankoreInteractivities/ord-words.wgt/template/scripts/template2.js
  3. 320
      resources/library/sankoreInteractivities/spl-phrase.wgt/scripts/app.js
  4. 324
      resources/library/sankoreInteractivities/spl-text.wgt/scripts/app2.js
  5. 194
      resources/library/sankoreInteractivities/spl-word.wgt/scripts/spl-word.js

237
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 ) );
// in sankore api there would be a function to check
// the answer, so no update parameter would be needed for( i in phrases ){
$( "#mp_word" ).sortable(); $("#mp_word").append( phrases[i] );
if( !isSankore ){ }
$( "#mp_word" ).sortable( { update: checkSentence } );
} else // in sankore api there would be a function to check
$( "#mp_word" ).sortable(); // the answer, so no update parameter would be needed
$( "#mp_word" ).sortable();
// adjustHeight if( !isSankore ){
var aHeight = $( phrases[0] ).outerHeight( true ); $( "#mp_word" ).sortable( {
update: checkSentence
// apply new width } );
adjust( aHeight * phrases.length ); } else
$( "#mp_word" ).sortable();
// adjustHeight
var aHeight = $( phrases[0] ).outerHeight( true );
// apply new width
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();
}); });

275
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 ) );
// in sankore api there would be a function to check
// the answer, so no update parameter would be needed for( i in letters ){
if( !isSankore ){ $("#mp_word").append( letters[i] );
$( "#mp_word" ).sortable( { update: checkWord } ); }
} else $( "#mp_word" ).sortable();
// in sankore api there would be a function to check
// adjustWidth // the answer, so no update parameter would be needed
var totalLettersWidth = 0; if( !isSankore ){
for( i in letters ){ $( "#mp_word" ).sortable( {
var currentWidth = $( letters[i] ).outerWidth( true ); update: checkWord
totalLettersWidth += currentWidth; } );
} } else $( "#mp_word" ).sortable();
totalLettersWidth += 1;
// adjustWidth
var width = Math.max( var totalLettersWidth = 0;
totalLettersWidth, for( i in letters ){
min_view_width var currentWidth = $( letters[i] ).outerWidth( true );
); totalLettersWidth += currentWidth;
}
// shift the words to the right to center them totalLettersWidth += 1;
if( width > totalLettersWidth ){
$( "#mp_word" ).css( "margin-left", Math.round( (width - totalLettersWidth)/2 ) ); var width = Math.max(
} totalLettersWidth,
else{ min_view_width
$( "#mp_word" ).css( "margin-left", 0 ); );
}
// shift the words to the right to center them
// apply new width if( width > totalLettersWidth ){
adjustWidth( width ); $( "#mp_word" ).css( "margin-left", Math.round( (width - totalLettersWidth)/2 ) );
}
else{
$( "#mp_word" ).css( "margin-left", 0 );
}
// apply new 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();
}); });

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

324
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" );
w.maxWidth = 600; var sentences = "";
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>' ); if(window.sankore)
w.setViewContent( '<div class="upper"><div class="dash fixed">. </div></div>' ); 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.";
w.setData( "dashWidth", w.elements.container.find( ".dash" ).outerWidth() ); else
w.setViewContent( '<div class="upper"><div class="dash fixed">M</div></div>' ); 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.setData( "lineHeight", w.elements.container.find( ".dash" ).outerHeight() );
w.setViewContent( "" ); w.maxWidth = 600;
w.setEditContent( '<div class="inputwrap"><textarea class="percent">' + sentences + '</textarea></div>' );
// onViewMode w.setViewContent( '<div class="upper"><div class="dash fixed">. </div></div>' );
w.onViewMode = function() w.setData( "dashWidth", w.elements.container.find( ".dash" ).outerWidth() );
{ w.setViewContent( '<div class="upper"><div class="dash fixed">M</div></div>' );
// clean up the text w.setData( "lineHeight", w.elements.container.find( ".dash" ).outerHeight() );
var text = w.elements.container.find( "textarea" ).val() w.setViewContent( "" );
.replace( /\r/g, '' ).replace( /\n/g, ' ' ).replace( / /g, ' ' );
// store the text // onViewMode
w.setData( "text", text ); w.onViewMode = function()
{
// remove all dots (they are to be set during the exercise) // clean up the text
text = text.replace( /\. /g, ' ' ).trim( ["."] ); var text = w.elements.container.find( "textarea" ).val()
.replace( /\r/g, '' ).replace( /\n/g, ' ' ).replace( / /g, ' ' );
// create the html
w.setViewContent( createElements( text ) ); // store the text
w.setData( "text", text );
// the behaviour
w.elements.containerView.find( ".letter" ) // remove all dots (they are to be set during the exercise)
.mouseover( function() text = text.replace( /\. /g, ' ' ).trim( ["."] );
{
var el = $( this ).next(); // create the html
w.setViewContent( createElements( text ) );
// determine new hover class
var is_fixed = ( el.get( 0 ).className.indexOf( "fixed" ) != -1 ); // the behaviour
var hover_class = is_fixed? w.elements.containerView.find( ".letter" )
"dash_hover_fixed" : "dash_hover"; .mouseover( function()
{
// assign new hover class var el = $( this ).next();
el.addClass( hover_class )
.data( "hc", hover_class ); // determine new hover class
}) var is_fixed = ( el.get( 0 ).className.indexOf( "fixed" ) != -1 );
.mouseout( function() var hover_class = is_fixed?
{ "dash_hover_fixed" : "dash_hover";
var el = $( this ).next();
// remove current hover class // assign new hover class
var hc = el.data( "hc" ); el.addClass( hover_class )
el.removeClass( hc ); .data( "hc", hover_class );
}) })
.click( function() .mouseout( function()
{ {
var el = $( this ).next(); var el = $( this ).next();
// remove current hover class
// remove current hover class var hc = el.data( "hc" );
$( this ).trigger( "mouseout" ); el.removeClass( hc );
})
// toggle fixed class .click( function()
el.toggleClass( "fixed" ); {
var el = $( this ).next();
// determine new hover class
// assign new hover class // remove current hover class
$( this ).trigger( "mouseover" ); $( this ).trigger( "mouseout" );
w.checkAnswer(); // toggle fixed class
w.adjustSize(); el.toggleClass( "fixed" );
});
// determine new hover class
w.checkAnswer(); // assign new hover class
}; $( this ).trigger( "mouseover" );
// viewSize w.checkAnswer();
w.viewSize = function() w.adjustSize();
{ });
var w = 0;
var h = 0; w.checkAnswer();
};
var dh = winstance.getData( "lineHeight" );
var dw = winstance.getData( "dashWidth" ); // viewSize
w.viewSize = function()
winstance.elements.containerView.find( "div:visible" ).each( function() {
{ var w = 0;
w += $( this ).outerWidth(); var h = 0;
h = Math.max( h, $( this ).outerHeight( true ) );
}); var dh = winstance.getData( "lineHeight" );
var dw = winstance.getData( "dashWidth" );
var square = w*h;
h = Math.max( h, $( winstance.elements.containerView ).height() ); winstance.elements.containerView.find( "div:visible" ).each( function()
{
if( winstance.maxWidth ) w += $( this ).outerWidth();
{ h = Math.max( h, $( this ).outerHeight( true ) );
w = Math.min( w, winstance.maxWidth ); });
h = parseInt( square / w );
} var square = w*h;
h = Math.max( h, $( winstance.elements.containerView ).height() );
return { w: w, h: h+dh };
}; if( winstance.maxWidth )
{
// editSize w = Math.min( w, winstance.maxWidth );
w.editSize = function() h = parseInt( square / w );
{ }
return {
w: winstance.elements.containerEdit.find( "textarea" ).parent().outerWidth( true ), return {
h: winstance.elements.containerEdit.find( "textarea" ).parent().outerHeight( true ), w: w,
}; h: h+dh
}; };
};
w.checkAnswer = function() // editSize
{ w.editSize = function()
var text = ""; {
var ch = ""; return {
this.elements.containerView.find( "div:visible" ).each( function() w: winstance.elements.containerEdit.find( "textarea" ).parent().outerWidth( true ),
{ h: winstance.elements.containerEdit.find( "textarea" ).parent().outerHeight( true ),
if( this.className.indexOf( "fixed" ) != -1 ){ };
text += '.'; };
}
else if( this.className.indexOf( "dash" ) != -1 ){
return; w.checkAnswer = function()
} {
else{ var text = "";
ch = $( this ).html(); var ch = "";
if( ch == "&nbsp;" ){ this.elements.containerView.find( "div:visible" ).each( function()
ch = " "; {
} if( this.className.indexOf( "fixed" ) != -1 ){
text += ch; text += '.';
} }
}); else if( this.className.indexOf( "dash" ) != -1 ){
return;
console.log( text ); }
else{
if( text == this.getData( "text" ) ){ ch = $( this ).html();
this.elements.containerView.addClass( "answerRight" ); if( ch == "&nbsp;" ){
} ch = " ";
else{ }
this.elements.containerView.removeClass( "answerRight" ); text += ch;
} }
}; });
if( text == this.getData( "text" ) ){
window.w = w; this.elements.containerView.addClass( "answerRight" );
window.winstance = w; }
else{
w.modeView(); this.elements.containerView.removeClass( "answerRight" );
}
};
window.w = w;
window.winstance = w;
w.modeView();
$(window).mouseout(function(){
if(window.sankore){
sankore.setPreference("ordSplText", w.getData( "text" ));
}
});
}); });

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