Aller au contenu

Un mot pour Fahmio

Tu écris. Tu continues.

Un problème, une idée — assez pour qu’on comprenne, puis tu retournes à ta copie.

On lit. Tu n’as rien d’autre à faire.

Où veux-tu aller ?

↑ ↓ pour parcourir · Entrée pour ouvrir · Échap pour fermer

Fahmio
Fahmio
Bac Tunisie
WB-IWeb et TIC

QCM technologies web — HTML, CSS, JavaScript, PHP et SQL mélangés, une seule bonne réponse par question

Idée directrice

De 2022 à 2024, chaque épreuve de la section Sciences de l’informatique s’ouvre sur un QCM de cinq à huit questions qui mélange HTML, CSS, JavaScript, PHP et SQL, avec une seule bonne réponse par question. La notion demandée est souvent simple ; la difficulté vient du mélange : les mauvaises propositions appartiennent à un autre langage (echo en JavaScript, alert en PHP) ou confondent deux notions voisines (déclaration et appel, attribut et valeur, classe et identifiant). On reconnaît d’abord la couche visée, puis on élimine.

Ce qui aide à reconnaître la démarche

« Pour chacune des questions ci-dessous, mettre une croix (X) dans la case correspondante à la réponse correcte » ; « toute réponse comportant plus d’une croix est considérée erronée » ; « En CSS, quel est le rôle de la propriété … » ; « En PHP, quelle est l’instruction à utiliser pour … » ; « En JavaScript, qu’affiche l’instruction suivante ? »

