Dominar la programación web del lado del cliente es esencial para el desarrollo de aplicaciones web responsivas e interactivas. Para apoyar el autoestudio de los estudiantes novatos, en este documento, proponemos un nuevo formato de ejercicio llamado problema de completar frases (PFP) en el Sistema de Asistencia para el Aprendizaje de Programación Web (WPLAS). Una instancia de PFP presenta un código fuente con frases en blanco (un conjunto de elementos) y capturas de pantalla de la página web correspondiente. Luego, solicita al usuario que complete los espacios en blanco, y las respuestas se evalúan automáticamente mediante la coincidencia de cadenas con respuestas correctas predefinidas. Al aumentar los espacios en blanco, el PFP puede acercarse a escribir un código desde cero. Para facilitar la creación de preguntas escalables y conscientes del contexto, implementamos el algoritmo de generación de instancias de PFP en Python utilizando expresiones regulares. Este enfoque se dirige a segmentos de código significativos en HTML, CSS y JavaScript que reflejan el comportamiento interactivo del desarrollo front-end. Para las evaluaciones, generamos 10 instancias de PFP para temas básicos de programación web y 5 instancias para videojuegos y se las asignamos a estudiantes de la Universidad de Okayama, Japón, y la Politécnica Estatal de Malang, Indonesia. Sus resultados de solución muestran que la mayoría de los estudiantes pudieron resolverlas correctamente, lo que indica la efectividad y accesibilidad de las instancias generadas. Además, investigamos la capacidad de la IA generativa, específicamente ChatGPT, para resolver las instancias de PFP. Los resultados muestran un 86.7% de precisión para las instancias de PFP de temas básicos. Aunque aún no puede encontrar respuestas completamente, debemos monitorear el progreso cuidadosamente. En trabajos futuros, mejoraremos el PFP en WPLAS para manejar respuestas no únicas al mejorar la validación de respuestas para un reconocimiento flexible de respuestas equivalentes.