Select bloqueado y Li Resulta que tengo un select que me carga 3 lecciones, cada lección tiene 6 item y cada item tiene subitem.
El problema que es que las lecciones me las carga mediante select y las lecciones en una lista.
Lo que quiero lograr es poder bloquear las demas lecciones hasta que se el alumno haya revisado todos los item anteriores.
Lo mismo con los item que estan en una lista, quiere que primero revise el contenido de el item 1 y luego el 2, asi sucesivamente.
Claramente luego deben quedar disponibles las lecciones e item revisados anteriormente.
No tengo una idea de como desarrollarlo.
Podria ser bloqueando los item y lecciones o ocultarlos.
Ojalá me pudieran ayudar a resolver mi problema.
hasta el momento tengo este código
Código:
<div id='iddiv'>
<style type="text/css">
.estilo {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-style: normal;
color: #996600;
word-spacing: normal;
}
.comment {
font-family: "Times New Roman", Times, serif;
font-size: 16px;
color: #660000;
}
.estilo1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #BEBFE7;
}
.directorio
ul {display:inline; margin:0}
li {list-style: none;}
ul.sub li {margin-left: 15px;}
#item11, #item21, #item31, #item41, #item51, #item61,#item12, #item22, #item32, #item42, #item52, #item62, #item13, #item23, #item33, #item43, #item53, #item63 {display: none;}
.style1 {font-size: 24px}
.style2 {color: #0033FF}
</style>
<script language="JavaScript"> function toggle_ocupacion(elemento) {
if(elemento.value=='leccion1') {
document.getElementById("leccion1").style.display ="inline";
document.getElementById("leccion2").style.display = "none";
document.getElementById("leccion3").style.display = "none";
} else {
document.getElementById("leccion1").style.display = "none";
document.getElementById("leccion2").style.display = "none";
document.getElementById("leccion3").style.display = "none";
if (elemento.value=='leccion2')
{
document.getElementById("leccion2").style.display= "inline";
document.getElementById("leccion1").style.display = "none";
document.getElementById("leccion3").style.display = "none";
}
else {
document.getElementById("leccion2").style.display = "none";
document.getElementById("leccion1").style.display = "none";
document.getElementById("leccion3").style.display = "none";
if (elemento.value=='leccion3')
{
document.getElementById("leccion3").style.display= "inline";
document.getElementById("leccion1").style.display = "none";
document.getElementById("leccion2").style.display = "none";
}
else{
document.getElementById("leccion1").style.display = "none";
document.getElementById("leccion2").style.display = "none";
document.getElementById("leccion3").style.display = "none";
}
}
}
}
function cambiar(que1)
{
var sub = document.getElementById(que1);
sub.style.display = sub.style.display == 'block' ? 'none' : 'block';
}
</script>
<p> </p>
<p> </p>
<p> </p>
<table>
<tr>
<td height="5">
<select name="leccion" id="leccion" onChange="toggle_ocupacion(this);"><option value='leccion1' >Lección 1: Las Fracciones en la vida cotidiana.</option><option value='leccion2' >Lección 2: Estudio de las Fracciones.</option><option value='leccion3' >Lección 3: Comparación entre fracciones.</option></select>
</td>
<td rowspan="3" colspan="1" style="width: 500px" valign="top">
<div id="contenido"> </div>
</td>
</tr>
<tr>
<td height="10">
<span id="leccion1" style="display: inline;">
<table border="1">
<tr>
<td>
<menu>
<li>
<a href="javascript:cambiar('item11')" >
Ítem 1: Llamar la atención.
</a>
</li>
<li id="item11">
<ul class="sub">
<li>Hola Te invitamos a aprender</li>
<br>
</ul>
</li>
<li>
<a href="javascript:cambiar('item21')" >
Ítem 2: Objetivos.
</a>
</li>
<li id="item21">
<ul class="sub">
<li >En esta lección</li>
<br>
</ul>
</li>
<li><a href="javascript:cambiar('item31')">Ítem 3: Teoría y Conceptos.</a></li>
<li id="item31">
<ul class="sub">
<br>
</ul>
</li>
<li>
<a href="javascript:cambiar('item41')">
Ítem 4: Ejemplos.
</a>
</li>
<li id="item41">
<ul class="sub">
<li ><a href="mathMarket_Spanish_F15.swf" target="indice"> Compartiendo un alfajor</a></li><li >Mitad de un alfajor</li><li >Fraccionando pizzas</li><li >Partiendo una torta</li><li >Receta para hacer galletas</li><li >Fracciones en Egipto</li><li >Como se fracciona 1</li><li >Como se fracciona 2</li><li >Como se fracciona 3</li><li >Como se fracciona 4</li>
<br>
</ul>
</li>
<li><a href="javascript:cambiar('item51')">Ítem 5: Ejercicios con retroalimentación.</a></li>
<li id="item51">
<ul class="sub">
<li>Partiendo un pastel con LU-CHIN</li><li>Colorear</li><li>Escalas</li><li>Mercado matematico</li><li>Ordenar fracciones</li>
<br>
</ul>
</li>
<li><a href="javascript:cambiar('item61')">Ítem 6: Finalización.</a></li>
<li id="item61">
<ul class="sub">
<br>
</ul>
</li>
</menu>
</td>
</tr>
</table>
</span>
<span id="leccion2" style="display: none;">
<table border="1">
<tr>
<td>
<menu>
<li><a href="javascript:cambiar('item12')">Ítem 1: Llamar la atención.</a></li>
<li id="item12">
<ul class="sub">
<li>Atencion sigamos aprendiendo</li>
<br>
</ul>
</li>
<li><a href="javascript:cambiar('item22')">Ítem 2: Objetivos.</a></li>
<li id="item22">
<ul class="sub">
<li>Como se escriben las fracciones</li>
<br>
</ul>
</li>
<li><a href="javascript:cambiar('item32')">Ítem 3: Teoría y Conceptos.</a></li>
<li id="item32">
<ul class="sub">
<br>
</ul>
</li>
<li><a href="javascript:cambiar('item42')">Ítem 4: Ejemplos.</a></li>
<li id="item42">
<ul class="sub">
<li>Como se escribe una fraccion</li><li>Solucion problema torta</li>
<br>
</ul>
</li>
<li><a href="javascript:cambiar('item52')">Ítem 5: Ejercicios con retroalimentación.</a></li>
<li id="item52">
<ul class="sub">
<li >Puzzle Mickey</li><li >Practica rojos y azules</li>
<br>
</ul>
</li>
<li><a href="javascript:cambiar('item62')">Ítem 6: Finalización.</a></li>
<li id="item62">
<ul class="sub">
<br>
</ul>
</li>
</menu>
</td></tr>
</table>
</span>
<span id="leccion3" style="display: none;">
<table border="1">
<tr><td>
<menu>
<li><a href="javascript:cambiar('item13')">Ítem 1: Llamar la atención.</a></li>
<li id="item13">
<ul class="sub">
<br>
</ul>
</li>
<li><a href="javascript:cambiar('item23')">Ítem 2: Objetivos.</a></li>
<li id="item23">
<ul class="sub">
<br>
</ul>
</li>
<li><a href="javascript:cambiar('item33')">Ítem 3: Teoría y Conceptos.</a></li>
<li id="item33">
<ul class="sub">
<br>
</ul>
</li>
<li><a href="javascript:cambiar('item43')">Ítem 4: Ejemplos.</a></li>
<li id="item43">
<ul class="sub">
<br>
</ul>
</li>
<li><a href="javascript:cambiar('item53')">Ítem 5: Ejercicios con retroalimentación.</a></li>
<li id="item53">
<ul class="sub">
<br>
</ul>
</li>
<li><a href="javascript:cambiar('item63')">Ítem 6: Finalización.</a></li>
<li id="item63">
<ul class="sub">
<br>
</ul>
</li>
</menu>
</td></tr>
</table>
</span>
</td>
</tr>
<tr><td></td></tr>
</table>
</div>
