aggiungere una tastiera a una pagina web

**claudy** · 12-09-2003, 17:58

Ciao a tutti!
Un problemino: avrei bisogno di aggiungere su una pagina web una "tastiera" formata da alcuni caratteri speciali (non presenti sulle classiche tastiere) per permettere all'utente, cliccando sui tasti di questa tastiera , di scrivere tali caratteri in un campo di testo da me creato. (es. la "a" e la "i" con l'accento acuto, e la "n" con la tilde, quella dello spagnolo...)
Spero di essermi spiegata bene, e spero che qualcuno sappia darmi una mano.... grazie mille in anticipo!
ciao,

claudy

**v2v2** · 12-09-2003, 22:52

codice:

<HTML>
<HEAD>
<SCRIPT>
function sel(area) {
	area.posiz = document.selection.createRange();
}
function insert(area, scritta) {
	area.posiz.text = scritta;
}
</SCRIPT>
</HEAD>
<BODY>
Scegli la posizione in cui inserire il simbolo e poi clicca sul simbolo
<FORM NAME="MioForm">
<TEXTAREA NAME="area" ROWS="3" COLS="50" ONSELECT="sel(this);" ONCLICK="sel(this);" ONKEYUP="sel(this);">
Testo in cui inserire.
Testo in cui inserire.
Testo in cui inserire.</TEXTAREA>
</FORM>







