> For the complete documentation index, see [llms.txt](https://ng-girls-colombia.gitbook.io/workshop/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ng-girls-colombia.gitbook.io/workshop/desafio-4-tbd.md).
# Desafío #4: 🧠 Quiz
## ¡**Comparte tu progreso!** 📱
Si te ha gustado lo que has hecho hasta ahora, compártelo con tus amigos y familiares 👨👩👧👧
Haz click al botón **SHARE** y envía la **APP URL** para que todos vean tu increíble trabajo.
### Paso #1 🔥
¡Ahora vamos a crear un proyecto nuevo! Para hacerlo solo basta con:
1. Abrir una nueva página
2. Ir a [**stackblitz.com**](https://stackblitz.com/)
3. Y seleccionar la opción de **Angular**
### **Paso #2** 👩🎨
Vamos a borrar todo el contenido de `app.component.html`. Y luego copiamos dentro de una etiqueta `h1` nuestra primera y única pregunta:
```markup
¿Te ha gustado NgGirls hasta el momento?
```
Agreguemos las opciones de respuesta **(Sí y No)** con la etiqueta `button` de HTML:
```markup
```
Utilizamos botones para mostrar tu respuesta 👇.
### **Paso #3** 🤹
No siempre vamos a querer que nuestro texto esté escrito directamente en el **HTML**, por lo general debemos guardar esos textos en **variables** para poder cambiar los mensajes de manera más dinámica a través de código. 😉
Una de las funcionalidad más geniales de Angular se llama **String Interpolation**. Ésta te permite enlazar tus **variables** al HTML:
1. Abre el archivo `app.component.ts`
2. Allí hay una variable llamada `name`. Vamos a cambiar su nombre a `question`
3. Y vamos a reemplazar su valor con una pregunta
```typescript
question = "¿Te ha gustado NgGirls hasta el momento?"
```
Luego, en `app.component.html` cambiamos el texto de la pregunta por la variable `question`, haciendo uso de **string interpolation:**
```markup
{{ question }}
```
{% hint style="info" %}
Si justo ahora tienes alguna pregunta, no olvides que tienes excelentes mentores a quienes puedes preguntarles 😏
{% endhint %}
### **Paso #4** 😺
Como habrás notado, **String Interpolation** es bastante fácil ✌️. Ahora vamos a crear una función 🔥.
Una función en programación es simplemente una manera de definir una serie de acciones que queremos que se lleven a cabo en cierto momento.
{% hint style="info" %}
Por ejemplo, si estuviéramos creando una calculadora, lo más seguro es que tendríamos funciones como: sumar, restar, dividir, etc.
{% endhint %}
En este caso vamos a crear una función llamada **answer ✌️**. El propósito de esta función es guardar en una variable la respuesta que selecciones al presionar los botones (sí o no).
Por supuesto, dependiendo del botón que sea presionado, vamos a almacenar una valor diferente. Para esto simplemente le agregaremos un parámetro a la función. Lo llamaremos **value 🔮**
En `app.component.ts` creamos la función `answer` con el parámetro `value`
Ahora vamos a crear una variable donde podamos almacenar la respuesta seleccionada. A esta variable la vamos a llamar `response` 📜
Nota que en nuestra función asignamos el valor del parámetro `value` a la variable `response`
### **Paso #5** 🎬
¡Listo! Nuestra función está lista 🎉 Es momento de hacer uso de ella cuando el usuario presione alguno de los dos botones.
Para capturar la acción del usuario podemos utilizar **Event Binding.** Un mecanismo que nos proporciona Angular para llamar funciones desde el HTML.
Sólo basta con poner la palabra `click` entre paréntesis y asignarle la función que deseamos llamar entre comillas dobles:
```markup
```
Nota cómo pasamos el valor `sí` entre comillas simples en el archivo `app.component.html`
{% hint style="info" %}
💪 Ahora es tu turno de agregar el evento **click** al botón **No 💪**
{% endhint %}
### **Paso #6** ✍
Sólo nos falta usar **String Interpolation** para mostrar el resultado. Agreguemos la etiqueta `h1` con la variable `response`
```markup
{{ response }}
```
Cuando le des click a alguno de los botones debería verse así:
### **Paso #7** 🤡
¡Éste es el último paso!
Vamos a hacerlo más divertido agregando un emoji con una carita **feliz** (😃) o **triste** (😭) dependiendo de la respuesta.
Para esto, haremos uso de una funcionalidad de **Angular** llamada **Pipes.** Ellos nos permiten modificar la información que mostramos en el HTML de manera dinámica. Sigue estos pasos:
1. Ubica el mouse sobre la carpeta **app**, presiona click derecho y elige la opción **Pipe:**
2\. Asigna el nombre `emoji` en la caja de texto que aparece y **presiona enter:**
Deberías ver una archivo nuevo llamada `emoji.pipe.ts` con el siguiente contenido: 👇
Allí verás algo que ya conoces: **Una función ✌️**
En este caso tienes la función `transform` con dos parámetros `value` y `args`
{% hint style="info" %}
La función **transform** se encarga de transformar el texto en el HTML como queramos 🎉
{% endhint %}
En el método `transform` vamos a agregar la siguiente lógica:
```typescript
if(value === "Si") {
return value + " 😊";
}else if(value === "No") {
return value + " 🙁";
}
```
Lo que acabas de ver se llama una **Condición.** Básicamente estamos diciéndole a nuestra aplicación que:
* Si el valor que seleccione el usuario es **"Sí"** entonces va a concatenar un emoji **feliz** al final del texto
* Si el valor que seleccione el usuario es **"No"** entonces va a concatenar un emoji **triste** al final del texto
Por último hay que utilizar nuestro `emoji` pipe para transformar la respuesta que estamos mostrando en `app.component.html` de la siguiente manera:
```markup
{{ response | emoji }}
```
Voilá! Nuestro quiz ha sido terminado! 💜
## Lo lograste 💪
Puedes revisar la solución aquí 👇
{% embed url="" %}
{% hint style="success" %}
Has completado el **desafío #4**, ahora vamos a el **desafío #5 👇**
{% endhint %}