upgraded interactivities

preferencesAboutTextFull
unknown 13 years ago
parent 50062d9d68
commit 698ec0e2c7
  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

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

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

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

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

@ -1,99 +1,113 @@
function createWord( word )
{
var s = '';
for( var i = 0; i < word.length; i++ )
{
ch = word.charAt( i );
s +=
'<span class="upper">' +
'<span>' + ch + '</span>' +
(( i < word.length - 1 ) ?
'<span class="dash">&ndash;</span>' : '' ) +
'</span>';
}
return s;
var s = '';
for( var i = 0; i < word.length; i++ )
{
ch = word.charAt( i );
s +=
'<span class="upper">' +
'<span>' + ch + '</span>' +
(( i < word.length - 1 ) ?
'<span class="dash">&ndash;</span>' : '' ) +
'</span>';
}
return s;
}
$(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>' );
w.setViewContent( '<span class="upper"><span class="dash fixed">&mdash;</span></span>' );
w.setData( "dashWidth", w.elements.container.find( "span.dash" ).outerWidth() );
w.setViewContent( "" );
// onViewMode
w.onViewMode = function()
{
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 );
word = word.replace( /\*/g, '' );
w.setViewContent( createWord( word ) );
w.elements.container.find( "span.upper" ).click( function(){
$( this ).find( "span.dash" ).toggleClass( "fixed" );
w.adjustSize();
w.checkAnswer();
});
w.checkAnswer();
};
w.setData( "word", word );
word = word.replace( /\*/g, '' );
w.setViewContent( createWord( word ) );
w.elements.container.find( "span.upper" ).click( function(){
$( this ).find( "span.dash" ).toggleClass( "fixed" );
w.adjustSize();
w.checkAnswer();
});
w.checkAnswer();
};
// viewSize
w.viewSize = function()
{
var w = 0;
var h = 0;
// viewSize
w.viewSize = function()
{
var w = 0;
var h = 0;
winstance.elements.containerView.find( "span.upper span:visible" ).each( function()
{
w += $( this ).outerWidth();
h = Math.max( h, $( this ).outerHeight() );
});
var dw = winstance.getData( "dashWidth" );
winstance.elements.containerView.find( "span.upper span:visible" ).each( function()
{
w += $( this ).outerWidth();
h = Math.max( h, $( this ).outerHeight() );
});
var dw = winstance.getData( "dashWidth" );
return { w: w+dw, h: h };
};
return {
w: w+dw,
h: h
};
};
// editSize
w.editSize = function()
{
return {
w: winstance.elements.containerEdit.find( "input" ).outerWidth( true ),
h: winstance.elements.containerEdit.find( "input" ).outerHeight( true ),
};
};
// editSize
w.editSize = function()
{
return {
w: winstance.elements.containerEdit.find( "input" ).outerWidth( true ),
h: winstance.elements.containerEdit.find( "input" ).outerHeight( true ),
};
};
w.checkAnswer = function()
{
var word = "";
this.elements.container.find( "span.upper span:visible" ).each( function()
{
if( this.className.indexOf( "fixed" ) != -1 ){
word += '*';
}
else if( this.className.indexOf( "dash" ) != -1 ){
return;
}
else{
word += $( this ).text();
}
});
w.checkAnswer = function()
{
var word = "";
this.elements.container.find( "span.upper span:visible" ).each( function()
{
if( this.className.indexOf( "fixed" ) != -1 ){
word += '*';
}
else if( this.className.indexOf( "dash" ) != -1 ){
return;
}
else{
word += $( this ).text();
}
});
if( word == this.getData( "word" ) ){
this.elements.container.addClass( "answerRight" );
}
else{
this.elements.container.removeClass( "answerRight" );
}
};
if( word == this.getData( "word" ) ){
this.elements.container.addClass( "answerRight" );
}
else{
this.elements.container.removeClass( "answerRight" );
}
};
window.w = w;
window.winstance = w;
window.w = w;
window.winstance = w;
w.modeView();
w.modeView();
$(window).mouseout(function(){
if(window.sankore){
sankore.setPreference("ordSplWords", w.getData("word"));
}
});
});
Loading…
Cancel
Save