\documentclass[a4paper,11pt]{article}

\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage[francais,bloc,completemulti]{automultiplechoice}
\usepackage[french]{babel}
\usepackage{amsmath, amssymb}

\title{Événements et formulaires}
\date{Numérique et sciences informatiques}

\begin{document}

\noindent\textbf{Événements et formulaires} \hfill \textit{Numérique et sciences informatiques}\\[0.4em]
Nom~: \dotfill\ Prénom~: \dotfill

\bigskip

\element{premiereevenementsformulaires}{
  \begin{question}{q01}
    Qu'est-ce qu'un \textbf{événement} dans le contexte
d'une page web ?
    \begin{choices}
    \wrongchoice{Une modification CSS automatique}
    \wrongchoice{Un fichier média}
    \wrongchoice{Une erreur de programmation}
    \correctchoice{Une action déclenchée par l'utilisateur (clic, saisie, mouvement souris...) ou par le navigateur (chargement, redimensionnement...)}
    \end{choices}
  \end{question}
}

\element{premiereevenementsformulaires}{
  \begin{question}{q02}
    Quel est le nom de l'événement déclenché quand
l'utilisateur \textbf{clique} sur un élément ?
    \begin{choices}
    \wrongchoice{\texttt{mouseDown}}
    \wrongchoice{\texttt{onclick}}
    \correctchoice{\texttt{click}}
    \wrongchoice{\texttt{tap}}
    \end{choices}
  \end{question}
}

\element{premiereevenementsformulaires}{
  \begin{question}{q03}
    Quelle balise HTML délimite un \textbf{formulaire} ?
    \begin{choices}
    \wrongchoice{\texttt{<send>}}
    \correctchoice{\texttt{<form>}}
    \wrongchoice{\texttt{<input>}}
    \wrongchoice{\texttt{<formulaire>}}
    \end{choices}
  \end{question}
}

\element{premiereevenementsformulaires}{
  \begin{question}{q04}
    Quelle balise crée un \textbf{champ de saisie} texte ?
    \begin{choices}
    \wrongchoice{\texttt{<textbox>}}
    \wrongchoice{\texttt{<text />}}
    \correctchoice{\texttt{<input type="text">}}
    \wrongchoice{\texttt{<entry>}}
    \end{choices}
  \end{question}
}

\element{premiereevenementsformulaires}{
  \begin{question}{q05}
    Comment créer un \textbf{bouton} « Envoyer » qui
soumet le formulaire ?
    \begin{choices}
    \correctchoice{\texttt{<button type="submit">Envoyer</button>} (ou \texttt{<input type="submit" value="Envoyer">})}
    \wrongchoice{\texttt{<a>Envoyer</a>}}
    \wrongchoice{\texttt{<click>Envoyer</click>}}
    \wrongchoice{\texttt{<send>Envoyer</send>}}
    \end{choices}
  \end{question}
}

\element{premiereevenementsformulaires}{
  \begin{question}{q06}
    Quelle balise crée une \textbf{liste déroulante} ?
    \begin{choices}
    \wrongchoice{\texttt{<list>}}
    \correctchoice{\texttt{<select>} contenant des \texttt{<option>}}
    \wrongchoice{\texttt{<dropdown>}}
    \wrongchoice{\texttt{<combo>}}
    \end{choices}
  \end{question}
}

\element{premiereevenementsformulaires}{
  \begin{question}{q07}
    À quoi sert la balise \texttt{<label>} ?
    \begin{choices}
    \correctchoice{À associer une étiquette explicative à un champ de formulaire (clic sur l'étiquette = focus sur le champ)}
    \wrongchoice{À mettre du texte en gras}
    \wrongchoice{À créer un titre}
    \wrongchoice{À étiqueter une variable JavaScript}
    \end{choices}
  \end{question}
}

\element{premiereevenementsformulaires}{
  \begin{question}{q08}
    Quel événement se déclenche quand un
\textbf{formulaire est soumis} ?
    \begin{choices}
    \wrongchoice{\texttt{send}}
    \correctchoice{\texttt{submit}}
    \wrongchoice{\texttt{change}}
    \wrongchoice{\texttt{click}}
    \end{choices}
  \end{question}
}

\element{premiereevenementsformulaires}{
  \begin{question}{q09}
    Quelle méthode HTTP utilise-t-on pour
\textbf{envoyer un mot de passe} ?
    \begin{choices}
    \wrongchoice{Aucune des deux}
    \correctchoice{POST, parce que les données sont dans le corps de la requête, pas dans l'URL}
    \wrongchoice{GET, parce que c'est plus rapide}
    \wrongchoice{PUT, c'est obligatoire}
    \end{choices}
  \end{question}
}

\element{premiereevenementsformulaires}{
  \begin{question}{q10}
    Lequel de ces fragments est un \textbf{formulaire
valide} demandant un nom et l'envoyant en
POST ?
    \begin{choices}
    \wrongchoice{\begin{lstlisting}
<input type="text">
\end{lstlisting}
}
    \wrongchoice{\begin{lstlisting}
<form>Nom: <input></form>
\end{lstlisting}
}
    \wrongchoice{\begin{lstlisting}
<send name="nom" />
\end{lstlisting}
}
    \correctchoice{\begin{lstlisting}
<form action="/save" method="POST">
  <label for="nom">Nom :</label>
  <input id="nom" name="nom" type="text">
  <button type="submit">Envoyer</button>
</form>
\end{lstlisting}
}
    \end{choices}
  \end{question}
}

\element{premiereevenementsformulaires}{
  \begin{question}{q11}
    Quel code attache la fonction \texttt{handleClick} au
clic sur le bouton \texttt{btn} ?
    \begin{choices}
    \wrongchoice{\texttt{btn.onclick(handleClick)}}
    \wrongchoice{\texttt{btn.click(handleClick)}}
    \correctchoice{\texttt{btn.addEventListener("click", handleClick)}}
    \wrongchoice{\texttt{btn.handle("click", handleClick)}}
    \end{choices}
  \end{question}
}

\element{premiereevenementsformulaires}{
  \begin{question}{q12}
    Comment récupérer la valeur tapée dans
\texttt{<input id="nom">} ?
    \begin{choices}
    \wrongchoice{\texttt{document.getElementById("nom").text}}
    \wrongchoice{\texttt{document.getElementById("nom").innerHTML}}
    \wrongchoice{\texttt{document.getElementById("nom").content}}
    \correctchoice{\texttt{document.getElementById("nom").value}}
    \end{choices}
  \end{question}
}

\element{premiereevenementsformulaires}{
  \begin{question}{q13}
    À quoi sert \texttt{event.preventDefault()} dans un
gestionnaire ?
    \begin{choices}
    \wrongchoice{À empêcher tout événement futur}
    \correctchoice{À empêcher le comportement par défaut du navigateur (par exemple, ne pas soumettre le formulaire pour le traiter en JS)}
    \wrongchoice{À fermer la page}
    \wrongchoice{À effacer la console}
    \end{choices}
  \end{question}
}

\element{premiereevenementsformulaires}{
  \begin{question}{q14}
    Comment indiquer qu'un champ est
\textbf{obligatoire} dans le HTML ?
    \begin{choices}
    \wrongchoice{Avec \texttt{mandatory="true"}}
    \correctchoice{Avec l'attribut \texttt{required} : \texttt{<input required>}}
    \wrongchoice{Avec \texttt{must-fill}}
    \wrongchoice{Il faut une fonction JavaScript}
    \end{choices}
  \end{question}
}

\element{premiereevenementsformulaires}{
  \begin{question}{q15}
    Quel \textbf{type} d'\texttt{<input>} est le plus adapté
pour un champ « Âge » ?
    \begin{choices}
    \correctchoice{\texttt{type="number"}}
    \wrongchoice{\texttt{type="text"}}
    \wrongchoice{\texttt{type="email"}}
    \wrongchoice{\texttt{type="age"}}
    \end{choices}
  \end{question}
}

\element{premiereevenementsformulaires}{
  \begin{question}{q16}
    Dans un gestionnaire d'événement, comment
accéder à l'\textbf{élément} sur lequel l'événement
a eu lieu ?
    \begin{choices}
    \wrongchoice{\texttt{event.dom}}
    \wrongchoice{\texttt{this.element}}
    \correctchoice{\texttt{event.target}}
    \wrongchoice{\texttt{event.element}}
    \end{choices}
  \end{question}
}

\element{premiereevenementsformulaires}{
  \begin{question}{q17}
    Pourquoi l'attribut \texttt{name} est-il important
pour un \texttt{<input>} ?
    \begin{choices}
    \wrongchoice{Pour le validateur HTML}
    \wrongchoice{Pour le nom affiché}
    \correctchoice{Parce qu'il identifie la donnée lors de l'envoi du formulaire (clé dans la requête HTTP)}
    \wrongchoice{Pour la couleur du champ}
    \end{choices}
  \end{question}
}

\element{premiereevenementsformulaires}{
  \begin{question}{q18}
    Quelle balise crée une \textbf{zone de texte
multiligne} ?
    \begin{choices}
    \wrongchoice{\texttt{<paragraph contenteditable>}}
    \correctchoice{\texttt{<textarea>contenu initial</textarea>}}
    \wrongchoice{\texttt{<text>multiligne</text>}}
    \wrongchoice{\texttt{<input type="text" multiline>}}
    \end{choices}
  \end{question}
}

\element{premiereevenementsformulaires}{
  \begin{question}{q19}
    Quelle est la différence entre les événements
\texttt{input} et \texttt{change} sur un \texttt{<input type="text">} ?
    \begin{choices}
    \correctchoice{\texttt{input} se déclenche à chaque modification (chaque touche), \texttt{change} seulement quand le champ perd le focus avec une nouvelle valeur}
    \wrongchoice{\texttt{change} plante toujours}
    \wrongchoice{Aucune}
    \wrongchoice{\texttt{input} n'existe pas}
    \end{choices}
  \end{question}
}

\element{premiereevenementsformulaires}{
  \begin{question}{q20}
    Quand on soumet un formulaire en POST vers
\texttt{/save}, que se passe-t-il \textbf{côté
navigateur} ?
    \begin{choices}
    \wrongchoice{Le navigateur ouvre un autre site}
    \wrongchoice{Le formulaire reste affiché}
    \correctchoice{Le navigateur envoie une requête HTTP POST vers \texttt{/save} avec les données dans le corps, puis affiche la réponse du serveur}
    \wrongchoice{Rien}
    \end{choices}
  \end{question}
}

\element{premiereevenementsformulaires}{
  \begin{question}{q21}
    Faut-il valider les données d'un formulaire
\textbf{côté client} (JavaScript), \textbf{côté serveur}
ou les deux ?
    \begin{choices}
    \wrongchoice{Aucune des deux : faire confiance}
    \correctchoice{Les deux : côté client pour l'ergonomie (retour immédiat), côté serveur pour la sécurité (autorité)}
    \wrongchoice{Côté serveur uniquement}
    \wrongchoice{Côté client uniquement (plus rapide)}
    \end{choices}
  \end{question}
}

\element{premiereevenementsformulaires}{
  \begin{question}{q22}
    On a une liste de 100 boutons. Quelle est la
\textbf{meilleure} façon d'écouter leurs clics ?
    \begin{choices}
    \wrongchoice{Utiliser une variable globale}
    \correctchoice{Attacher un seul écouteur sur le parent et utiliser \texttt{event.target} pour identifier le bouton cliqué (« délégation d'événements »)}
    \wrongchoice{Modifier le HTML pour ajouter \texttt{onclick} à chaque bouton}
    \wrongchoice{Mettre \texttt{addEventListener} sur chacun des 100 boutons}
    \end{choices}
  \end{question}
}

\element{premiereevenementsformulaires}{
  \begin{question}{q23}
    Mon formulaire en POST envoie au serveur, mais
le champ « nom » est \textbf{vide} côté serveur.
Quelle est la cause la plus probable ?
    \begin{choices}
    \correctchoice{L'attribut \texttt{name} manque sur l'\texttt{<input>} (donc le champ n'est pas inclus dans la requête)}
    \wrongchoice{Le bouton submit est cassé}
    \wrongchoice{Le serveur est en panne}
    \wrongchoice{Le navigateur n'autorise pas POST}
    \end{choices}
  \end{question}
}

\element{premiereevenementsformulaires}{
  \begin{question}{q24}
    Quelle est l'attaque classique consistant à
faire \textbf{soumettre} un formulaire à un
utilisateur \textbf{à son insu} sur un autre site ?
    \begin{choices}
    \wrongchoice{SQL injection}
    \correctchoice{CSRF (Cross-Site Request Forgery)}
    \wrongchoice{Spam}
    \wrongchoice{XSS (Cross-Site Scripting)}
    \end{choices}
  \end{question}
}

\element{premiereevenementsformulaires}{
  \begin{question}{q25}
    Parmi les affirmations suivantes, laquelle
est \textbf{fausse} ?
    \begin{choices}
    \correctchoice{La méthode HTTP GET est préférable pour transmettre un mot de passe}
    \wrongchoice{Toute donnée client doit être revalidée côté serveur}
    \wrongchoice{Un événement DOM peut être écouté avec \texttt{addEventListener}}
    \wrongchoice{L'attribut \texttt{name} d'un champ est essentiel pour la soumission au serveur}
    \end{choices}
  \end{question}
}

\element{premiereevenementsformulaires}{
  \begin{question}{q26}
    Quel attribut \texttt{type} choisir pour un champ destiné à
la saisie d'une adresse électronique ?
    \begin{choices}
    \wrongchoice{\texttt{type="contact"}}
    \correctchoice{\texttt{type="email"}}
    \wrongchoice{\texttt{type="text"}}
    \wrongchoice{\texttt{type="address"}}
    \end{choices}
  \end{question}
}

\element{premiereevenementsformulaires}{
  \begin{question}{q27}
    Quel attribut HTML$5$ rend un champ de formulaire
\textbf{obligatoire}, en empêchant la soumission tant
qu'il est vide ?
    \begin{choices}
    \wrongchoice{\texttt{obligatoire}}
    \wrongchoice{\texttt{empty=false}}
    \correctchoice{\texttt{required}}
    \wrongchoice{\texttt{mandatory}}
    \end{choices}
  \end{question}
}


\onecopy{1}{
  \shufflegroup{premiereevenementsformulaires}
  \insertgroup{premiereevenementsformulaires}
}

\end{document}
