@ -1,5 +1,5 @@
var sankoreLang = { var sankoreLang = {
view : "Affich er" ,
view : "Ferm er" ,
edit : "Modifier" , edit : "Modifier" ,
example : "Ceci est une série de mots à séparer correctement" , example : "Ceci est une série de mots à séparer correctement" ,
wgt _name : "Séparer une phrase" , wgt _name : "Séparer une phrase" ,
@ -9,25 +9,26 @@ var sankoreLang = {
none : "aucun" , none : "aucun" ,
help : "Aide" , help : "Aide" ,
help _content : "<p><h2>Séparer une phrase</h2></p>" + help _content : "<p><h2>Séparer une phrase</h2></p>" +
"<p><h3>Séparer les mots d’une phrase.</h3></p>" + "<p><h3>Séparer les mots d’une phrase.</h3></p>" +
"<p>Une phrase est écrite sans que les mots ne soient séparés. Le but de cette activité est d’insérer les espaces aux bons endroits. Une fois que les séparations sont placées correctement, la phrase se colore en vert.</p>" + "<p>Une phrase est écrite sans que les mots ne soient séparés. Le but de cette activité est d’insérer les espaces aux bons endroits. Une fois que les séparations sont placées correctement, la phrase se colore en vert.</p>" +
"<p>Pour ajouter des séparations entre les mots, déplacez le curseur et cliquez entre deux lettres, une séparation s’ajoute alors.</p>" + "<p>Pour ajouter des séparations entre les mots, déplacez le curseur et cliquez entre deux lettres, une séparation s’ajoute alors.</p>" +
"<p>Le bouton “Recharger” réinitialise l’exercice.</p>" + "<p>Le bouton “Recharger” réinitialise l’exercice.</p>" +
"<p>Le bouton “Modifier” vous permet :</p>" + "<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>" + "<ul><li>de choisir le thème de l’interactivité : tablette, ardoise ou aucun (par défaut aucun), </li>" +
"<li>de déterminer la phrase sur laquelle travailler.</li></ul>" + "<li>de déterminer la phrase sur laquelle travailler.</li></ul>" +
"<p>Ecrivez simplement une phrase dans la zone de texte.</p>" + "<p>Ecrivez simplement une phrase dans la zone de texte.</p>" +
"<p>Le bouton “Afficher” vous permet d’utiliser l’activité.</p>" "<p>Le bouton “Afficher” vous permet d’utiliser l’activité.</p>" ,
theme : "Thème"
} ; } ;
@ -38,180 +39,180 @@ var isBrowser = ( typeof( widget ) == "undefined" );
function wcontainer ( containerID ) function wcontainer ( containerID )
{ {
// some protecred variables
// some protecred variables
var thisInstance = this ; var thisInstance = this ;
this . editMode = false ; this . editMode = false ;
var data = { } ; // see setData and getData
var data = { } ; // see setData and getData
// widget size parameters
// widget size parameters
this . minHeight = 100 ; this . minHeight = 100 ;
this . minWidth = 400 ; this . minWidth = 400 ;
// set to 0 for no max width restriction
// set to 0 for no max width restriction
this . maxWidth = 0 ; this . maxWidth = 0 ;
// links to the elements of the widget
// links to the elements of the widget
this . elements = { } ; this . elements = { } ;
/ * / *
=== === === === === === === ===
create create
=== === === === === === === ===
- creates html base , inits this . elements , assings events - creates html base , inits this . elements , assings events
* / * /
this . create = function ( containerID ) this . create = function ( containerID )
{ {
var html =
var html =
'<div id="mp_content">' + '<div id="mp_content">' +
'<div class="viewmode" id="mp_view">' + '<div class="viewmode" id="mp_view">' +
'</div>' + '</div>' +
'<div class="editmode" id="mp_edit">' + '<div class="editmode" id="mp_edit">' +
'</div>' + '</div>' +
'</div>' ; '</div>' ;
var container = $ ( containerID ) ; var container = $ ( containerID ) ;
container . append ( html ) ; container . append ( html ) ;
this . elements . edit = container . find ( ".editmode" ) ; this . elements . edit = container . find ( ".editmode" ) ;
this . elements . view = container . find ( ".viewmode" ) ; this . elements . view = container . find ( ".viewmode" ) ;
this . elements . container = container ; this . elements . container = container ;
this . elements . subcontainer = container . find ( "#mp_content" ) ; this . elements . subcontainer = container . find ( "#mp_content" ) ;
this . elements . containerView = this . elements . subcontainer . find ( ".viewmode" ) ; this . elements . containerView = this . elements . subcontainer . find ( ".viewmode" ) ;
this . elements . containerEdit = this . elements . subcontainer . find ( ".editmode" ) ; this . elements . containerEdit = this . elements . subcontainer . find ( ".editmode" ) ;
$ ( "#wgt_edit" ) . live ( "click" , function ( ) { $ ( "#wgt_edit" ) . live ( "click" , function ( ) {
thisInstance . modeEdit ( ) ; thisInstance . modeEdit ( ) ;
} ) ; } ) ;
$ ( "#wgt_display" ) . live ( "click" , function ( ) { $ ( "#wgt_display" ) . live ( "click" , function ( ) {
thisInstance . modeView ( ) ; thisInstance . modeView ( ) ;
} ) ; } ) ;
} ; } ;
/ * / *
=== === === === === === === === === ===
setViewContent setViewContent
=== === === === === === === === === ===
- assigns custom html to the viewmode container - assigns custom html to the viewmode container
* / * /
this . setViewContent = function ( html ) this . setViewContent = function ( html )
{ {
this . elements . container . find ( "#mp_content .viewmode" ) . html ( html ) ; this . elements . container . find ( "#mp_content .viewmode" ) . html ( html ) ;
} ; } ;
/ * / *
=== === === === === === === === === ===
setEditContent setEditContent
=== === === === === === === === === ===
- assigns custom html to the editmode container - assigns custom html to the editmode container
* / * /
this . setEditContent = function ( html ) this . setEditContent = function ( html )
{ {
this . elements . container . find ( "#mp_content .editmode" ) . html ( html ) ; this . elements . container . find ( "#mp_content .editmode" ) . html ( html ) ;
} ; } ;
/ * / *
=== === === === === === === === = === === === === === === === === =
modeEdit and modeView modeEdit and modeView
=== === === === === === === === = === === === === === === === === =
- switch the widget betweed modes - switch the widget betweed modes
* for customization extend onEditMode and onViewMode * for customization extend onEditMode and onViewMode
* / * /
this . modeEdit = function ( ) this . modeEdit = function ( )
{ {
this . onEditMode ( ) ; this . onEditMode ( ) ;
this . editMode = true ; this . editMode = true ;
this . elements . edit . removeClass ( "hide" ) ; this . elements . edit . removeClass ( "hide" ) ;
this . elements . view . addClass ( "hide" ) ; this . elements . view . addClass ( "hide" ) ;
//this.adjustSize();
//this.adjustSize();
} ; } ;
this . modeView = function ( ) this . modeView = function ( )
{ {
this . onViewMode ( ) ; this . onViewMode ( ) ;
this . editMode = false ; this . editMode = false ;
this . elements . edit . addClass ( "hide" ) ; this . elements . edit . addClass ( "hide" ) ;
this . elements . view . removeClass ( "hide" ) ; this . elements . view . removeClass ( "hide" ) ;
//this.adjustSize();
//this.adjustSize();
} ; } ;
/ * / *
=== === === === === === === = === === === === === === === =
setData and getData setData and getData
=== === === === === === === = === === === === === === === =
- store some data inside - store some data inside
* / * /
this . setData = function ( name , value ) { this . setData = function ( name , value ) {
data [ name ] = value ; data [ name ] = value ;
} ; } ;
this . getData = function ( name ) { this . getData = function ( name ) {
if ( typeof ( data [ name ] ) == "undefined" ) { if ( typeof ( data [ name ] ) == "undefined" ) {
return null ; return null ;
} else return data [ name ] ; } else return data [ name ] ;
} ; } ;
// redefinable methods
// redefinable methods
/ * / *
=== === === === === === === === == === === === === === === === === ==
onEditMode and onViewMode onEditMode and onViewMode
=== === === === === === === === == === === === === === === === === ==
- these are called when the mode is being changed - these are called when the mode is being changed
* / * /
this . onEditMode = function ( ) { this . onEditMode = function ( ) {
//
//
} ; } ;
this . onViewMode = function ( ) { this . onViewMode = function ( ) {
//
//
} ; } ;
/ * / *
=== === === === === === === = === === === === === === === =
viewSize and editSize viewSize and editSize
=== === === === === === === = === === === === === === === =
- calculate container size for the adjustSize method - calculate container size for the adjustSize method
* they are likely to be redefined for each particular widget * they are likely to be redefined for each particular widget
* / * /
this . viewSize = function ( ) { this . viewSize = function ( ) {
return { return {
w : this . elements . containerView . outerWidth ( ) , w : this . elements . containerView . outerWidth ( ) ,
h : this . elements . containerView . outerHeight ( ) h : this . elements . containerView . outerHeight ( )
} ; } ;
} ; } ;
this . editSize = function ( ) { this . editSize = function ( ) {
return { return {
w : this . elements . containerEdit . outerWidth ( ) , w : this . elements . containerEdit . outerWidth ( ) ,
h : this . elements . containerEdit . outerHeight ( ) h : this . elements . containerEdit . outerHeight ( )
} ; } ;
} ; } ;
/ * / *
=== === === === === === === === === === === === === ===
checkAnswer checkAnswer
=== === === === === === === === === === === === === ===
- check if the exercise in the view mode was done right - check if the exercise in the view mode was done right
* redefine it for each particular widget * redefine it for each particular widget
* / * /
this . checkAnswer = function ( ) this . checkAnswer = function ( )
{ {
//
//
} ; } ;
// constructor end
// constructor end
// if the constructor was called with a parameter,
// if the constructor was called with a parameter,
// call create() automatically
// call create() automatically
if ( arguments . length > 0 ) { if ( arguments . length > 0 ) {
this . create ( containerID ) ; this . create ( containerID ) ;
} }
this . setData ( "dw" , this . elements . container . outerWidth ( true ) - this . elements . container . width ( ) ) ; this . setData ( "dw" , this . elements . container . outerWidth ( true ) - this . elements . container . width ( ) ) ;
this . setData ( "dh" , this . elements . container . outerHeight ( true ) - this . elements . container . height ( ) ) ; this . setData ( "dh" , this . elements . container . outerHeight ( true ) - this . elements . container . height ( ) ) ;
window . winstance = thisInstance ; window . winstance = thisInstance ;
} }
maximXbs
12 years ago
