Programación

CÓDIGO PARA CREAR UN BOTÓN QUE OCULTE CONTENIDO

A continuación un recurso para vuestro blog. Se trata de un botón que permite ocultar parte del contenido de una entrada. Si  tenéis un ejercicio con la solución debajo y no queréis que esta se muestre, podéis poner la solución en una capa que permanece oculta hasta que se pulsa un botón.

Si se oculta una solución hecha con Geogebra el código se complica.  Antes de incluir el código del botón y el contenido oculto, en HTML, hay que situar un script para el código de Geogebra e indicar el lugar donde va a aparecer dicha aplicación.

Parece engorroso pero es sencillo. Una vez redactada la parte visible, nos introducimos en la zona de HTML pulsando la pestaña de Blogger. Vamos paso a paso:

1.- Se copia el código de abajo en la zona de HTML: CTRL+C y CTRL+V.

2.- Se cambian los DOS nombres Geogebra-XXX por otro (Geogebra-001).
3.- Se incrusta ENTRE las comillas el código de Geogebra (<iframe> y </iframe>).

4.- Se pega el contenido oculto desde el Bloc de Notas (nunca desde Word).

5.- Se actualiza. En el navegador recargamos (con F5) y comprobamos el botón.

Para retocar el contenido de oculto donde pone NONE, en el código, se sustituye por YES. De esta manera se puede visualizar el contenido en la zona redactar de Blogger. Una vez terminados los retoques se regresa a la pestaña HTML y se vuelve a poner NONE. Ahora actualizáis los cambios.

Advertencia importante en Blogger: Hay que actualizar desde la pestaña HTML. En ocasiones Blogger altera el código HTML en la vista de redacción. Pero si publicáis algo en vista HTML no se cambian partes del código como: espacios, comillas, etc. Sed cuidadosos con esto último o puede que tengáis que borrar la zona oculta y volver a pegar el contenido. Si os equivocáis volved, antes de borrar nada, a actualizar desde la zona HTML.

CÓDIGO Script y HTML:

<script>
function loadGeogebra() {
document.getElementById('Geogebra-XXX-CAMBIAR').innerHTML = '<iframe height="600px" scrolling="no" src="https://tube.geogebra.org/material/iframe/id/1798611/width/650/height/600/border/888888/rc/true/ai/false/sdz/true/smb/false/stb/false/stbh/true/ld/false/sri/true/at/auto" style="border: 0px;" width="650px"></iframe>';
}
</script>
<div class="divspoiler">
<input onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'OCULTAR SOLUCIÓN'; javascript:loadGeogebra(); } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'MOSTRAR DE NUEVO'; }" type="button" value="MOSTRAR SOLUCIÓN" />
</div>
<div>
<div class="spoiler" style="display: NONE;">
<!----- (AQUI DEBAJO MI CONTENIDO OCULTO) ---->

Pego AQUÍ mi contenido de texto desde el BLOC DE NOTAS.

<!----- (AQUI FINALIZA MI CONTENIDO OCULTO) ---->
<div id="Geogebra-XXX-CAMBIAR"></div>
</div>
</div>

Resumen: Primero se cambian los nombres en verde, los dos iguales. Después se copia el código obtenido en la web de Geogebra (arriba en color rojo). Luego se pega el contenido desde el bloc de notas en la zona indicada.