<table border="1">
<tr style="cursor:hand">
<td onclick="insert(MioForm.area,this.id)" id="{">{</td>
<td onclick="insert(MioForm.area,this.id)" id="¼">¼</td>
<td onclick="insert(MioForm.area,this.id)" id="§">§</td>
</tr>
</table>
</BODY>
</HTML>

**claudy** · 13-09-2003, 15:09

GRazie mille per la risposta!!!!
Proverò lunedi al lavoro e vediamo se funge.

grazie, ciao!

claudy :adhone:

**danielle14** · 15-09-2003, 10:38

Ciao, v2v2
grazie per aver risposto, il tuo script funziona a meraviglia, ma mi sa che il nostro caso è un po' più complicato.
In effetti noi abbiamo diversi campi di testo, non una sola textarea...abbiamo provato a modificare lo script ma non siamo molto esperte, soprattutto perchè la pagina è stata creata con un software che crea automaticamente dei form, che lui chiama gap, ma di questi form nell'html non c'è traccia...
Puoi aiutarci?

postiamo lo script.

ciao!

:quipy:
claudy e danielle

**danielle14** · 15-09-2003, 10:42

codice:
lo abbiamo diviso in due pezzi:
1

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"

<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" />
<meta name="DC:Creator" content="UNREGISTERED" />
<meta name="DC:Title" content="Prova spagnolo" />

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>
Prova spagnolo
</title>

<style type="text/css">

body{
font-family: Verdana;
background-color: #ffffff;
color: #000000;

margin-right: 5%;
margin-left: 5%;
font-size: small;
}

p{
text-align: justify;
margin: 0px;
font-size: small;
}

table,tr,td,div,span{
font-size: small;
}

input.GapBox{

}

span.CorrectAnswer{
font-weight: bold;
}

div.Titles{
padding-top: 10px;
text-align: center;
margin-bottom: 4px;
color: #000033;
}

.ExerciseTitle{
font-size: large;
color: #000033;
}

.ExerciseSubtitle{
color: #000033;
}

span.Instructions{

}

div.ExerciseText{
line-height: 2.0;
text-align: justify;
}

.FeedbackText{

}

div.Feedback {
background-color: #ffffff;
left: 1px;
top: 33%;
z-index: 1;
border-style: solid;
border-width: 1px;
padding: 5px;
text-align: center;
color: #000033;
position: absolute;
display: none;
font-size: small;
}

.WordListStyle{
text-align: center;
font-weight: bold;
color: #000000;
}

div.ExerciseDiv{
color: #000000;
}

div.StdDiv{
background-color: #ebf8fe;
text-align: center;
font-size: smaller;
color: #000000;
padding: 8px;
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #000000;
margin: 1px;
}

.FunctionButton {
background-color: #ebf8fe;
color: #000000;
text-align: center;
border-style: solid;
border-color: #ebf8fe;
border-width: 2px;
padding: 3px 6px 3px 6px;
cursor: pointer;
}

div.NavButtonBar{
background-color: #ffff80;
text-align: center;
margin: 2px 0px 2px 0px;
clear: both;
font-size: small;
}

div.NavButtonBar button {
border-style: solid;
border-color: #ffff80;
background-color: #ffff80;
border-width: 2px;
padding: 2px 2px 2px 2px;
color: #000000;
cursor: pointer;
}

a{
color: #0000ff;
}

a: visited{
color: #0000cc;
}

a:hover{
color: #0000ff;
}

</style>

<script type="text/javascript">

//<![CDATA[

**danielle14** · 15-09-2003, 10:42

seconda parte------>

State = new Array();

function StartUp(){
//IE bug avoidance -- remove bottom navbar
if (is.ie){
if (document.getElementById('BottomNavBar') != null){
document.getElementById('TheBody').removeChild(doc ument.getElementById('BottomNavBar'));
}
}

if (is.ie){
document.attachEvent('onkeydown',SuppressBackspace );
window.attachEvent('onkeydown',SuppressBackspace);
}
else if (is.ns){
window.addEventListener('keypress',SuppressBackspa ce,false);
}

var i = 0;

State.length = 0;
for (i=0; i<I.length; i++){
State[i] = new Array();
State[i][0] = 0; // clue asked for or not
State[i][1] = 0; // hints asked for, or penalties for checking a wrong answer
State[i][2] = 0; // length of answer matched
State[i][3] = 0; // score for this item
State[i][4] = 0; // already answered correctly
State[i][5] = ''; // answer entered in text box (right or not)
}
BuildExercise();
DisplayExercise();

}

function BuildExercise(){
var OutString = '';
var ClozeStuff = '';
var Btn = '';

for (var i=0; i<I.length; i++){

//Add the text
ClozeStuff += Text[i];

//Create and add the gap
//If it's already right, then add it in bold:
if (State[i][4] == 1){
ClozeStuff += '<span class="CorrectAnswer">' + State[i][5] + '</span>';
}

else{
GapLen = I[i][1][0][0].length;
if (GapLen < 3){GapLen = 3;}
Gap = ReplaceStuff('[strGapSize]', GapLen, GapCode);
Gap = ReplaceStuff('[strGapName]', 'Gap' + i + '', Gap);
Gap = ReplaceStuff('[strItemNum]', i + '', Gap);
Gap = ReplaceStuff('[strValue]', State[i][5], Gap);
ClozeStuff += Gap;

//Create and add the clue button
if (I[i][2].length > 0){
Btn = ReplaceStuff('[strItemNum]', i + '', ClueButton);
ClozeStuff += Btn;
}
}
}

//Add the last bit
if (Text.length > I.length){
ClozeStuff += Text[Text.length-1];
}

//Put the final pieces together
OutString = ReplaceStuff('[strCheckButtonId]', 'CheckButton1', Buttons) + ClozeOpener + ClozeStuff + ClozeCloser + ReplaceStuff('[strCheckButtonId]', 'CheckButton2', Buttons);
BuiltCloze = OutString;
}

function DisplayExercise(){
document.getElementById('MainDiv').innerHTML = BuiltCloze;

}

function ShowClue(ItemNum){
//alert(ItemNum);
document.getElementById('Gap' + ItemNum).value = I[ItemNum][1][0][0];
State[ItemNum][3] = 0; // Score
State[ItemNum][4] = 1; // Answer given
}

function SaveCurrentAnswers(){
for (var i=0; i<I.length; i++){
State[i][5] = GetGapValue(i);
}
}

function RestoreCurrentAnswers(){
for (var i=0; i<I.length; i++){
SetGapValue(i, State[i][5]);
}
}

var CurrentWord = 0;

function ReplaceStuff(Token, Replacement, InString){
var i = InString.indexOf(Token);
var FirstBit = '';
var LastBit = '';
while (i>-1){
FirstBit = InString.substring(0, i);
LastBit = InString.substring(i + Token.length, InString.length);
InString = FirstBit + Replacement + LastBit;
i = InString.indexOf(Token);
}
return InString;
}

function TrimString(InString){
var x = 0

if (InString.length != 0) {
while ((InString.charAt(InString.length - 1) == '\u0020') || (InString.charAt(InString.length - 1) == '\u000A') || (InString.charAt(InString.length - 1) == '\u000D')){
InString = InString.substring(0, InString.length - 1)
}

while ((InString.charAt(0) == '\u0020') || (InString.charAt(0) == '\u000A') || (InString.charAt(0) == '\u000D')){
InString = InString.substring(1, InString.length)
}

while (InString.indexOf(' ') != -1) {
x = InString.indexOf(' ')
InString = InString.substring(0, x) + InString.substring(x+1, InString.length)
}

return InString;
}

else {
return '';
}
}
function CheckAnswers(){

SaveCurrentAnswers();
var AllCorrect = 1;

//Check each answer
for (var i = 0; i< I.length; i++){

if (State[i][4] != 1){
//If it's right, calculate its score
if (CheckAnswer(i, true) > -1){
var TotalChars = GetGapValue(i).length;
State[i][3] = (TotalChars-State[i][1])/TotalChars;
if (State[i][0] > 0){State[i][3] = State[i][3]/2;}
if (State[i][3]<0){State[i][3] = 0;}
State[i][4] = 1;
}
else{
//Otherwise, add zero to the array and increment the hints for this item, as a penalty
State[i][1]++;
State[i][3] = 0;

//then set the flag
AllCorrect = 0;
}
}
}

//Calculate the total score
var TotalScore = 0;
for (i=0; i<State.length; i++){
TotalScore += State[i][3];
}
TotalScore = Math.floor((TotalScore * 100)/I.length);

//Compile the output
Output = '';

if (AllCorrect == 1){
Output = Correct + '
';
}

Output += YourScoreIs + ' ' + TotalScore + '%.
';
if (AllCorrect == 0){
Output += '
' + Incorrect;
}
BuildExercise();
WriteFeedback(Output);
setTimeout('WriteToInstructions(Output)', 50);

if (AllCorrect==1){
Score = TotalScore;

setTimeout('DisplayExercise()', 50);
Finished = true;
setTimeout('Finish()', SubmissionTimeout);
return;
}

setTimeout('DisplayExercise()', 50);
RestoreCurrentAnswers();
}

var InGap = false;

function TrackFocus(BoxNumber){
CurrentWord = BoxNumber;
InGap = true;
}

function LeaveGap(){
InGap = false;
}

function CheckBeginning(Guess, Answer){
var OutString = '';
var i = 0;
var UpperGuess = '';
var UpperAnswer = '';

if (CaseSensitive == false) {
UpperGuess = Guess.toUpperCase();
UpperAnswer = Answer.toUpperCase();
}
else {
UpperGuess = Guess;
UpperAnswer = Answer;
}

while (UpperGuess.charAt(i) == UpperAnswer.charAt(i)) {
OutString += Guess.charAt(i);
i++;
}
OutString += Answer.charAt(i);
return OutString;
}

function FindLongest(InArray){
if (InArray.length < 1){return -1;}

var Longest = 0;
for (var i=1; i<InArray.length; i++){
if (InArray[i].length > InArray[Longest].length){
Longest = i;
}
}
return Longest;
}

function GetGapValue(GNum){
var RetVal = '';
if ((GNum<0)||(GNum>=I.length)){return RetVal;}
if (eval('document.Cloze.Gap' + GNum) != null){
RetVal = eval('document.Cloze.Gap' + GNum).value;
RetVal = TrimString(RetVal);
}
else{
RetVal = State[GNum][5];
}
return RetVal;
}

function SetGapValue(GNum, Val){
if ((GNum<0)||(GNum>=I.length)){return;}
if (eval('document.Cloze.Gap' + GNum) != null){
eval('document.Cloze.Gap' + GNum).value = Val;
}
}

function FindCurrent() {
var x = 0;
FoundCurrent = -1;

//Test the current word:
//If it's state is not set to already correct, check the word.
if (State[CurrentWord][4] != 1){
if (CheckAnswer(CurrentWord, false) < 0){
return CurrentWord;
}
}

x=CurrentWord + 1;
while (x<I.length){
if (State[x][4] != 1){
if (CheckAnswer(x, false) < 0){
return x;
}
}
x++;
}

x = 0;
while (x<CurrentWord){
if (State[x][4] != 1){
if (CheckAnswer(x, false) < 0){
return x;
}
}
x++;
}
return FoundCurrent;
}

function CheckAnswer(GapNum, MarkAnswer){
var Guess = GetGapValue(GapNum);
var UpperGuess = '';
var UpperAnswer = '';
if (CaseSensitive == false){
UpperGuess = Guess.toUpperCase();
}
else{
UpperGuess = Guess;
}
var Match = -1;
for (var i = 0; i<I[GapNum][1].length; i++){
if (CaseSensitive == false){
UpperAnswer = I[GapNum][1][i][0].toUpperCase();
}
else{
UpperAnswer = I[GapNum][1][i][0];
}
if (TrimString(UpperGuess) == UpperAnswer){
Match = i;
if (MarkAnswer == true){
State[GapNum][4] = 1;
}
State[GapNum][5] = Guess;
}
}
return Match;
}

function GetHint(GapNum){
Guess = GetGapValue(GapNum);

if (CheckAnswer(GapNum, false) > -1){return ''}
RightBits = new Array();
for (var i=0; i<I[GapNum][1].length; i++){
RightBits[i] = CheckBeginning(Guess, I[GapNum][1][i][0]);
}
var RightOne = FindLongest(RightBits);
var Result = I[GapNum][1][RightOne][0].substring(0,RightBits[RightOne].length);
//Add another char if the last one is a space
if (Result.charAt(Result.length-1) == ' '){
Result = I[GapNum][1][RightOne][0].substring(0,RightBits[RightOne].length+1);
}
return Result;
}

function ShowHint(){
var CurrGap = FindCurrent();
if (CurrGap < 0){return;}

var HintString = GetHint(CurrGap);

if (HintString.length > 0){
SetGapValue(CurrGap, HintString);
State[CurrGap][1] = State[CurrGap][1] + 1;
}
WriteFeedback(GiveHint);
}

function Finish(){
//If there's a form, fill it out and submit it
if (document.store != null){
Frm = document.store;
Frm.starttime.value = HPNStartTime;
Frm.endtime.value = (new Date()).getTime();
Frm.mark.value = Score;
Frm.submit();
}
}

//-->

//]]>

</script>

</head>

<body onload="StartUp()" id="TheBody">

<div class="Titles">
<span class="ExerciseTitle">Prova spagnolo</span>

<span class="ExerciseSubtitle"></span>

</div>

<div id="InstructionsDiv" class="StdDiv">
<p id="Instructions"></p>
</div>

<div id="MainDiv" class="StdDiv">

</div>

<div class="Feedback" id="FeedbackDiv">
<div class="FeedbackText" id="FeedbackContent"></div>
<button id="FeedbackOKButton" class="FunctionButton" onfocus="FuncBtnOver(this)" onblur="FuncBtnOut(this)" onmouseover="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOver(this)" onclick="HideFeedback(); return false;">OK</button>
</div>

</body>

</html>

grazie!!!

**v2v2** · 16-09-2003, 10:39

ciao ragazze!
ieri sono stato piuttosto impegnato ma questa mattina cercherò di guardare in quella giungla di parole che avete postato!
Sarà dura ma nulla è impossibile(spero!)

ciao

**v2v2** · 16-09-2003, 11:12

Provate a modificare il vostro codice in questo modo

Riga da modificare:

codice:

var GapCode = '<input type="text" class="GapBox" id="[strGapName]" size="[strGapSize]" onfocus="Quale(this.id);TrackFocus([strItemNum])" onblur="LeaveGap()" value="[strValue]" />';

Da inserire tra i tag HEAD:

codice:

<script>
var quale="";

function Quale(idd){
quale=idd;
}

function insert(symbol){
if(quale!="")document.getElementById(quale).value=document.getElementById(quale).value+symbol;
}

</script>

Da inserire nel BODY:

codice:

 
<table border="1">
<tr style="cursor:hand">
<td onclick="insert(this.id)" id="{">{</td>
<td onclick="insert(this.id)" id="¼">¼</td>
<td onclick="insert(this.id)" id="§">§</td>
</tr>
</table>

**claudy** · 17-09-2003, 14:07

grazie v2v2!!!!!!!!!!
sei un mito...
non abbiamo ancora provato ad apportare le modifiche che ci hai segnalato, perchè siamo fuori per un corso, ma appena rientriamo, proviamo e ti facciamo sapere...
nel frattempo grazie mille!!!!!!!!

claudy :adhone: e danielle

**claudy** · 25-09-2003, 11:05

Ciao v2v2,
finalmente abbiamo avuto il tempo per provare il tuo script..... che funziona!!!!! :gren: :gren: :gren:
Ti dobbiamo fare un monumento, perché ci hai risolto un problema per noi davvero troppo incasinato... sei un genio, grazie!

Riconoscenti per sempre,
claudy e danielle :adhone:

Discussione: aggiungere una tastiera a una pagina web

Strumenti discussione

Ricerca discussione

Visualizza

aggiungere una tastiera a una pagina web

prova

grazie, funziona!!!!!!!!!!!!!!!!!!!!!!!!!!

Permessi di invio