\documentclass[10pt,aspectratio=169]{beamer}

% --- Thème ---
\usetheme[language=french]{Celestia}

% Avec [allowframebreaks] sur les frames de questions, Beamer ajoute
% par défaut « (1) », « (2) », « (3) »... sur chaque sous-slide. On
% supprime entièrement cette annotation : un template vide pour
% « frametitle continuation ». L'enseignant identifie visuellement la
% continuation par le contenu de la slide. (Les variantes [from second]
% et [roman] interagissent mal avec un titre contenant \textemdash{}
% sous Celestia : elles déclenchent une erreur « Missing $ inserted ».)
\setbeamertemplate{frametitle continuation}{}

\subject{Numérique et sciences informatiques}
\title{Événements et formulaires}
\subtitle{QCM}
\author{Première}
\date{\today}

\begin{document}

\begin{frame}
    \titlepage
\end{frame}

% Q1 - Réponse en D
\begin{frame}[fragile]{Question 1 \textemdash{} Événement}
    Qu'est-ce qu'un \textbf{événement} dans le contexte
d'une page web ?\medskip
    \begin{itemize}
        \item[A.] Une modification CSS automatique
        \item[B.] Un fichier média
        \item[C.] Une erreur de programmation
        \item[\alert<2>{D.}] \alert<2>{Une action déclenchée par l'utilisateur (clic, saisie, mouvement souris...) ou par le navigateur (chargement, redimensionnement...)}
    \end{itemize}
\end{frame}

% Q2 - Réponse en C
\begin{frame}[fragile]{Question 2 \textemdash{} Événement de clic}
    Quel est le nom de l'événement déclenché quand
l'utilisateur \textbf{clique} sur un élément ?\medskip
    \begin{itemize}
        \item[A.] \texttt{mouseDown}
        \item[B.] \texttt{onclick}
        \item[\alert<2>{C.}] \alert<2>{\texttt{click}}
        \item[D.] \texttt{tap}
    \end{itemize}
\end{frame}

% Q3 - Réponse en B
\begin{frame}[fragile]{Question 3 \textemdash{} Balise form}
    Quelle balise HTML délimite un \textbf{formulaire} ?\medskip
    \begin{itemize}
        \item[A.] \texttt{<send>}
        \item[\alert<2>{B.}] \alert<2>{\texttt{<form>}}
        \item[C.] \texttt{<input>}
        \item[D.] \texttt{<formulaire>}
    \end{itemize}
\end{frame}

% Q4 - Réponse en C
\begin{frame}[fragile]{Question 4 \textemdash{} Champ texte}
    Quelle balise crée un \textbf{champ de saisie} texte ?\medskip
    \begin{itemize}
        \item[A.] \texttt{<textbox>}
        \item[B.] \texttt{<text />}
        \item[\alert<2>{C.}] \alert<2>{\texttt{<input type="text">}}
        \item[D.] \texttt{<entry>}
    \end{itemize}
\end{frame}

% Q5 - Réponse en A
\begin{frame}[fragile]{Question 5 \textemdash{} Bouton}
    Comment créer un \textbf{bouton} « Envoyer » qui
soumet le formulaire ?\medskip
    \begin{itemize}
        \item[\alert<2>{A.}] \alert<2>{\texttt{<button type="submit">Envoyer</button>} (ou \texttt{<input type="submit" value="Envoyer">})}
        \item[B.] \texttt{<a>Envoyer</a>}
        \item[C.] \texttt{<click>Envoyer</click>}
        \item[D.] \texttt{<send>Envoyer</send>}
    \end{itemize}
\end{frame}

% Q6 - Réponse en B
\begin{frame}[fragile]{Question 6 \textemdash{} Liste déroulante}
    Quelle balise crée une \textbf{liste déroulante} ?\medskip
    \begin{itemize}
        \item[A.] \texttt{<list>}
        \item[\alert<2>{B.}] \alert<2>{\texttt{<select>} contenant des \texttt{<option>}}
        \item[C.] \texttt{<dropdown>}
        \item[D.] \texttt{<combo>}
    \end{itemize}
\end{frame}

% Q7 - Réponse en A
\begin{frame}[fragile]{Question 7 \textemdash{} Étiquette}
    À quoi sert la balise \texttt{<label>} ?\medskip
    \begin{itemize}
        \item[\alert<2>{A.}] \alert<2>{À associer une étiquette explicative à un champ de formulaire (clic sur l'étiquette = focus sur le champ)}
        \item[B.] À mettre du texte en gras
        \item[C.] À créer un titre
        \item[D.] À étiqueter une variable JavaScript
    \end{itemize}
\end{frame}

% Q8 - Réponse en B
\begin{frame}[fragile]{Question 8 \textemdash{} Soumission}
    Quel événement se déclenche quand un
\textbf{formulaire est soumis} ?\medskip
    \begin{itemize}
        \item[A.] \texttt{send}
        \item[\alert<2>{B.}] \alert<2>{\texttt{submit}}
        \item[C.] \texttt{change}
        \item[D.] \texttt{click}
    \end{itemize}
\end{frame}

% Q9 - Réponse en B
\begin{frame}[fragile]{Question 9 \textemdash{} GET ou POST ?}
    Quelle méthode HTTP utilise-t-on pour
\textbf{envoyer un mot de passe} ?\medskip
    \begin{itemize}
        \item[A.] Aucune des deux
        \item[\alert<2>{B.}] \alert<2>{POST, parce que les données sont dans le corps de la requête, pas dans l'URL}
        \item[C.] GET, parce que c'est plus rapide
        \item[D.] PUT, c'est obligatoire
    \end{itemize}
\end{frame}

% Q10 - Réponse en D
\begin{frame}[fragile,allowframebreaks]{Question 10 \textemdash{} Formulaire complet}
    Lequel de ces fragments est un \textbf{formulaire
valide} demandant un nom et l'envoyant en
POST ?\medskip
    \begin{itemize}
        \item[A.]~\\
\begin{lstlisting}
<input type="text">
\end{lstlisting}

        \item[B.]~\\
\begin{lstlisting}
<form>Nom: <input></form>
\end{lstlisting}

        \item[C.]~\\
\begin{lstlisting}
<send name="nom" />
\end{lstlisting}

        \item[D.]~\\
\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{itemize}
\end{frame}

% Q10 - Réponse en D
\begin{frame}[fragile,allowframebreaks]{Question 10 \textemdash{} Formulaire complet}
    Lequel de ces fragments est un \textbf{formulaire
valide} demandant un nom et l'envoyant en
POST ?\medskip
    \begin{itemize}
        \item[A.]~\\
\begin{lstlisting}
<input type="text">
\end{lstlisting}

        \item[B.]~\\
\begin{lstlisting}
<form>Nom: <input></form>
\end{lstlisting}

        \item[C.]~\\
\begin{lstlisting}
<send name="nom" />
\end{lstlisting}

        \item[\alert{D.}]~\\
\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{itemize}
\end{frame}

% Q11 - Réponse en C
\begin{frame}[fragile]{Question 11 \textemdash{} Gestionnaire d'événement}
    Quel code attache la fonction \texttt{handleClick} au
clic sur le bouton \texttt{btn} ?\medskip
    \begin{itemize}
        \item[A.] \texttt{btn.onclick(handleClick)}
        \item[B.] \texttt{btn.click(handleClick)}
        \item[\alert<2>{C.}] \alert<2>{\texttt{btn.addEventListener("click", handleClick)}}
        \item[D.] \texttt{btn.handle("click", handleClick)}
    \end{itemize}
\end{frame}

% Q12 - Réponse en D
\begin{frame}[fragile]{Question 12 \textemdash{} Lire la valeur d'un champ}
    Comment récupérer la valeur tapée dans
\texttt{<input id="nom">} ?\medskip
    \begin{itemize}
        \item[A.] \texttt{document.getElementById("nom").text}
        \item[B.] \texttt{document.getElementById("nom").innerHTML}
        \item[C.] \texttt{document.getElementById("nom").content}
        \item[\alert<2>{D.}] \alert<2>{\texttt{document.getElementById("nom").value}}
    \end{itemize}
\end{frame}

% Q13 - Réponse en B
\begin{frame}[fragile]{Question 13 \textemdash{} preventDefault}
    À quoi sert \texttt{event.preventDefault()} dans un
gestionnaire ?\medskip
    \begin{itemize}
        \item[A.] À empêcher tout événement futur
        \item[\alert<2>{B.}] \alert<2>{À empêcher le comportement par défaut du navigateur (par exemple, ne pas soumettre le formulaire pour le traiter en JS)}
        \item[C.] À fermer la page
        \item[D.] À effacer la console
    \end{itemize}
\end{frame}

% Q14 - Réponse en B
\begin{frame}[fragile]{Question 14 \textemdash{} Validation HTML5}
    Comment indiquer qu'un champ est
\textbf{obligatoire} dans le HTML ?\medskip
    \begin{itemize}
        \item[A.] Avec \texttt{mandatory="true"}
        \item[\alert<2>{B.}] \alert<2>{Avec l'attribut \texttt{required} : \texttt{<input required>}}
        \item[C.] Avec \texttt{must-fill}
        \item[D.] Il faut une fonction JavaScript
    \end{itemize}
\end{frame}

% Q15 - Réponse en A
\begin{frame}[fragile]{Question 15 \textemdash{} Type d'input adapté}
    Quel \textbf{type} d'\texttt{<input>} est le plus adapté
pour un champ « Âge » ?\medskip
    \begin{itemize}
        \item[\alert<2>{A.}] \alert<2>{\texttt{type="number"}}
        \item[B.] \texttt{type="text"}
        \item[C.] \texttt{type="email"}
        \item[D.] \texttt{type="age"}
    \end{itemize}
\end{frame}

% Q16 - Réponse en C
\begin{frame}[fragile]{Question 16 \textemdash{} Cible de l'événement}
    Dans un gestionnaire d'événement, comment
accéder à l'\textbf{élément} sur lequel l'événement
a eu lieu ?\medskip
    \begin{itemize}
        \item[A.] \texttt{event.dom}
        \item[B.] \texttt{this.element}
        \item[\alert<2>{C.}] \alert<2>{\texttt{event.target}}
        \item[D.] \texttt{event.element}
    \end{itemize}
\end{frame}

% Q17 - Réponse en C
\begin{frame}[fragile]{Question 17 \textemdash{} Attribut name}
    Pourquoi l'attribut \texttt{name} est-il important
pour un \texttt{<input>} ?\medskip
    \begin{itemize}
        \item[A.] Pour le validateur HTML
        \item[B.] Pour le nom affiché
        \item[\alert<2>{C.}] \alert<2>{Parce qu'il identifie la donnée lors de l'envoi du formulaire (clé dans la requête HTTP)}
        \item[D.] Pour la couleur du champ
    \end{itemize}
\end{frame}

% Q18 - Réponse en B
\begin{frame}[fragile]{Question 18 \textemdash{} Zone de texte}
    Quelle balise crée une \textbf{zone de texte
multiligne} ?\medskip
    \begin{itemize}
        \item[A.] \texttt{<paragraph contenteditable>}
        \item[\alert<2>{B.}] \alert<2>{\texttt{<textarea>contenu initial</textarea>}}
        \item[C.] \texttt{<text>multiligne</text>}
        \item[D.] \texttt{<input type="text" multiline>}
    \end{itemize}
\end{frame}

% Q19 - Réponse en A
\begin{frame}[fragile]{Question 19 \textemdash{} Événement input vs change}
    Quelle est la différence entre les événements
\texttt{input} et \texttt{change} sur un \texttt{<input type="text">} ?\medskip
    \begin{itemize}
        \item[\alert<2>{A.}] \alert<2>{\texttt{input} se déclenche à chaque modification (chaque touche), \texttt{change} seulement quand le champ perd le focus avec une nouvelle valeur}
        \item[B.] \texttt{change} plante toujours
        \item[C.] Aucune
        \item[D.] \texttt{input} n'existe pas
    \end{itemize}
\end{frame}

% Q20 - Réponse en C
\begin{frame}[fragile]{Question 20 \textemdash{} Requête HTTP}
    Quand on soumet un formulaire en POST vers
\texttt{/save}, que se passe-t-il \textbf{côté
navigateur} ?\medskip
    \begin{itemize}
        \item[A.] Le navigateur ouvre un autre site
        \item[B.] Le formulaire reste affiché
        \item[\alert<2>{C.}] \alert<2>{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}
        \item[D.] Rien
    \end{itemize}
\end{frame}

% Q21 - Réponse en B
\begin{frame}[fragile]{Question 21 \textemdash{} Validation client vs serveur}
    Faut-il valider les données d'un formulaire
\textbf{côté client} (JavaScript), \textbf{côté serveur}
ou les deux ?\medskip
    \begin{itemize}
        \item[A.] Aucune des deux : faire confiance
        \item[\alert<2>{B.}] \alert<2>{Les deux : côté client pour l'ergonomie (retour immédiat), côté serveur pour la sécurité (autorité)}
        \item[C.] Côté serveur uniquement
        \item[D.] Côté client uniquement (plus rapide)
    \end{itemize}
\end{frame}

% Q22 - Réponse en B
\begin{frame}[fragile]{Question 22 \textemdash{} Délégation d'événements}
    On a une liste de 100 boutons. Quelle est la
\textbf{meilleure} façon d'écouter leurs clics ?\medskip
    \begin{itemize}
        \item[A.] Utiliser une variable globale
        \item[\alert<2>{B.}] \alert<2>{Attacher un seul écouteur sur le parent et utiliser \texttt{event.target} pour identifier le bouton cliqué (« délégation d'événements »)}
        \item[C.] Modifier le HTML pour ajouter \texttt{onclick} à chaque bouton
        \item[D.] Mettre \texttt{addEventListener} sur chacun des 100 boutons
    \end{itemize}
\end{frame}

% Q23 - Réponse en A
\begin{frame}[fragile]{Question 23 \textemdash{} Bug formulaire}
    Mon formulaire en POST envoie au serveur, mais
le champ « nom » est \textbf{vide} côté serveur.
Quelle est la cause la plus probable ?\medskip
    \begin{itemize}
        \item[\alert<2>{A.}] \alert<2>{L'attribut \texttt{name} manque sur l'\texttt{<input>} (donc le champ n'est pas inclus dans la requête)}
        \item[B.] Le bouton submit est cassé
        \item[C.] Le serveur est en panne
        \item[D.] Le navigateur n'autorise pas POST
    \end{itemize}
\end{frame}

% Q24 - Réponse en B
\begin{frame}[fragile]{Question 24 \textemdash{} Sécurité d'un formulaire}
    Quelle est l'attaque classique consistant à
faire \textbf{soumettre} un formulaire à un
utilisateur \textbf{à son insu} sur un autre site ?\medskip
    \begin{itemize}
        \item[A.] SQL injection
        \item[\alert<2>{B.}] \alert<2>{CSRF (Cross-Site Request Forgery)}
        \item[C.] Spam
        \item[D.] XSS (Cross-Site Scripting)
    \end{itemize}
\end{frame}

% Q25 - Réponse en A
\begin{frame}[fragile]{Question 25 \textemdash{} Synthèse}
    Parmi les affirmations suivantes, laquelle
est \textbf{fausse} ?\medskip
    \begin{itemize}
        \item[\alert<2>{A.}] \alert<2>{La méthode HTTP GET est préférable pour transmettre un mot de passe}
        \item[B.] Toute donnée client doit être revalidée côté serveur
        \item[C.] Un événement DOM peut être écouté avec \texttt{addEventListener}
        \item[D.] L'attribut \texttt{name} d'un champ est essentiel pour la soumission au serveur
    \end{itemize}
\end{frame}

% Q26 - Réponse en B
\begin{frame}[fragile]{Question 26 \textemdash{} Type d'input pour une adresse e-mail}
    Quel attribut \texttt{type} choisir pour un champ destiné à
la saisie d'une adresse électronique ?\medskip
    \begin{itemize}
        \item[A.] \texttt{type="contact"}
        \item[\alert<2>{B.}] \alert<2>{\texttt{type="email"}}
        \item[C.] \texttt{type="text"}
        \item[D.] \texttt{type="address"}
    \end{itemize}
\end{frame}

% Q27 - Réponse en C
\begin{frame}[fragile]{Question 27 \textemdash{} Validation côté navigateur}
    Quel attribut HTML$5$ rend un champ de formulaire
\textbf{obligatoire}, en empêchant la soumission tant
qu'il est vide ?\medskip
    \begin{itemize}
        \item[A.] \texttt{obligatoire}
        \item[B.] \texttt{empty=false}
        \item[\alert<2>{C.}] \alert<2>{\texttt{required}}
        \item[D.] \texttt{mandatory}
    \end{itemize}
\end{frame}

\begin{frame}[standout]{}
    Fin de l'évaluation
\end{frame}

\end{document}
