новые иконки в OpenBoard
 
 
 
 
 
 

170 lines
3.9 KiB

function createElements( text )
{
var s = '';
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>';
}
return s;
}
$(document).ready(function()
{
var w = new wcontainer( "#ub-widget" );
w.maxWidth = 600;
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, ' ' );
// store the text
w.setData( "text", text );
// remove all dots (they are to be set during the exercise)
text = text.replace( /\. /g, ' ' ).trim( ["."] );
// create the html
w.setViewContent( createElements( text ) );
// 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";
// 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" );
// toggle fixed class
el.toggleClass( "fixed" );
// determine new hover class
// assign new hover class
$( this ).trigger( "mouseover" );
w.checkAnswer();
w.adjustSize();
});
w.checkAnswer();
};
// viewSize
w.viewSize = function()
{
var w = 0;
var h = 0;
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 ) );
});
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 );
}
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 ),
};
};
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 );
if( text == this.getData( "text" ) ){
this.elements.containerView.addClass( "answerRight" );
}
else{
this.elements.containerView.removeClass( "answerRight" );
}
};
window.w = w;
window.winstance = w;
w.modeView();
});