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.
387 lines
12 KiB
387 lines
12 KiB
13 years ago
|
|
||
|
/*
|
||
|
Sankore API
|
||
|
*/
|
||
|
function startEditing()
|
||
|
{
|
||
|
modeEdit();
|
||
|
}
|
||
|
|
||
|
function stopEditing()
|
||
|
{
|
||
|
modeView();
|
||
|
}
|
||
|
|
||
|
function initialize()
|
||
|
{
|
||
|
|
||
|
}
|
||
|
|
||
|
function checkResponse()
|
||
|
{
|
||
|
checkWord();
|
||
|
}
|
||
|
/*
|
||
|
/ END sankore api
|
||
|
*/
|
||
|
|
||
|
var sankoreLang = {
|
||
12 years ago
|
view: "Afficher",
|
||
13 years ago
|
edit: "Modifier",
|
||
12 years ago
|
example: "Cette phrase\nest un\nexemple",
|
||
13 years ago
|
wgt_name: "Ordonner des phrases",
|
||
13 years ago
|
reload: "Recharger",
|
||
13 years ago
|
slate: "ardoise",
|
||
12 years ago
|
pad: "tablette",
|
||
12 years ago
|
none: "aucun",
|
||
12 years ago
|
help: "Aide",
|
||
|
help_content: "<p><h2>Ordonner des phrases</h2></p>"+
|
||
12 years ago
|
"<p><h3>Ordonner des segments de phrases pour reconstituer le texte.</h3></p>"+
|
||
12 years ago
|
|
||
12 years ago
|
"<p>Des étiquettes avec des phrases sont dans le désordre. Le but est de les remettre en ordre pour avoir un texte compréhensible et correct. Lorsque le texte est en ordre, l’interactivité se colore en vert. L’activité s’effectue par un glisser-déposer des étiquettes pour remettre le texte en ordre.</p>"+
|
||
12 years ago
|
|
||
12 years ago
|
"<p>Le bouton “Recharger” réinitialise l’exercice.</p>"+
|
||
12 years ago
|
|
||
12 years ago
|
"<p>Le bouton “Modifier” vous permet : </p>"+
|
||
|
"<ul><li>de choisir le thème de l’interactivité : tablette, ardoise ou aucun (par défaut aucun),</li>"+
|
||
|
"<li>de déterminer le texte à reconstituer et le nombre de séparations dans l’énoncé.</li></ul>"+
|
||
12 years ago
|
|
||
12 years ago
|
"<p>Pour insérer du texte dans la zone, cliquez sur la zone et saisissez le texte souhaité.</p>"+
|
||
|
"<p>Pour ajouter des séparations dans l’énoncé, retournez à la ligne. Votre texte sera séparé lors d'un retour à la ligne.</p>"+
|
||
12 years ago
|
|
||
12 years ago
|
"<p>Le bouton “Afficher” vous permet d’utiliser l’activité.</p>",
|
||
|
theme:"Thème"
|
||
13 years ago
|
};
|
||
|
|
||
|
var sentence = "";
|
||
|
var curSentence = "";
|
||
|
|
||
|
if(window.sankore){
|
||
|
sentence = (sankore.preference("rightOrdPhrases", ""))?sankore.preference("rightOrdPhrases", ""):sankoreLang.example;
|
||
|
curSentence = (sankore.preference("currentOrdPhrases", ""))?sankore.preference("currentOrdPhrases", ""):"";
|
||
|
} else {
|
||
|
sentence = sankoreLang.example;
|
||
|
}
|
||
|
|
||
|
var doCheck = true;
|
||
|
|
||
|
// array of dom elements
|
||
|
var phrases = [];
|
||
|
|
||
|
var editMode = false; // just a flag
|
||
|
|
||
13 years ago
|
var wgtState = false; // just another flag
|
||
|
|
||
13 years ago
|
// 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;
|
||
|
|
||
|
$(document).ready(function(){
|
||
12 years ago
|
if(window.sankore)
|
||
|
if(sankore.preference("ord_phrases_style","")){
|
||
|
changeStyle(sankore.preference("ord_phrases_style",""));
|
||
|
$("#style_select").val(sankore.preference("ord_phrases_style",""));
|
||
|
} else
|
||
|
changeStyle("3")
|
||
|
|
||
13 years ago
|
$("#wgt_display").text(sankoreLang.view);
|
||
|
$("#wgt_edit").text(sankoreLang.edit);
|
||
12 years ago
|
$("#wgt_help").text(sankoreLang.help);
|
||
|
$("#help").html(sankoreLang.help_content);
|
||
12 years ago
|
$("#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());
|
||
|
})
|
||
12 years ago
|
|
||
13 years ago
|
$("#wgt_display, #wgt_edit").click(function(event){
|
||
|
if(this.id == "wgt_display"){
|
||
|
if(!$(this).hasClass("selected")){
|
||
|
$(this).addClass("selected");
|
||
|
$("#wgt_edit").removeClass("selected");
|
||
12 years ago
|
$("#parameters").css("display","none");
|
||
13 years ago
|
$(this).css("display", "none");
|
||
|
$("#wgt_edit").css("display", "block");
|
||
|
modeView();
|
||
|
}
|
||
|
} else {
|
||
|
if(!$(this).hasClass("selected")){
|
||
|
$(this).addClass("selected");
|
||
|
$("#wgt_display").removeClass("selected");
|
||
12 years ago
|
$("#parameters").css("display","block");
|
||
13 years ago
|
$(this).css("display", "none");
|
||
|
$("#wgt_display").css("display", "block");
|
||
|
modeEdit();
|
||
|
}
|
||
|
}
|
||
|
});
|
||
12 years ago
|
|
||
13 years ago
|
$("#wgt_name").text(sankoreLang.wgt_name);
|
||
13 years ago
|
|
||
12 years ago
|
$("#wgt_help").click(function(){
|
||
|
var tmp = $(this);
|
||
|
if($(this).hasClass("open")){
|
||
12 years ago
|
$(this).removeClass("help_pad").removeClass("help_wood")
|
||
12 years ago
|
$("#help").slideUp("100", function(){
|
||
|
tmp.removeClass("open");
|
||
|
$("#ub-widget").show();
|
||
|
});
|
||
12 years ago
|
} else {
|
||
|
($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad");
|
||
12 years ago
|
$("#ub-widget").hide();
|
||
|
$("#help").slideDown("100", function(){
|
||
|
tmp.addClass("open");
|
||
|
});
|
||
|
}
|
||
|
});
|
||
|
|
||
13 years ago
|
$("#wgt_reload").text(sankoreLang.reload).click(function(){
|
||
13 years ago
|
if(wgtState)
|
||
|
$("#wgt_display").trigger("click");
|
||
|
else
|
||
|
{
|
||
|
$( "#mp_word" ).empty();
|
||
|
|
||
|
var phrases;
|
||
|
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();
|
||
|
}
|
||
13 years ago
|
});
|
||
13 years ago
|
|
||
13 years ago
|
|
||
|
})
|
||
|
|
||
|
function str_replace( w, b, s ){
|
||
|
while( s.indexOf( w ) != -1 ){
|
||
|
s = s.replace( w, b );
|
||
|
}
|
||
|
return s;
|
||
|
}
|
||
|
|
||
|
/*
|
||
|
==============
|
||
|
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;
|
||
|
}
|
||
|
|
||
|
/*
|
||
|
=================
|
||
|
createWordLetters
|
||
|
=================
|
||
|
returns array of dom elements
|
||
|
*/
|
||
|
function createElements( sentence )
|
||
|
{
|
||
|
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;
|
||
|
}
|
||
|
|
||
|
//changing the style
|
||
|
function changeStyle(val){
|
||
12 years ago
|
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");
|
||
12 years ago
|
$("#wgt_help").removeClass("pad_color").removeClass("pad_help");
|
||
12 years ago
|
$("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
|
||
|
$("#wgt_name").removeClass("pad_color");
|
||
12 years ago
|
$("#wgt_display").addClass("display_wood");
|
||
|
$("#style_select option:first").attr('selected',true);
|
||
|
$("body, html").removeClass("without_radius").addClass("radius_ft");
|
||
12 years ago
|
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");
|
||
12 years ago
|
$("#wgt_help").addClass("pad_color").addClass("pad_help");
|
||
12 years ago
|
$("#wgt_edit").addClass("pad_color").addClass("pad_edit");
|
||
|
$("#wgt_name").addClass("pad_color");
|
||
12 years ago
|
$("#wgt_display").removeClass("display_wood");
|
||
|
$("#style_select option:first").next().attr('selected',true);
|
||
|
$("body, html").removeClass("without_radius").removeClass("radius_ft");
|
||
12 years ago
|
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");
|
||
12 years ago
|
$("#wgt_help").addClass("pad_color").addClass("pad_help");
|
||
12 years ago
|
$("#wgt_reload").addClass("pad_color").addClass("pad_reload");
|
||
|
$("#wgt_edit").addClass("pad_color").addClass("pad_edit");
|
||
|
$("#wgt_name").addClass("pad_color");
|
||
12 years ago
|
$("#wgt_display").removeClass("display_wood");
|
||
|
$("#style_select option:last").attr('selected',true);
|
||
|
$("body, html").addClass("without_radius").removeClass("radius_ft");
|
||
12 years ago
|
break;
|
||
13 years ago
|
}
|
||
|
}
|
||
|
|
||
|
function checkSentence()
|
||
|
{
|
||
|
if( !doCheck )
|
||
|
return;
|
||
|
|
||
|
var ph = [];
|
||
|
$( "#mp_word .phrase" ).each( function()
|
||
|
{
|
||
|
ph.push( $( this ).text() );
|
||
|
});
|
||
|
if( ph.join( "\n" ) == str_replace( "\r", "", sentence ) ){
|
||
|
$( "#mp_word .phrase" ).addClass( "right" );
|
||
|
} else {
|
||
|
$( "#mp_word .phrase" ).removeClass( "right" );
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/*
|
||
|
==================
|
||
|
modeView()
|
||
|
==================
|
||
|
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" );
|
||
|
}
|
||
|
|
||
13 years ago
|
wgtState = false;
|
||
|
|
||
13 years ago
|
// clean the previous word
|
||
|
$( "#mp_word" ).empty();
|
||
|
|
||
|
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
|
||
13 years ago
|
$( "#mp_word" ).sortable();
|
||
|
|
||
|
checkSentence();
|
||
13 years ago
|
}
|
||
|
|
||
|
/*
|
||
|
================
|
||
|
modeEdit
|
||
|
================
|
||
|
*/
|
||
|
function modeEdit()
|
||
|
{
|
||
|
editMode = true;
|
||
13 years ago
|
wgtState = true;
|
||
13 years ago
|
|
||
|
$( "#mp_word").css( "margin-left", 0 ).empty()
|
||
|
.append('<textarea cols="50" rows="5">'+sentence+'</textarea>');
|
||
|
}
|
||
|
|
||
13 years ago
|
if (window.widget) {
|
||
|
window.widget.onleave = function(){
|
||
12 years ago
|
sankore.setPreference("ord_phrases_style", $("#style_select").find("option:selected").val());
|
||
13 years ago
|
if($( "#mp_word textarea" ).val())
|
||
|
{
|
||
|
modeView();
|
||
|
var ph = [];
|
||
|
$( "#mp_word .phrase" ).each( function()
|
||
|
{
|
||
|
ph.push( $( this ).text() );
|
||
13 years ago
|
});
|
||
13 years ago
|
sankore.setPreference("currentOrdPhrases", ph.join( "\n" ));
|
||
|
modeEdit();
|
||
|
}
|
||
|
else{
|
||
|
ph = [];
|
||
|
$( "#mp_word .phrase" ).each( function()
|
||
|
{
|
||
|
ph.push( $( this ).text() );
|
||
13 years ago
|
});
|
||
13 years ago
|
sankore.setPreference("currentOrdPhrases", ph.join( "\n" ));
|
||
|
}
|
||
|
sankore.setPreference("rightOrdPhrases", sentence);
|
||
|
}
|
||
12 years ago
|
}
|