Skip to content

O
OpenBoard
Commit 620345b2 authored by unknown's avatar unknown
Browse files
Options

upgraded interactivities

parent 720eb7eb
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1010 additions and 510 deletions
resources/library/interactivities/ord-words.wgt/index.html
View file @ 620345b2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> "http://www.w3.org/TR/html4/loose.dtd">
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Template</title> <title>Template</title>
<!--Styles--> <!--Styles-->
<link rel="stylesheet" type="text/css" href="template/styles/master.css"> <link rel="stylesheet" type="text/css" href="styles/master.css">
<link rel="stylesheet" type="text/css" href="template/styles/of_puppets.css"> <link rel="stylesheet" type="text/css" href="styles/of_puppets.css">
<!--Scripts--> <!--Scripts-->
<script type="text/javascript" src="template/scripts/jquery144.js"></script> <script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="template/scripts/jquery-ui-1.8.9.custom.min.js"></script> <script type="text/javascript" src="scripts/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript" src="template/scripts/template2.js"></script> <script type="text/javascript" src="scripts/template2.js"></script>
<script type="text/javascript">
</head> $(document).ready(function(){
var lang = ""; //locale language
if(window.sankore){
lang = sankore.locale().substr(0,2);
} else
lang = "en";
if(lang == "en"){
if(window.sankore)
sankore.enableDropOnWidget(false);
$("#ub-widget").append('<div id="mp_setup"></div><div id="mp_word"></div>');
modeView();
}
else{
returnStatus(lang);
}
function returnStatus(lang){
$.ajax({
type: 'POST',
url:'locales/' + lang + '/index.html',
statusCode: {
404: function() {
if(window.sankore)
sankore.enableDropOnWidget(false);
modeView();
},
200: function(){
window.location.href = 'locales/' + lang + '/index.html';
}
}
});
}
});
</script>
</head>
<body> <body>
<div id="ub-widget"> <div id="ub-widget">
</div> </div>
</body> </body>
</html> </html>
\ No newline at end of file
resources/library/interactivities/ord-words.wgt/locales/fr/index.html 0 → 100644
View file @ 620345b2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Template</title>
<!--Styles-->
<link rel="stylesheet" type="text/css" href="../../styles/master.css">
<link rel="stylesheet" type="text/css" href="../../styles/of_puppets.css">
<!--Scripts-->
<script type="text/javascript" src="../../scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../../scripts/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript" src="scripts/template2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#ub-widget").append('<div id="mp_setup"></div><div id="mp_word"></div>');
modeView();
});
</script>
</head>
<body>
<div id="ub-widget">
</div>
</body>
</html>
\ No newline at end of file
resources/library/interactivities/ord-words.wgt/locales/fr/scripts/template2.js 0 → 100644
View file @ 620345b2
/*
Sankore API
*/
function startEditing()
{
modeEdit();
}
function stopEditing()
{
modeView();
}
function initialize()
{
}
function checkResponse()
{
checkWord();
}
/*
/ END sankore api
*/
var sankoreLang = {
view: "D'affichage",
edit: "Modifier",
example: "une*longue*,*il*ya*bien*longtemps*..."
};
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;
}
var doCheckWord = true;
// array of dom elements
var letters = [];
var editMode = false; // just a 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 = 65;
var min_view_width = 400;
/*
=================
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;
}
/*
=====================
checkWord
=====================
scans the letters and checks
if they are in the right order
*/
function checkWord()
{
if( !doCheckWord )
return;
var str = "";
$( "#mp_word .letter" ).each( function(){
str += $(this).text();
});
var w = word;
while( w.indexOf( '*' ) != -1 )
{
w = w.replace( '*', '' );
}
if( str == w ){
$( "#mp_word .letter" ).addClass( "right" );
//message( "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 input:text" ).attr( "value" );
}
// if no sankore api, insert edit button
if( !isSankore ){
$( "#mp_setup" ).empty().append( '<input type="button" value="' + sankoreLang.edit + '">' );
$( "#mp_setup input:button" ).click( function(){
modeEdit();
});
}
// 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 );
}
// apply new width
adjustWidth( width );
}
/*
============
adjustWidth
============
*/
function adjustWidth( width )
{
$( "#ub-widget" ).animate( {
width: width
} );
// if viewed as a widget, resize the window
if( !isBrowser ){
window.resizeTo( width + widget_padding, widget.height );
}
}
/*
================
modeEdit
================
*/
function modeEdit()
{
editMode = true;
// if no sankore api, insert ok button
if( !isSankore )
{
$( "#mp_setup" ).empty().append( '<input type="button" value="' + sankoreLang.view + '">' );
$( "#mp_setup input:button" ).click( function(){
modeView();
});
}
$( "#mp_word").css( "margin-left", 0 ).empty().append('<input value="'+word+'">');
adjustWidth( input_width );
}
if (window.widget) {
window.widget.onleave = function(){
if($( "#mp_word input:text" ).attr( "value" ))
{
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);
}
}
\ No newline at end of file
resources/library/interactivities/ord-words.wgt/locales/ru/index.html 0 → 100644
View file @ 620345b2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Template</title>
<!--Styles-->
<link rel="stylesheet" type="text/css" href="../../styles/master.css">
<link rel="stylesheet" type="text/css" href="../../styles/of_puppets.css">
<!--Scripts-->
<script type="text/javascript" src="../../scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../../scripts/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript" src="scripts/template2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#ub-widget").append('<div id="mp_setup"></div><div id="mp_word"></div>');
modeView();
});
</script>
</head>
<body>
<div id="ub-widget">
</div>
</body>
</html>
\ No newline at end of file
resources/library/interactivities/ord-words.wgt/locales/ru/scripts/template2.js 0 → 100644
View file @ 620345b2
/*
Sankore API
*/
function startEditing()
{
modeEdit();
}
function stopEditing()
{
modeView();
}
function initialize()
{
}
function checkResponse()
{
checkWord();
}
/*
/ END sankore api
*/
var sankoreLang = {
view: "Показать",
edit: "Изменить",
example: "много*,*много*лет*назад*..."
};
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;
}
var doCheckWord = true;
// array of dom elements
var letters = [];
var editMode = false; // just a 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 = 65;
var min_view_width = 400;
/*
=================
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;
}
/*
=====================
checkWord
=====================
scans the letters and checks
if they are in the right order
*/
function checkWord()
{
if( !doCheckWord )
return;
var str = "";
$( "#mp_word .letter" ).each( function(){
str += $(this).text();
});
var w = word;
while( w.indexOf( '*' ) != -1 )
{
w = w.replace( '*', '' );
}
if( str == w ){
$( "#mp_word .letter" ).addClass( "right" );
//message( "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 input:text" ).attr( "value" );
}
// if no sankore api, insert edit button
if( !isSankore ){
$( "#mp_setup" ).empty().append( '<input type="button" value="' + sankoreLang.edit + '">' );
$( "#mp_setup input:button" ).click( function(){
modeEdit();
});
}
// 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 );
}
// apply new width
adjustWidth( width );
}
/*
============
adjustWidth
============
*/
function adjustWidth( width )
{
$( "#ub-widget" ).animate( {
width: width
} );
// if viewed as a widget, resize the window
if( !isBrowser ){
window.resizeTo( width + widget_padding, widget.height );
}
}
/*
================
modeEdit
================
*/
function modeEdit()
{
editMode = true;
// if no sankore api, insert ok button
if( !isSankore )
{
$( "#mp_setup" ).empty().append( '<input type="button" value="' + sankoreLang.view + '">' );
$( "#mp_setup input:button" ).click( function(){
modeView();
});
}
$( "#mp_word").css( "margin-left", 0 ).empty().append('<input value="'+word+'">');
adjustWidth( input_width );
}
if (window.widget) {
window.widget.onleave = function(){
if($( "#mp_word input:text" ).attr( "value" ))
{
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);
}
}
\ No newline at end of file
resources/library/interactivities/ord-words.wgt/template/styles/of_puppets.css → resources/library/interactivities/ord-words.wgt/styles/of_puppets.css
View file @ 620345b2
body{ body{
background-color: #fff; background-color: #fff;
} }
.letter{ .letter{
min-width: 30px; height: 40px; min-width: 30px; height: 40px;
border: solid 1px #ccc; border: solid 1px #ccc;
margin: 4px; margin: 4px;
padding: 4px 10px; padding: 4px 10px;
float: left; float: left;
font: 28px tahoma; font: 28px tahoma;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
text-transform: uppercase; text-transform: uppercase;
background-color: #fff; background-color: #fff;
} }
.right{ .right{
background-color: #cfb; background-color: #cfb;
} }
#ub-widget{ #ub-widget{
width: 560px; width: 560px;
} }
#mp_setup{ #mp_setup{
text-align: right; text-align: right;
} }
#mp_img{ #mp_img{
text-align: center; text-align: center;
padding: 40px; padding: 40px;
} }
#mp_word{ #mp_word{
height: 60px; height: 60px;
text-align: center; text-align: center;
} }
#mp_word input{ #mp_word input{
font: 32px tahoma; font: 32px tahoma;
letter-spacing: 0.1em; letter-spacing: 0.1em;
width: 600px; width: 600px;
} }
#mp_msg{ #mp_msg{
position: absolute; position: absolute;
left: 120px; top: 160px; left: 120px; top: 160px;
background-color: #eee; background-color: #eee;
border: solid 1px #ddd; border: solid 1px #ddd;
width: 160px; width: 160px;
padding: 40px; padding: 40px;
text-align: center; text-align: center;
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment