var sankoreLang = {
display: "Afficher",
edit: "Modifier",
first_desc: "Fruits",
second_desc: "Légumes",
potatoes: "Pomme de terre",
carrot: "Carotte",
onion: "Oignon",
apple: "Pomme",
pear: "Poire",
enter: "Saisir le nom de la catégorie ici ...",
add: "Nouveau bloc",
text: "Texte",
wgt_name: "Catégoriser des textes",
reload: "Recharger",
slate: "ardoise",
pad: "tablette",
none: "aucun",
help: "Aide",
help_content: "
Catégoriser des textes "+
"
Classer des étiquettes de mots en fonction de la dénomination de la catégorie. "+
"L’activité s’effectue par un glisser-déposer de l’étiquette de mots dans la catégorie correspondante. Tant que toutes les étiquettes de mots ne sont pas classées, la zone reste rouge. Une fois que toutes les étiquettes de mots sont classées dans la bonne catégorie, la zone se colore en vert.
"+
"Le bouton “Recharger” réinitialise les exercices.
"+
"Le bouton “Modifier” vous permet :
"+
"de choisir le thème de l’interactivité : tablette, ardoise ou aucun (par défaut aucun), "+
"de modifier un exercice ou d’en créer de nouveaux dans la même activité. "+
"En mode édition, pour créer un nouvel exercice, cliquez sur “Nouveau bloc” en bas, une zone bleue apparaît, c’est une catégorie, puis :
"+
"insérez le nom de la catégorie (par exemple “fruits”, “légumes”, “mammifères”...) en cliquant dans le champ de texte “Saisir le nom de la catégorie ici …”, "+
"cliquez sur le gros “+” situé à gauche de la catégorie ce qui vous permet de rajouter des étiquettes de mots, "+
"entrez des mots dans ces étiquettes, "+
"ajoutez ensuite une catégorie (ou plusieurs) en cliquant sur le signe “+” situé à droite de la catégorie, complétez par son nom et ajoutez des étiquettes de mots. "+
"Pour supprimer une étiquette de mots, cliquez sur la croix située dans le coin supérieur droit de celle-ci.
"+
"Pour supprimer une catégorie, cliquez sur le signe “-” situé à droite de celle-ci.
"+
"Pour supprimer un exercice, cliquez sur la croix à gauche du numéro de l’exercice.
"+
"Le bouton “Afficher” vous permet d’utiliser l’activité.
",
theme: "Thème"
};
//main function
function start(){
$("#wgt_display").text(sankoreLang.display);
$("#wgt_edit").text(sankoreLang.edit);
$("#wgt_name").text(sankoreLang.wgt_name);
$("#wgt_reload").text(sankoreLang.reload);
$("#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)
if(window.sankore){
if(sankore.preference("categoriser_text","")){
var data = jQuery.parseJSON(sankore.preference("categoriser_text",""));
importData(data);
} else {
showExample();
}
}
else
showExample();
if (window.widget) {
window.widget.onleave = function(){
exportData();
}
}
$("#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");
$("#data").show();
});
} else {
($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad");
$("#data").hide();
$("#help").slideDown("100", function(){
tmp.addClass("open");
});
}
});
$("#wgt_reload").click(function(){
if($("#wgt_display").hasClass("selected")){
$("#wgt_edit").trigger("click");
$("#wgt_display").trigger("click");
} else {
$("#wgt_display").trigger("click");
}
});
$("#wgt_reload, #wgt_display, #wgt_edit").mouseover(function(){
exportData();
});
$("#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");
$(".add_block").remove();
$(".cont").each(function(){
var container = $(this);
var tmp_i = 0;
var tmp_right = "";
var tmp_array = [];
container.find(".close_cont").remove();
container.find(".imgs_cont").each(function(){
$(this).find(".del_category").remove();
$(this).find(".add_img").remove();
$(this).find(".add_category").remove();
$(this).removeAttr("ondragenter")
.removeAttr("ondragleave")
.removeAttr("ondragover")
.removeAttr("ondrop")
.find(".cat_desc").attr("disabled","disabled");
var tmp_count = $(this).find(".img_block").size();
$(this).find("input[name='count']").val(tmp_count);
$(this).find(".img_block").each(function(){
$(this).find(".close_img").remove();
var tmp_text = $(this).find(".text_cont");
tmp_text.removeAttr("contenteditable")
.css("margin", ($(this).height() - tmp_text.height())/2 + "px 0px");
tmp_array.push($(this));
$(this).remove();
});
$(this).droppable({
hoverClass: 'dropHere',
drop: function(event, ui) {
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){
var tmp_ui = $(ui.draggable).parent();
$(this).append($(ui.draggable));
checkCorrectness(tmp_ui);
}
}
});
$(this).removeAttr("style");
});
var all_imgs = $("").appendTo(container);
tmp_array = shuffle(tmp_array);
for(var i = 0; i
").appendTo(container);
container.find(".imgs_cont").each(function(){
$(" ").appendTo($(this));
$(" ").appendTo($(this));
$(this).removeClass("red_cont")
.removeClass("green_cont")
.addClass("def_cont")
.droppable("destroy")
.find(".cat_desc").removeAttr("disabled");
var tmp_img_cont = $(this);
var tmp_mask = $(this).find("input[name='mask']").val();
container.find(".img_block").each(function(){
$(this).draggable("destroy")
.find(".text_cont").attr("contenteditable","true")
.removeAttr("style");
if($(this).find("input").val() == tmp_mask){
$("").appendTo($(this));
$(this).appendTo(tmp_img_cont);
}
});
$("
").appendTo($(this));
});
container.find(".all_imgs").remove();
});
$("
" + sankoreLang.add + "
").appendTo("#data");
$(this).css("display", "none");
$("#wgt_display").css("display", "block");
}
}
});
//add new block
$(".add_block").live("click", function(){
addContainer();
});
//adding new img
$(".add_img").live("click", function(){
addText($(this).parent(), $(this));
});
//deleting a block
$(".close_cont").live("click",function(){
$(this).parent().remove();
refreshBlockNumbers();
});
//deleting the img block
$(".close_img").live("click", function(){
$(this).parent().remove();
});
//adding new category
$(".add_category").live("click",function(){
addCategory($(this).parent());
});
//deleting the category
$(".del_category").live("click",function(){
if($(this).parent().parent().find(".imgs_cont").size() == 1){
$(this).parent().find(".img_block").remove();
$(this).parent().find(".cat_desc").val(sankoreLang.enter);
} else {
$(this).parent().remove();
}
});
}
//export
function exportData(){
var array_to_export = [];
if($("#wgt_edit").hasClass("selected")){
$(".cont").each(function(){
var cont_obj = new Object();
cont_obj.mode = "edit";
cont_obj.conts = [];
$(this).find(".imgs_cont").each(function(){
var img_cont = new Object();
cont_obj.style = $("#style_select").find("option:selected").val();
img_cont.mask = $(this).find("input[name='mask']").val();
img_cont.count = $(this).find(".img_block").size();
img_cont.text = $(this).find(".cat_desc").val();
img_cont.imgs = [];
$(this).find(".img_block").each(function(){
var img_obj = new Object();
img_obj.value = $(this).find("input").val();
img_obj.text = $(this).find(".text_cont").text();
img_cont.imgs.push(img_obj);
});
cont_obj.conts.push(img_cont);
});
array_to_export.push(cont_obj);
});
} else {
$(".cont").each(function(){
var cont_obj = new Object();
cont_obj.mode = "display";
cont_obj.conts = [];
$(this).find(".imgs_cont").each(function(){
var img_cont = new Object();
cont_obj.style = $("#style_select").find("option:selected").val();
img_cont.mask = $(this).find("input[name='mask']").val();
img_cont.count = $(this).find("input[name='count']").val();
img_cont.text = $(this).find(".cat_desc").val();
img_cont.imgs = [];
$(this).find(".img_block").each(function(){
var img_obj = new Object();
img_obj.value = $(this).find("input").val();
img_obj.text = $(this).find(".text_cont").text();
img_cont.imgs.push(img_obj);
});
cont_obj.conts.push(img_cont);
});
cont_obj.all_imgs = [];
$(this).find(".all_imgs .img_block").each(function(){
var img = new Object();
img.value = $(this).find("input").val();
img.text = $(this).find(".text_cont").text();
cont_obj.all_imgs.push(img);
});
array_to_export.push(cont_obj);
});
}
if($(".cont").size() == 0){
var cont_obj = new Object();
cont_obj.style = $("#style_select").find("option:selected").val();
cont_obj.tmp = "clear";
array_to_export.push(cont_obj);
}
sankore.setPreference("categoriser_text", JSON.stringify(array_to_export));
}
//import
function importData(data){
var tmp = 0;
for(var i in data){
if(data[i].tmp){
changeStyle(data[i].style);
$("#style_select").val(data[i].style);
}
else {
if(i == 0){
changeStyle(data[i].style);
$("#style_select").val(data[i].style);
}
if(data[i].mode == "edit"){
var tmp_array = [];
var container = $("
").appendTo("#data");
var sub_container = $("
").appendTo(container);
$("
"+ (++tmp) +"
").appendTo(sub_container);
for(var j in data[i].conts){
var imgs_container = $("
").appendTo(container);
$("
").appendTo(imgs_container);
$("
").appendTo(imgs_container);
var tmp_div = $("
").appendTo(imgs_container);
$("
").appendTo(tmp_div);
for(var k in data[i].conts[j].imgs){
var block_img = $("
");
$("
").appendTo(block_img);
$("
" + data[i].conts[j].imgs[k].text + "
").appendTo(block_img);
tmp_array.push(block_img);
}
imgs_container.droppable({
hoverClass: 'dropHere',
drop: function(event, ui) {
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){
var tmp_ui = $(ui.draggable).parent();
$(this).append($(ui.draggable));
checkCorrectness(tmp_ui);
}
}
});
}
var all_imgs = $("
").appendTo(container);
tmp_array = shuffle(tmp_array);
for(j in tmp_array){
tmp_array[j].draggable({
helper:'clone',
zIndex:100,
appendTo: '#data'
});
tmp_array[j].appendTo(all_imgs);
var tmp_text = tmp_array[j].find(".text_cont");
tmp_text.css("margin", (tmp_array[j].height() - tmp_text.height())/2 + "px 0px");
}
all_imgs.sortable();
all_imgs.droppable({
hoverClass: 'dropBack',
drop: function(event, ui) {
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){
if(this != $(ui.draggable).parent()[0]){
var tmp_ui = $(ui.draggable).parent();
$(this).append($(ui.draggable));
checkCorrectness(tmp_ui);
}
}
}
});
} else {
container = $("
").appendTo("#data");
sub_container = $("
").appendTo(container);
$("
" + (++tmp) + "
").appendTo(sub_container);
for(j in data[i].conts){
var tmp_img_array = [];
imgs_container = $("
").appendTo(container);
$("
").appendTo(imgs_container);
$("
").appendTo(imgs_container);
tmp_div = $("
").appendTo(imgs_container);
$("
").appendTo(tmp_div);
for(k in data[i].conts[j].imgs){
block_img = $("
");
$("
").appendTo(block_img);
$("
" + data[i].conts[j].imgs[k].text + "
").appendTo(block_img);
tmp_img_array.push(block_img);
}
tmp_img_array = shuffle(tmp_img_array);
for(k in tmp_img_array){
tmp_img_array[k].draggable({
helper:'clone',
zIndex:100,
appendTo: '#data'
});
tmp_img_array[k].appendTo(imgs_container);
tmp_text = tmp_img_array[k].find(".text_cont");
tmp_text.css("margin", (tmp_img_array[k].height() - tmp_text.height())/2 + "px 0px");
}
imgs_container.droppable({
hoverClass: 'dropHere',
drop: function(event, ui) {
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){
var tmp_ui = $(ui.draggable).parent();
$(this).append($(ui.draggable));
checkCorrectness(tmp_ui);
}
}
});
checkCorrectness(imgs_container);
}
all_imgs = $("
").appendTo(container);
var all_imgs_arr = [];
for(j in data[i].all_imgs){
block_img = $("
");
$("
").appendTo(block_img);
$("
" + data[i].all_imgs[j].text + "
").appendTo(block_img);
all_imgs_arr.push(block_img);
}
all_imgs_arr = shuffle(all_imgs_arr);
for(k in all_imgs_arr){
all_imgs_arr[k].draggable({
helper:'clone',
zIndex:100,
appendTo: '#data'
});
all_imgs_arr[k].appendTo(all_imgs);
tmp_text = all_imgs_arr[k].find(".text_cont");
tmp_text.css("margin", (all_imgs_arr[k].height() - tmp_text.height())/2 + "px 0px");
}
all_imgs.sortable();
all_imgs.droppable({
hoverClass: 'dropBack',
drop: function(event, ui) {
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){
if(this != $(ui.draggable).parent()[0]){
var tmp_ui = $(ui.draggable).parent();
$(this).append($(ui.draggable));
checkCorrectness(tmp_ui);
}
}
}
});
checkCorrectness(all_imgs);
}
}
}
}
//example
function showExample(){
changeStyle("3");
var tmp_array = [];
var container = $("
").appendTo("#data");
var sub_container = $("
").appendTo(container);
var imgs_container_one = $("
").appendTo(container);
var imgs_container_two = $("
").appendTo(container);
var all_imgs = $("
").appendTo(container);
var number = $("
1
").appendTo(sub_container);
$("
").appendTo(imgs_container_one);
$("
").appendTo(imgs_container_one);
var tmp_div_one = $("
").appendTo(imgs_container_one);
$("
").appendTo(tmp_div_one);
$("
").appendTo(imgs_container_two);
$("
").appendTo(imgs_container_two);
var tmp_div_two = $("
").appendTo(imgs_container_two);
$("
").appendTo(tmp_div_two);
var text1 = $("
");
$("
").appendTo(text1);
$("
" + sankoreLang.potatoes + "
").appendTo(text1);
var text2 = $("
");
$("
").appendTo(text2);
$("
" + sankoreLang.apple + "
").appendTo(text2);
var text3 = $("
");
$("
").appendTo(text3);
$("
" + sankoreLang.carrot + "
").appendTo(text3);
var text4 = $("
");
$("
").appendTo(text4);
$("
" + sankoreLang.pear + "
").appendTo(text4);
var text5 = $("
");
$("
").appendTo(text5);
$("
" + sankoreLang.onion + "
").appendTo(text5);
tmp_array.push(text1, text2, text3, text4, text5);
tmp_array = shuffle(tmp_array);
for(var i = 0; i
").insertBefore(source);
$("").appendTo(text_block);
$("
").appendTo(text_block);
$("
" + sankoreLang.text + "
").appendTo(text_block);
}
//function that allows to add new category
function addCategory(obj){
var imgs_container = $("
").insertAfter(obj);
$("
").appendTo(imgs_container);
$("
").appendTo(imgs_container);
var tmp_div = $("
").appendTo(imgs_container);
$("
").appendTo(tmp_div);
$("
").appendTo(imgs_container);
$("
").appendTo(imgs_container);
$("
").appendTo(imgs_container);
}
//add new container
function addContainer(){
var container = $("
");
var sub_container = $("
").appendTo(container);
var imgs_container = $("
").appendTo(container);
var close = $("
").appendTo(container);
var number = $("
"+ ($(".cont").size() + 1) +"
").appendTo(sub_container);
$("
").appendTo(imgs_container);
$("
").appendTo(imgs_container);
var tmp_div = $("
").appendTo(imgs_container);
$("
").appendTo(tmp_div);
$("
").appendTo(imgs_container);
$("
").appendTo(imgs_container);
$("
").appendTo(imgs_container);
container.insertBefore($(".add_block"));
}
function refreshBlockNumbers(){
var i = 0;
$(".cont").each(function(){
$(this).find(".number_cont").text(++i);
})
}
//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;
}
function stringToXML(text){
if (window.ActiveXObject){
var doc=new ActiveXObject('Microsoft.XMLDOM');
doc.async='false';
doc.loadXML(text);
} else {
var parser=new DOMParser();
doc=parser.parseFromString(text,'text/xml');
}
return doc;
}
//return id
function returnId(){
var tmp = Math.random().toString();
return tmp.substr(2);
}
//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").val(val);
$("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").val(val);
$("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").val(val);
$("body, html").addClass("without_radius").removeClass("radius_ft");
break;
}
}
//a func for checking when smth will drop
function checkOnDrop(dest){
var tmp_count = dest.find("input[name='count']").val();
var tmp_mask = dest.find("input[name='mask']").val();
if(dest.find(".img_block").size() == tmp_count){
var tmp_right = true;
dest.find(".img_block").each(function(){
if($(this).find("input").val() != tmp_mask)
tmp_right = false;
});
if(tmp_right)
dest.removeClass("def_cont").removeClass("red_cont").addClass("green_cont");
else
dest.removeClass("def_cont").removeClass("green_cont").addClass("red_cont");
} else
dest.removeClass("def_cont").removeClass("green_cont").addClass("red_cont");
}
//checking source on correctness
function checkCorrectness(source){
if(!source.hasClass("all_imgs")){
if(source.parent().find(".all_imgs").find(".img_block").size() == 0){
source.parent().find(".imgs_cont").each(function(){
checkOnDrop($(this))
})
} else {
source.parent().find(".imgs_cont").each(function(){
$(this).addClass("def_cont").removeClass("green_cont").removeClass("red_cont");
})
}
} else {
if(source.find(".img_block").size() > 0){
source.parent().find(".imgs_cont").each(function(){
$(this).addClass("def_cont").removeClass("green_cont").removeClass("red_cont");
})
} else {
source.parent().find(".imgs_cont").each(function(){
checkOnDrop($(this))
})
}
}
}