Cómo crear un cuestionario rápido con prompt en JavaScript

Name: Cómo crear un cuestionario rápido con prompt en JavaScript
Brand: Jose Aguilar
SKU: joseaguilarblog-7389
Availability: InStock
Rating: 5 (13 reviews)

En este artículo vas a ver cómo crear un cuestionario rápido con JavaScript utilizando la función prompt() que el mismo lenguaje de programación facilita para mostrar una interfaz simple en formato ventana de alerta o popup que puede permitir al usuario responder a una pregunta o introducir una información concreta.

En JavaScript crear este tipo de interfaces es muy simple utilizando la función prompt() que se muestra con el siguiente aspecto en Google Chrome:

Es posible que en otros navegadores como Firefox o Internet Explorer muestren este tipo de ventanas con otro aspecto distinta, ya que, este tipo de ventanas son uno de los elementos predefinidos que están disponibles para usar en los navegadores. Cada navegador tiene su propio estilo para este tipo de elementos.

El método prompt() es una función definida dentro del objeto Window que permite mostrar un diálogo con mensaje opcional, que solicita al usuario que introduzca un texto.

Esta función puede recibir 2 parámetros:

Parámetro 1 = Mensaje: es una cadena de texto que se mostrará al usuario. Este parámetro es opcional y puede ser omitido si no se necesita mostrar nada en la ventana.
Parámetro 2 = defecto: es una cadena de texto que contiene el valor predeterminado para el texto de entrada. Es opcional.

Un cuadro de diálogo utilizando prompt() contiene un cuadro de texto de una línea, un botón «Cancelar» y un botón «Aceptar».

Al pulsar el botón «Aceptar» retorna el texto que el usuario ha introducido en el cuadro de texto.

El cuadro de diálogo que ofrece prompt() es una ventana modal que previene que el usuario acceda al resto de la página hasta que el cuadro de diálogo sea cerrado. Por este motivo, no se recomienda abusar de este tipo de ventanas ya que pueden causar molestias a los usuarios.

Es posible que esto sea muy sencillo para lo que andas buscando pero puede ser muy útil y te puede ahorrar mucho trabajo si tu aplicación tan solo requiere recibir unos pequeños parámetros de entrada para continuar.

Fíjate en el siguiente código que he agregado en el archivo app.js del ejemplo en funcionamiento:

Source code

let name = prompt('Cual es tu nombre?');
let age = prompt('Cual es tu edad?');
 
const currentDate = new Date();
const year = currentDate.getFullYear() - Number(age);
 
document.getElementById('content').innerHTML = `<h2>Bienvenido ${name} de ${age} años.<h2/><h3>Naciste el año ${year}.</h3>`;

En tan solo unas pocas líneas de código ya puedes tener una pequeña interfaz que aparece antes de cargar la página y que permite realizar preguntas al usuario antes de empezar una aplicación o antes de mostrarle los contenidos.

De esta forma tan simple, en el ejemplo en funcionamiento, estoy haciendo 2 preguntas al usuario antes de entrar en la página web.

Quiero saber cual es su nombre y que edad tiene. Hago un pequeño cálculo para averiguar su año de nacimiento y, después, tan solo muestro las variables en el contenedor principal de la página.

Dentro del cuerpo de la página o dentro de la etiqueta <body>, he agregado el contenedor vacío que recibe los datos mediante la manipulación del DOM con JavaScript.

Source code

<div id="content" class="col-lg-12">
 
</div>

En el ejemplo en funcionamiento, el usuario puede introducir su nombre y edad para simplemente mostrarlo en pantalla acompañado del año de nacimiento.

Esto es un ejemplo muy sencillo para que veas lo fácil que es empezar a hacer aplicaciones con JavaScript.

Esto no es más que la base de JavaScript, crear 2 variables, hacer un pequeño cálculo e inyectar los resultados en el HTML modificando el DOM.

Esta manipulación tan simple es la que permite a este lenguaje de programación ser tan popular y flexible.

Te permite crear todo tipo de aplicaciones (grandes y pequeñas) con gran facilidad.

Puedes entrar en la categoría JavaScript de este blog para ver algunas de ellas.

Existen otras formas más sofisticadas que permiten abrir una ventana modal o un popup con JavaScript pero, por la sencillez y rapidez que tiene el uso de prompt para conseguir esto, espero que haya merecido la pena dedicar este pequeño artículo para que conozcas esto y te pueda ser útil.

Ver demo Descargar