Pokouším se do webové stránky vložit kód javascriptu pro funkci showHide, ale nějak se mi to nedaří.
Chci mít ve stránce odkazy na skryté sekce typu- řešení, rada, výsledek, které se zobrazí po kliknutí na patřičný obrázek.
Pokud kód stránky zadávám v IE6, tak se mi při náhledech WYSIWYG okamžitě objeví případná chyba a zdrojový kód javascriptu se mi předělá- zmizí definice funkce showhide takže vidím odkazy na "function anonymous".
Nemá někdo zkušenost?
Díky
LV
Mohu nabídnout toto řešení. Mě funguje, ikdyž je co vylepšovat. S obrázky jsem dosud kombinovat nezkoušela.
Inspirace byla z www.jakpsatweb.cz . Doporučuji tam také nahlédnout.
Popis příkladu
Příklad slouží k procvičení výpočtu souřadnic vektoru zadaného dvěma body. Zadání se zobrazí po načtení stránky. Zadání se generuje v celých čísleh náhodně po kliknutí na "Nové zadání".
Student má řešit mimo počítač z paměti nebo na volném listu. Pokud nemá tušení, klikne na "Návod", kde se zobrazí stručná rada. Jestliže návod nepomohl, je zde "Řešení", kde je uvedeno jak řešení obecné, tak i s dosazením. Pod odkazem "Výsledek" se skrývá výsledek aktuálního zadání příkladu.
Jednotlivé volby lze využívat samostatně.
Použití v Moodle
Vytvořit studijní materiál webová stránka. Do oddílu "Full text" zkopírovat níže uvedený kód.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
>
<html>
<head>
<meta content="text/html; charset=ISO-8859-2"
http-equiv="content-type">
<title>Souradnice vektoru</title>
<script>
function zobrazSkryj(id){
el=document.getElementById(id).style;
el.display=(el.display == 'block')?'none':'block';
}
function skryj(id){
el=document.getElementById(id).style;
el.display='none';
}
function procAkce(){
skryj('oddil1');
skryj('oddil2');
skryj('oddil3');
Ax=Math.round(-10+(20*Math.random()));
Ay=Math.round(-10+(20*Math.random()));
Bx=Math.round(-10+(20*Math.random()));
By=Math.round(-10+(20*Math.random()));
A=Ax+";"+Ay;// hodnoty pro zadání
B=Bx+";"+By;// hodnoty pro zadání
vx=Bx-Ax;
vy=By-Ay;
vysledek=vx+";"+vy;
document.frmF.txtSouradnice1.value=A;
document.frmF.txtSouradnice2.value=B;
document.frmF.txtVysledek.value= vysledek;
document.frmF.txtAx.value=Ax;
document.frmF.txtAy.value=Ay;
document.frmF.txtBx.value=Bx;
document.frmF.txtBy.value=By;
return}
</script>
<style>
h3 { color:blue; cursor: pointer; cursor: hand; text-decoration: underline}
.skryvany {display: none}
</style>
</head>
<body>
<form name="frmF">
Souřadnice vektoru. Určete souřadnice vektoru <b>v</b> daného <br>počátečním bodem A[<input type="text" name="txtSouradnice1" size="5" align="center">]<br> a koncovým bodem B[<input type="text" name="txtSouradnice2" size="5" align="center">].
<br>
<br><br>
<input Type ="button" Name="btnZadat" size="25" Value="Nové zadani" OnClick="procAkce()" align="center">
<br>
<h3 onclick="zobrazSkryj('oddil1')">Návod</h3>
<div id="oddil1" class="skryvany">Souřadnice vektoru vypočteme, pokud od x-ových a y-ových souřadnic koncového bodu odečteme souřadnice bodu počátečního.
</div>
<h3 onclick="zobrazSkryj('oddil2')">Řešení:</h3>
<div id="oddil2" class="skryvany">
v<sub>x</sub>=B<sub>x</sub>-A<sub>x</sub><br>
v<sub>y</sub>=B<sub>y</sub>-A<sub>y</sub><br>
<hr>
v<sub>x</sub>=<input type="text" name="txtBx" size="2" align="center">-<input type="text" name="txtAx" size="2" align="center"><br>
v<sub>y</sub>=<input type="text" name="txtBy" size="2" align="center">-<input type="text" name="txtAy" size="2" align="center"><br>
</div>
<h3 onclick="zobrazSkryj('oddil3')">Výsledek:</h3>
<div id="oddil3" class="skryvany">Vysledek: <b>v=</b><input type="text" name="txtVysledek" size="6" ></div>
</form>
</body>
</html>
Inspirace byla z www.jakpsatweb.cz . Doporučuji tam také nahlédnout.
Popis příkladu
Příklad slouží k procvičení výpočtu souřadnic vektoru zadaného dvěma body. Zadání se zobrazí po načtení stránky. Zadání se generuje v celých čísleh náhodně po kliknutí na "Nové zadání".
Student má řešit mimo počítač z paměti nebo na volném listu. Pokud nemá tušení, klikne na "Návod", kde se zobrazí stručná rada. Jestliže návod nepomohl, je zde "Řešení", kde je uvedeno jak řešení obecné, tak i s dosazením. Pod odkazem "Výsledek" se skrývá výsledek aktuálního zadání příkladu.
Jednotlivé volby lze využívat samostatně. Použití v Moodle
Vytvořit studijní materiál webová stránka. Do oddílu "Full text" zkopírovat níže uvedený kód.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
>
<html>
<head>
<meta content="text/html; charset=ISO-8859-2"
http-equiv="content-type">
<title>Souradnice vektoru</title>
<script>
function zobrazSkryj(id){
el=document.getElementById(id).style;
el.display=(el.display == 'block')?'none':'block';
}
function skryj(id){
el=document.getElementById(id).style;
el.display='none';
}
function procAkce(){
skryj('oddil1');
skryj('oddil2');
skryj('oddil3');
Ax=Math.round(-10+(20*Math.random()));
Ay=Math.round(-10+(20*Math.random()));
Bx=Math.round(-10+(20*Math.random()));
By=Math.round(-10+(20*Math.random()));
A=Ax+";"+Ay;// hodnoty pro zadání
B=Bx+";"+By;// hodnoty pro zadání
vx=Bx-Ax;
vy=By-Ay;
vysledek=vx+";"+vy;
document.frmF.txtSouradnice1.value=A;
document.frmF.txtSouradnice2.value=B;
document.frmF.txtVysledek.value= vysledek;
document.frmF.txtAx.value=Ax;
document.frmF.txtAy.value=Ay;
document.frmF.txtBx.value=Bx;
document.frmF.txtBy.value=By;
return}
</script>
<style>
h3 { color:blue; cursor: pointer; cursor: hand; text-decoration: underline}
.skryvany {display: none}
</style>
</head>
<body>
<form name="frmF">
Souřadnice vektoru. Určete souřadnice vektoru <b>v</b> daného <br>počátečním bodem A[<input type="text" name="txtSouradnice1" size="5" align="center">]<br> a koncovým bodem B[<input type="text" name="txtSouradnice2" size="5" align="center">].
<br>
<br><br>
<input Type ="button" Name="btnZadat" size="25" Value="Nové zadani" OnClick="procAkce()" align="center">
<br>
<h3 onclick="zobrazSkryj('oddil1')">Návod</h3>
<div id="oddil1" class="skryvany">Souřadnice vektoru vypočteme, pokud od x-ových a y-ových souřadnic koncového bodu odečteme souřadnice bodu počátečního.
</div>
<h3 onclick="zobrazSkryj('oddil2')">Řešení:</h3>
<div id="oddil2" class="skryvany">
v<sub>x</sub>=B<sub>x</sub>-A<sub>x</sub><br>
v<sub>y</sub>=B<sub>y</sub>-A<sub>y</sub><br>
<hr>
v<sub>x</sub>=<input type="text" name="txtBx" size="2" align="center">-<input type="text" name="txtAx" size="2" align="center"><br>
v<sub>y</sub>=<input type="text" name="txtBy" size="2" align="center">-<input type="text" name="txtAy" size="2" align="center"><br>
</div>
<h3 onclick="zobrazSkryj('oddil3')">Výsledek:</h3>
<div id="oddil3" class="skryvany">Vysledek: <b>v=</b><input type="text" name="txtVysledek" size="6" ></div>
</form>
</body>
</html>
Díky za vzor, mrknu na něj.
Ohledně té přeměny zdroj. kódu, jsem našel řešení v tom, že prostě musím vložit hotový kód a nesmím ho nechat moodlem přelouskat- potom to funguje.
Zdroj mám tento:
<SCRIPT language="javascript">
function zobrazSkryj(idecko) {
el=document.getElementById(idecko).style;
el.display=(el.display == 'block')?'none':'block';
}
</SCRIPT>
<div id="zadani">
<span style="font-weight: bold;">Zadání:<br />
</span><br />
Napište ...
<br />
</div>
<p class="zalozka"></p>
<table style="font-family: Times New Roman;">
<tbody>
<tr>
<td style="width: 250px; height: 20px; text-align: center;"><span title="výsledek">Výsledek</span></td>
<td style="width: 250px; height: 20px; text-align: center;"><span title="nápovědu">Rada</span></td>
<td style="width: 250px; height: 20px; text-align: center;"><span title="řešení">Řešení</span></td>
</tr>
</tbody>
</table>
<table style="font-family: Times New Roman; font-weight: bold;">
<tbody>
<tr>
<td style="width: 250px; height: 20px; text-align: center;">
<a onclick="zobrazSkryj('vys')" title="zobrazí/skryje výsledek">
<img width="40" vspace="0" hspace="0" height="40" border="0" align="middle" title="" alt=""
src="vysledek.gif" /></a> <br />
</td>
<td style="width: 250px; height: 20px; text-align: center;">
<a onclick="zobrazSkryj('rad')" title="zobrazí/skryje nápovědu">
<img width="40" vspace="0" hspace="0" height="40" border="0" align="middle" title="" alt=""
src="napoveda.gif" /> <br />
</td>
<td style="width: 250px; height: 20px; text-align: center;">
<a onclick="zobrazSkryj('res')" title="zobrazí/skryje řešení">
<img width="40" vspace="0" hspace="0" height="40" border="0" align="middle" title="" alt=""
src="reseni.gif" /> <br />
</td>
</tr>
</tbody>
</table>
<br />
<hr style="width: 100%; height: 2px; font-weight: bold;" />
<div id="vys" class="polozka" style="display: none">
<p><strong>Výsledek:</strong></p>
<p align="left">...</p>
<p align="left">
<img width="400" vspace="0" hspace="0" height="27" border="0" src="vysledek.gif" alt="" title="" />
</p>
</div>
<div id="rad" class="polozka" style="display: none">
<p>
<strong>Rada:</strong>
</p>
<p>
</p>
</div>
<div id="res" class="polozka" style="display: none">
<p><strong>Řešení:</strong></p>
<p>
</p>
</div>
<hr style="width: 100%; height: 2px; font-weight: bold;" />
Ohledně té přeměny zdroj. kódu, jsem našel řešení v tom, že prostě musím vložit hotový kód a nesmím ho nechat moodlem přelouskat- potom to funguje.
Zdroj mám tento:
<SCRIPT language="javascript">
function zobrazSkryj(idecko) {
el=document.getElementById(idecko).style;
el.display=(el.display == 'block')?'none':'block';
}
</SCRIPT>
<div id="zadani">
<span style="font-weight: bold;">Zadání:<br />
</span><br />
Napište ...
<br />
</div>
<p class="zalozka"></p>
<table style="font-family: Times New Roman;">
<tbody>
<tr>
<td style="width: 250px; height: 20px; text-align: center;"><span title="výsledek">Výsledek</span></td>
<td style="width: 250px; height: 20px; text-align: center;"><span title="nápovědu">Rada</span></td>
<td style="width: 250px; height: 20px; text-align: center;"><span title="řešení">Řešení</span></td>
</tr>
</tbody>
</table>
<table style="font-family: Times New Roman; font-weight: bold;">
<tbody>
<tr>
<td style="width: 250px; height: 20px; text-align: center;">
<a onclick="zobrazSkryj('vys')" title="zobrazí/skryje výsledek">
<img width="40" vspace="0" hspace="0" height="40" border="0" align="middle" title="" alt=""
src="vysledek.gif" /></a> <br />
</td>
<td style="width: 250px; height: 20px; text-align: center;">
<a onclick="zobrazSkryj('rad')" title="zobrazí/skryje nápovědu">
<img width="40" vspace="0" hspace="0" height="40" border="0" align="middle" title="" alt=""
src="napoveda.gif" /> <br />
</td>
<td style="width: 250px; height: 20px; text-align: center;">
<a onclick="zobrazSkryj('res')" title="zobrazí/skryje řešení">
<img width="40" vspace="0" hspace="0" height="40" border="0" align="middle" title="" alt=""
src="reseni.gif" /> <br />
</td>
</tr>
</tbody>
</table>
<br />
<hr style="width: 100%; height: 2px; font-weight: bold;" />
<div id="vys" class="polozka" style="display: none">
<p><strong>Výsledek:</strong></p>
<p align="left">...</p>
<p align="left">
<img width="400" vspace="0" hspace="0" height="27" border="0" src="vysledek.gif" alt="" title="" />
</p>
</div>
<div id="rad" class="polozka" style="display: none">
<p>
<strong>Rada:</strong>
</p>
<p>
</p>
</div>
<div id="res" class="polozka" style="display: none">
<p><strong>Řešení:</strong></p>
<p>
</p>
</div>
<hr style="width: 100%; height: 2px; font-weight: bold;" />