новые иконки в OpenBoard
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
OpenBoard/resources/library/interactivities/Order Words.wgt/scripts/template2.js

435 lines
13 KiB

/*
Sankore API
*/
function startEditing()
{
modeEdit();
}
function stopEditing()
{
modeView();
}
function initialize()
{
}
function checkResponse()
{
checkWord();
}
/*
/ END sankore api
*/
var sankoreLang = {
view: "Display",
edit: "Edit",
example: "a*long*,*long*time*ago*...",
wgt_name: "Order words",
reload: "Reload",
slate: "slate",
pad: "pad",
none: "none",
help: "Help",
help_content:
"<p><h2>Order words </h2> </p>" +
"<p><h3>Order words to reconstruct a correct sentence</h3></p>" +
"<p>The interactivity displays labels in a random order. Drag and drop words in correct order. If the result is correct, the area turns in green.</p> "+
"<p>“Reload” button resets the exercises. </p>" +
"<p> Enter the “Edit” mode to : </p>" +
"<ul> <li> choose the theme of the App : pad, slate, or none (by default : none), </li>" +
"<li> Determine the sentence and place separation between words. </li> </ul>" +
"<p>To create a new exercise : </p>" +
"<ul><li>insert the desired sentence,</li>" +
"<li> To add spaces in the sentence, insert “*” between each word. Do not place a star at the beginning or the end of your sentence.</li></ul>" +
"<p>“Display” button comes back to the activity.</p>",
theme: "Theme"
};
var word = "";
var curWord = "";
if(window.sankore){
word = (sankore.preference("rightOrdWords", ""))?sankore.preference("rightOrdWords", ""):sankoreLang.example;
curWord = (sankore.preference("currentOrdWords", ""))?sankore.preference("currentOrdWords", ""):"";
} else {
word = sankoreLang.example;
}
// array of dom elements
var letters = [];
var editMode = false; // just a flag
var wgtState = false; // just another flag
// if use the "edit" button or rely on the api instead
var isSankore = false;
// whether to do window.resize or not (window = widget area)
var isBrowser = ( typeof( widget ) == "undefined" );
// hardcoded parameters, not very good
var input_width = 606;
var widget_padding = 0;
var min_view_width = 400;
$(document).ready(function(){
if(window.sankore){
if(sankore.preference("ord_words_style","")){
changeStyle(sankore.preference("ord_words_style",""));
} else
changeStyle("3")
} else
changeStyle("3")
$("#wgt_display").text(sankoreLang.view);
$("#wgt_edit").text(sankoreLang.edit);
$("#wgt_help").text(sankoreLang.help);
$("#help").html(sankoreLang.help_content);
$("#style_select option[value='1']").text(sankoreLang.slate);
$("#style_select option[value='2']").text(sankoreLang.pad);
$("#style_select option[value='3']").text(sankoreLang.none);
var tmpl = $("div.inline label").html();
$("div.inline label").html(sankoreLang.theme + tmpl)
$("#style_select").change(function (event){
changeStyle($(this).find("option:selected").val());
})
$("#wgt_display, #wgt_edit").click(function(event){
if(this.id == "wgt_display"){
if(!$(this).hasClass("selected")){
$(this).addClass("selected");
$("#wgt_edit").removeClass("selected");
$("#parameters").css("display","none");
$(this).css("display", "none");
$("#wgt_edit").css("display", "block");
modeView();
}
} else {
if(!$(this).hasClass("selected")){
$(this).addClass("selected");
$("#wgt_display").removeClass("selected");
$("#parameters").css("display","block");
$(this).css("display", "none");
$("#wgt_display").css("display", "block");
modeEdit();
}
}
});
$("#wgt_name").text(sankoreLang.wgt_name);
$("#wgt_help").click(function(){
var tmp = $(this);
if($(this).hasClass("open")){
$(this).removeClass("help_pad").removeClass("help_wood")
$("#help").slideUp("100", function(){
tmp.removeClass("open");
$("#ub-widget").show();
});
} else {
($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad");
$("#ub-widget").hide();
$("#help").slideDown("100", function(){
tmp.addClass("open");
});
}
});
$("#wgt_reload").text(sankoreLang.reload).click(function(){
if(wgtState)
$("#wgt_display").trigger("click");
else
{
$( "#mp_word" ).empty();
// create new set of letters
var letters;
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
);
// 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 );
}
}
});
})
/*
=================
createWordLetters
=================
returns array of dom elements
*/
function createWordLetters( word )
{
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;
}
//changing the style
function changeStyle(val){
switch(val){
case "1":
$(".b_top_left").removeClass("btl_pad").removeClass("without_back");
$(".b_top_center").removeClass("btc_pad").removeClass("without_back");
$(".b_top_right").removeClass("btr_pad").removeClass("without_back");
$(".b_center_left").removeClass("bcl_pad").removeClass("without_back");
$(".b_center_right").removeClass("bcr_pad").removeClass("without_back");
$(".b_bottom_right").removeClass("bbr_pad").removeClass("without_back");
$(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back");
$(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
$("#wgt_reload").removeClass("pad_color").removeClass("pad_reload");
$("#wgt_help").removeClass("pad_color").removeClass("pad_help");
$("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
$("#wgt_name").removeClass("pad_color");
$("#wgt_display").addClass("display_wood");
$("#style_select option:first").attr('selected',true);
$("body, html").removeClass("without_radius").addClass("radius_ft");
break;
case "2":
$(".b_top_left").addClass("btl_pad").removeClass("without_back");
$(".b_top_center").addClass("btc_pad").removeClass("without_back");
$(".b_top_right").addClass("btr_pad").removeClass("without_back");
$(".b_center_left").addClass("bcl_pad").removeClass("without_back");
$(".b_center_right").addClass("bcr_pad").removeClass("without_back");
$(".b_bottom_right").addClass("bbr_pad").removeClass("without_back");
$(".b_bottom_left").addClass("bbl_pad").removeClass("without_back");
$(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
$("#wgt_reload").addClass("pad_color").addClass("pad_reload");
$("#wgt_help").addClass("pad_color").addClass("pad_help");
$("#wgt_edit").addClass("pad_color").addClass("pad_edit");
$("#wgt_name").addClass("pad_color");
$("#wgt_display").removeClass("display_wood");
$("#style_select option:first").next().attr('selected',true);
$("body, html").removeClass("without_radius").removeClass("radius_ft");
break;
case "3":
$(".b_top_left").addClass("without_back").removeClass("btl_pad");
$(".b_top_center").addClass("without_back").removeClass("btc_pad");
$(".b_top_right").addClass("without_back").removeClass("btr_pad");
$(".b_center_left").addClass("without_back").removeClass("bcl_pad");
$(".b_center_right").addClass("without_back").removeClass("bcr_pad");
$(".b_bottom_right").addClass("without_back").removeClass("bbr_pad");
$(".b_bottom_left").addClass("without_back").removeClass("bbl_pad");
$(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
$("#wgt_help").addClass("pad_color").addClass("pad_help");
$("#wgt_reload").addClass("pad_color").addClass("pad_reload");
$("#wgt_edit").addClass("pad_color").addClass("pad_edit");
$("#wgt_name").addClass("pad_color");
$("#wgt_display").removeClass("display_wood");
$("#style_select option:last").attr('selected',true);
$("body, html").addClass("without_radius").removeClass("radius_ft");
break;
}
}
/*
=====================
checkWord
=====================
scans the letters and checks
if they are in the right order
*/
function checkWord()
{
var str = "";
$( "#mp_word .letter" ).each( function(){
str += $(this).text();
});
var w = word;
while( w.indexOf( '*' ) != -1 )
{
w = w.replace( '*', '' );
}
//alert(str + " | " + w)
if( str == w ){
$( "#mp_word .letter" ).addClass( "right" );
//message( "Right!" );
} else {
$( "#mp_word .letter" ).removeClass( "right" );
}
}
/*
==============
shuffle
==============
shuffles an array
*/
function shuffle( arr )
{
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;
}
/*
==================
modeView()
==================
turns the widget into the view mode
*/
function modeView()
{
if( editMode ){
word = $( "#mp_word .wgt_cont" ).val();
}
wgtState = false;
// clean the previous word
$( "#mp_word" ).empty();
// 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
);
// 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 );
}
checkWord();
}
/*
================
modeEdit
================
*/
function modeEdit()
{
editMode = true;
wgtState = true;
$( "#mp_word").sortable( "destroy" );
$( "#mp_word").css( "margin-left", 0 ).empty().append('<textarea class="wgt_cont">'+word+'</textarea>');
}
if (window.widget) {
window.widget.onleave = function(){
sankore.setPreference("ord_words_style", $("#style_select").find("option:selected").val());
if($( "#mp_word .wgt_cont" ).val())
{
modeView();
var str = "";
$( "#mp_word .letter" ).each( function(){
str += $(this).text() + "*";
});
str = str.substr(0, str.length - 1);
sankore.setPreference("currentOrdWords", str);
modeEdit();
}
else{
str = "";
$( "#mp_word .letter" ).each( function(){
str += $(this).text() + "*";
});
str = str.substr(0, str.length - 1);
sankore.setPreference("currentOrdWords", str);
}
sankore.setPreference("rightOrdWords", word);
}
}