Besoin d’un point de départ ? Voir la méthode
  • Repérer la couche visée par le début de la question (« En HTML », « En CSS », « En JavaScript », « En PHP », « En SQL ») avant de lire les propositions.
  • Éliminer les propositions d’un autre langage : echo ou print en JavaScript, alert en PHP, les superglobales PHP ($_POST, $_GET) dans un script client, // dans un fichier CSS, + pour concaténer en PHP.
  • Distinguer déclaration et appel (function f() / f()), attribut et valeur, sélecteur et propriété, classe (.) et identifiant (#).
  • Calculer au brouillon les expressions ("5" + 3, parseInt, (int), count) au lieu de deviner.
  • Une seule croix par question : deux croix, et la réponse est comptée fausse.
Les pièges à vérifier dans ta démarche

Cocher deux cases « pour être sûr » (la question vaut alors 0) ; prendre + pour une addition quand une chaîne intervient ; confondre onfocus et onblur, legend et caption, padding et margin ; croire qu’une case non cochée envoie une valeur vide ; oublier document. devant getElementById.

Sujet principal

Exercice 1 — QCM de technologies web, dans l’esprit des sessions 2022–2024

8 questionsCorrigé masqué

Pour chacune des questions ci-dessous, mettre une croix (X) dans la case correspondant à la réponse correcte.

Important : pour chaque question, toute réponse comportant plus d’une croix est considérée erronée.

  1. En HTML, quel évènement utiliser pour déclencher une action au moment où l’utilisateur quitte un champ de saisie (le champ perd le focus) ? ☐ onfocus ☐ onblur ☐ onload
  2. En HTML5, quelle balise permet de donner un titre au groupe d’éléments défini par la balise <fieldset> ? ☐ <caption> ☐ <legend> ☐ <figcaption>
  3. Soit le formulaire <form action="recherche.php" method="get"> contenant un seul champ, nommé station, dans lequel on a saisi 4. Après l’envoi, la barre d’adresse du navigateur affiche : ☐ recherche.php ☐ recherche.php?station=4 ☐ recherche.php#station=4
  4. Soit l’élément <div id="carte" class="zone">. Quelle règle CSS s’applique à cet élément par son identifiant ? ☐ .carte { border : 1px solid gray ; } ☐ #carte { border : 1px solid gray ; } ☐ carte { border : 1px solid gray ; }
  5. En CSS, quelle déclaration déplace un élément de 20 pixels vers la droite ? ☐ transform : translate(20px, 0px) ; ☐ transform : rotate(20px) ; ☐ transform : scale(20px) ;
  6. En JavaScript, que contient la variable x après l’exécution de l’instruction let x = "5" + 3 ; ? ☐ 8 ☐ "53" ☐ une erreur est générée
  7. En PHP, quelle expression permet de tester si la case à cocher nommée casque d’un formulaire envoyé par la méthode POST a été cochée ? ☐ isset($_POST["casque"]) ☐ isset($_GET["casque"]) ☐ strlen("casque") > 0
  8. En SQL, quel mot-clé interdit que deux lignes d’une table aient la même valeur dans une colonne qui n’est pas la clé primaire ? ☐ DEFAULT ☐ CHECK ☐ UNIQUE
Voir la correction commentéeAprès avoir posé votre démarche

Idée : repérer d’abord la couche visée (HTML, CSS, JavaScript, PHP, SQL), puis éliminer les propositions qui appartiennent à un autre langage ou qui confondent deux notions voisines.

  • 1. onblur — onblur se déclenche quand le champ perd le focus ; onfocus, quand il le reçoit ; onload, au chargement de la page.
  • 2. <legend> — <legend> est le titre d’un <fieldset> ; <caption> est le titre d’un tableau, <figcaption> la légende d’une <figure>.
  • 3. recherche.php?station=4 — avec GET, les données sont ajoutées à l’adresse après un « ? », sous la forme nom=valeur ; « # » introduit une ancre, pas des données.
  • 4. #carte { border : 1px solid gray ; } — le préfixe # désigne un identifiant ; .carte viserait la classe carte (l’élément a la classe zone) et carte une balise <carte> qui n’existe pas.
  • 5. transform : translate(20px, 0px) ; — translate déplace (ici de 20 px horizontalement, 0 px verticalement) ; rotate tourne (en degrés) et scale agrandit (sans unité) : rotate(20px) et scale(20px) ne sont pas valides.
  • 6. "53" — "5" est une chaîne : + entre une chaîne et un nombre concatène, x vaut la chaîne "53" ; aucune erreur n’est générée.
  • 7. isset($_POST["casque"]) — une case non cochée n’est pas envoyée, la clé $_POST["casque"] n’existe alors pas : isset teste l’existence de la clé. isset($_GET["casque"]) est toujours faux ici, car le formulaire est envoyé par POST (rien n’arrive dans $_GET) ; strlen("casque") mesure le mot « casque » lui-même : 6, que la case soit cochée ou non, donc strlen("casque") > 0 est toujours vrai et ne teste rien.
  • 8. UNIQUE — UNIQUE impose des valeurs distinctes dans une colonne ; DEFAULT donne une valeur par défaut et CHECK une condition sur les valeurs.

Barème de l’épreuve : 0,25 point par question ; une question comportant deux croix ou plus vaut 0.

Changer d’énoncé, garder le raisonnement

Choisis un seul transfert après le sujet principal. Qu’est-ce qui change ? Quel résultat ou quelle méthode peux-tu réutiliser ? Les autres exercices restent disponibles pour une prochaine séance.

Variantes rencontrées : cinq questions à 0,5 point (principale et contrôle 2022) puis huit questions à 0,25 point (principale et contrôle 2023 et 2024) : évènements onload et onfocus ; balises title, fieldset, figcaption, ul/li, link ; GET et POST ; sélecteurs de classe, d’identifiant et groupés ; transform skew et rotate, text-transform ; alert, document.write, trim, isNaN, parseFloat, getFullYear, "1" + "2" ; lecture d’un champ envoyé par GET, require, isset, count, (int), checkdate, num_rows ; INSERT, UNIQUE. Depuis 2025, le QCM isolé a disparu : ses items sont répartis dans les exercices par langage de la partie B (voir WB-E à WB-H et WB-J).

Exercices d'entraînement — une nuance à la fois

1 Drill WB-I.1 — QCM : reconnaître le langage (echo, alert, appel, concaténation, commentaire)
Entraînement 01 / 04

Drill WB-I.1 — QCM : reconnaître le langage (echo, alert, appel, concaténation, commentaire)

7 questionsCorrigé masqué

Chaque question porte sur un seul langage ; ses mauvaises propositions viennent d’un autre. Mettre une croix dans la case correspondant à la réponse correcte.

Important : pour chaque question, toute réponse comportant plus d’une croix est considérée erronée.

  1. En JavaScript, quelle instruction ouvre une boîte de dialogue qui demande à l’utilisateur de saisir son nom ? ☐ echo("Votre nom ?"); ☐ input("Votre nom ?") ☐ prompt("Votre nom ?")
  2. En PHP, quelle instruction écrit le texte « Bonjour » dans la page renvoyée au navigateur ? ☐ echo "Bonjour" ; ☐ alert("Bonjour") ; ☐ document.write("Bonjour") ;
  3. En JavaScript, quelle ligne commence la déclaration (la définition) d’une fonction nommée calculer ? ☐ function calculer() ☐ calculer() ☐ def calculer():
  4. En PHP, quelle expression concatène les chaînes contenues dans $nom et $prenom ? ☐ $nom + $prenom ☐ $nom . $prenom ☐ $nom & $prenom
  5. En JavaScript, quelle expression donne le contenu du champ de saisie d’identifiant nom ? ☐ document.getElementById("nom").innerHTML ☐ getElementById("nom").value ☐ document.getElementById("nom").value
  6. Dans un script PHP, quelle instruction exécute la requête SQL contenue dans $req ? ☐ $res = mysqli_query($con, $req); ☐ $res = SELECT($req); ☐ $res = execute($req);
  7. Quel commentaire est correct dans un fichier CSS ? ☐ // menu principal ☐ /* menu principal */ ☐ <!-- menu principal -->
Voir la correction commentéeAprès avoir posé votre démarche

Idée : la question commence par le nom du langage : toute proposition écrite dans un autre langage est éliminée d’office.

  • 1. prompt("Votre nom ?") — prompt ouvre une boîte de dialogue avec une zone de saisie et retourne le texte saisi ; echo est une instruction PHP et input une fonction Python.
  • 2. echo "Bonjour" ; — echo écrit dans la page produite par le serveur ; alert et document.write sont du JavaScript, exécuté dans le navigateur.
  • 3. function calculer() — une déclaration commence par le mot-clé function ; calculer() seul est un appel de la fonction et def … : appartient à Python.
  • 4. $nom . $prenom — en PHP, le point concatène ; + additionne des nombres et & est un opérateur bit à bit.
  • 5. document.getElementById("nom").value — getElementById est une méthode de l’objet document : il faut écrire document. devant ; innerHTML donne le contenu HTML d’un élément, pas la valeur saisie dans un champ.
  • 6. $res = mysqli_query($con, $req); — mysqli_query($con, $req) envoie la requête au serveur MySQL par la connexion $con ; SELECT est un mot de SQL, pas une fonction PHP, et execute n’existe pas.
  • 7. /* menu principal */ — CSS n’accepte que /* … */ ; // est un commentaire JavaScript ou PHP et <!-- … --> un commentaire HTML.
2 Drill WB-I.2 — QCM CSS : sélecteurs (classe, groupe, descendant, :hover) et propriétés voisines
Entraînement 02 / 04

Drill WB-I.2 — QCM CSS : sélecteurs (classe, groupe, descendant, :hover) et propriétés voisines

6 questionsCorrigé masqué

Les règles CSS des questions suivantes s’appliquent à une page HTML. Mettre une croix dans la case correspondant à la réponse correcte.

Important : pour chaque question, toute réponse comportant plus d’une croix est considérée erronée.

  1. À quels éléments s’applique la règle p.info { color : green ; } ? ☐ au paragraphe <p id="info"> ☐ aux paragraphes <p class="info"> ☐ à tous les éléments de classe info, quelle que soit leur balise
  2. À quels éléments s’applique la règle h1, h2 { color : navy ; } ? ☐ aux éléments h2 contenus dans un élément h1 ☐ à tous les éléments h1 et à tous les éléments h2 ☐ aux seuls éléments à la fois h1 et h2
  3. À quels éléments s’applique la règle nav a { text-decoration : none ; } ? ☐ aux liens contenus dans l’élément nav ☐ à l’élément nav et à tous les liens de la page ☐ aux éléments nav qui contiennent un lien
  4. Quelle déclaration crée une marge intérieure de 10 pixels entre le contenu d’un élément et sa bordure ? ☐ margin : 10px ; ☐ padding : 10px ; ☐ border : 10px ;
  5. Quelle déclaration masque complètement un élément (il n’occupe plus de place dans la page) ? ☐ display : none ; ☐ display : inline ; ☐ display : inline-block ;
  6. Quel est l’effet de la règle a:hover { color : red ; } ? ☐ colorer en rouge les liens déjà visités ☐ colorer en rouge un lien quand le pointeur de la souris le survole ☐ colorer en rouge tous les liens dès le chargement
Voir la correction commentéeAprès avoir posé votre démarche

Idée : dans un sélecteur, chaque signe compte : point = classe, dièse = identifiant, virgule = groupe, espace = descendant, deux-points = état.

  • 1. aux paragraphes <p class="info"> — p.info vise les paragraphes dont l’attribut class vaut info ; un id se viserait par #info, et .info seul viserait toutes les balises de classe info.
  • 2. à tous les éléments h1 et à tous les éléments h2 — la virgule groupe deux sélecteurs : la règle s’applique à chacun.
  • 3. aux liens contenus dans l’élément nav — un espace entre deux sélecteurs désigne un descendant : les liens a situés dans nav.
  • 4. padding : 10px ; — padding est la marge intérieure (entre contenu et bordure) ; margin est la marge extérieure ; border trace la bordure.
  • 5. display : none ; — display : none retire l’élément de l’affichage ; inline et inline-block l’affichent.
  • 6. colorer en rouge un lien quand le pointeur de la souris le survole — :hover s’applique pendant le survol par le pointeur ; les liens visités se visent par :visited.
3 Drill WB-I.3 — QCM JavaScript : conversions et chaînes ("7" * 2, parseInt, Number, isNaN, indexOf)
Entraînement 03 / 04

Drill WB-I.3 — QCM JavaScript : conversions et chaînes ("7" * 2, parseInt, Number, isNaN, indexOf)

6 questionsCorrigé masqué

Mettre une croix dans la case correspondant à la valeur retournée.

Important : pour chaque question, toute réponse comportant plus d’une croix est considérée erronée.

  1. En JavaScript, que retourne l’expression "7" * 2 ? ☐ 14 ☐ "72" ☐ NaN
  2. En JavaScript, que retourne l’expression parseInt("12.9") ? ☐ 12 ☐ 12.9 ☐ 13
  3. En JavaScript, que retourne l’expression Number("12 D") ? ☐ 12 ☐ NaN ☐ "12"
  4. En JavaScript, que retourne l’expression isNaN("2026") ? ☐ true ☐ false ☐ "2026"
  5. En JavaScript, que retourne l’expression "Bab Bhar".indexOf("B", 1) ? ☐ 0 ☐ 4 ☐ -1
  6. En JavaScript, que retourne l’expression 3 + 4 + "5" ? ☐ "345" ☐ "75" ☐ 12
Voir la correction commentéeAprès avoir posé votre démarche

Idée : déterminer le type de chaque opérande : + concatène dès qu’une chaîne intervient, les autres opérateurs convertissent en nombre ; parseInt lit le début de la chaîne, Number exige une chaîne entièrement numérique.

  • 1. 14 — l’opérateur * convertit la chaîne "7" en nombre : 14 (seul + concatène).
  • 2. 12 — parseInt lit la partie entière au début de la chaîne et s’arrête au point : 12 (pas d’arrondi).
  • 3. NaN — Number exige une chaîne entièrement numérique : " D" rend la conversion impossible, d’où NaN (parseInt("12 D") aurait donné 12).
  • 4. false — "2026" se convertit en nombre, donc isNaN retourne false.
  • 5. 4 — la recherche commence à la position 1 : le « B » de la position 0 est ignoré, le suivant est en position 4 (après « Bab » et l’espace).
  • 6. "75" — le calcul se fait de gauche à droite : 3 + 4 = 7 (deux nombres), puis 7 + "5" concatène : "75".
4 Drill WB-I.4 — QCM PHP : (int), count, strlen, require, lecture d’un champ POST, affected_rows, checkdate, et un mot-clé SQL
Entraînement 04 / 04

Drill WB-I.4 — QCM PHP : (int), count, strlen, require, lecture d’un champ POST, affected_rows, checkdate, et un mot-clé SQL

8 questionsCorrigé masqué

Mettre une croix dans la case correspondant à la réponse correcte.

Important : pour chaque question, toute réponse comportant plus d’une croix est considérée erronée.

  1. En PHP, quelle est la valeur de $x après l’instruction $x = (int)"7.8" ; ? ☐ 7 ☐ 8 ☐ 7.8
  2. En PHP, quelle est la valeur de $n après l’instruction $n = count(array(3, 8, 5)) ; ? ☐ 16 ☐ 3 ☐ 5
  3. Dans un script PHP inclus par require("connexion.php") ;, que se passe-t-il si le fichier connexion.php est introuvable ? ☐ une erreur est générée et le script s’arrête ☐ une erreur est générée et le script continue ☐ le script continue sans aucun message
  4. En PHP, après la modification de valeurs par la connexion $con, quelle fonction retourne le nombre de lignes modifiées ? ☐ mysqli_num_rows($res) ☐ mysqli_affected_rows($con) ☐ count($res)
  5. En PHP, que retourne checkdate(2, 29, 2026) ? ☐ true ☐ false ☐ "2026-02-29"
  6. En SQL, quel mot-clé fixe la valeur prise par une colonne lorsque l’ajout d’une ligne ne la précise pas ? ☐ DEFAULT ☐ CHECK ☐ UNIQUE
  7. En PHP, le formulaire étant envoyé avec method="post", quelle instruction récupère la valeur du champ nommé tel ? ☐ $tel = $_POST["tel"] ; ☐ $tel = $_GET["tel"] ; ☐ $tel = $POST["tel"] ;
  8. En PHP, qu’affiche l’instruction echo strlen("Sfax 2026") ; ? ☐ 8 ☐ 9 ☐ 2
Voir la correction commentéeAprès avoir posé votre démarche

Idée : pour une valeur, la calculer au brouillon ; pour une fonction ou un mot-clé, se demander sur quoi il agit (chaîne, tableau, résultat de SELECT, connexion, structure de table).

  • 1. 7 — la conversion (int) garde la partie entière de "7.8" : 7 (elle tronque, elle n’arrondit pas).
  • 2. 3 — count retourne le nombre d’éléments du tableau : 3.
  • 3. une erreur est générée et le script s’arrête — require provoque une erreur fatale si le fichier manque (include produirait seulement un avertissement).
  • 4. mysqli_affected_rows($con) — appliquée à la connexion $con, elle donne le nombre de lignes touchées par INSERT, UPDATE ou DELETE ; mysqli_num_rows ne compte que les lignes d’un SELECT.
  • 5. false — 2026 n’est pas bissextile (2026 n’est pas divisible par 4) : le 29 février 2026 n’existe pas et checkdate retourne false.
  • 6. DEFAULT — DEFAULT fixe la valeur par défaut ; CHECK restreint les valeurs permises, UNIQUE interdit les doublons.
  • 7. $tel = $_POST["tel"] ; — le formulaire est envoyé par POST : ses champs sont dans le tableau superglobal écrit avec un tiret bas et en majuscules ; GET ne contient rien ici.
  • 8. 9 — strlen compte tous les caractères, espace compris : « Sfax » (4) + l’espace (1) + « 2026 » (4) = 9.

Relier ce raisonnement au bac

Choisis une filière pour voir les sujets qui étayent ce scénario.