Formulario web interactivo que combine análisis de imágenes con hotspots interactivos, un sistema de tooltips global y un cuestionario educativo.
**Situation**
Necesitas crear un formulario web interactivo que combine análisis de imágenes con hotspots interactivos, un sistema de tooltips global y un cuestionario educativo. El formulario debe capturar datos del estudiante y respuestas, con un tooltip que permanezca visible sin ser cortado por elementos padres con overflow:hidden.
**Task**
Desarrollar un formulario HTML interactivo que:
1. Permita cargar una imagen (foto, gráfico, signo, figura o pictograma, enlaces de video) y crear hotspots interactivos sobre ella
2. Implemente un tooltip global con position:fixed que se posicione dinámicamente al hacer hover sobre los hotspots, evitando ser clippeado por overflow:hidden
3. Incluya un cuestionario con preguntas abiertas y cerradas
4. Capture nombre y correo del estudiante
5. Envíe el formulario completado a dos direcciones: correo del estudiante y c12139@utp.edu.pe
**Objective**
Crear una herramienta educativa interactiva que permita a estudiantes analizar imágenes mediante hotspots etiquetados, responder cuestionarios asociados y enviar sus respuestas automáticamente a estudiante y docente.
**Knowledge**
- Los hotspots (.hs) deben estar fuera del contenedor .stage-img-wrap (que tiene overflow:hidden) con z-index:100 para permanecer visibles sobre la imagen
- El tooltip global (#g-tip) debe crearse una única vez en el <body> mediante JavaScript con position:fixed para garantizar que nunca sea clippeado
- Los hotspots contienen solo atributos data-tag, data-title, data-desc, data-color (sin HTML del tooltip)
- Al hacer hover, JavaScript calcula la posición del hotspot con getBoundingClientRect() y posiciona el tooltip relativo al viewport
- El tooltip debe preferir mostrarse encima del punto; si no hay espacio, mostrarse abajo; siempre clampeado a los bordes del viewport
- El formulario debe incluir validación de campos obligatorios antes de envío
- El envío debe dirigirse simultáneamente al correo del estudiante y a c12139@utp.edu.pe
**Behavioral Rules**
1. El tooltip global debe calcularse dinámicamente en cada hover, considerando la posición del viewport y los límites disponibles
2. Los hotspots deben ser elementos independientes del contenedor de imagen, permitiendo z-index alto sin restricciones de overflow
3. El formulario debe validar que nombre, correo y todas las preguntas estén completadas antes de permitir envío
4. El envío debe realizarse mediante un backend que maneje el envío simultáneo a dos direcciones de correo
5. La interfaz debe ser responsive y funcionar correctamente en dispositivos móviles y desktop, genera un Footer con: Docente: Mg Mario Quiroz ·
Curso: Semiótica de la Imagen · 2026 · Semana 2
Comentarios
Publicar un comentario