REPUBLIQUE TUNISIENNE SECTION : INFORMATIQUE
EPREUVE : STI
MINISTERE DE L’EDUCATION
LYCEE NOUVELLE MEDINA
DUREE : 3 H.
❖❖❖ COEFFICIENT : 3
DATE : MARDI 13 mai 2025
EXAMEN DU BAC BLANC
Nom & Prénom :…………………………………………………….…………..4ième :……….………. N° :……..
Le sujet comporte 11 pages numérotées de 1/13 à 13/13.
Le candidat est appelé à répondre sur cette même feuille d’examen qui sera remise à la fin de l’épreuve.
Exercice N°1 : (2 Points)
Pour chacune des questions ci-dessous, mettre une croix (x) dans la case correspondante à la réponse correcte.
Important : Pour chaque question, toute réponse comportant plus d’une croix est considérée erronée.
1. Si un champ <input type="text"> n’est pas entouré d’un <label>, quelle conséquence cela peut-il
avoir ?
L'accessibilité est réduite pour les lecteurs d’écran
Le champ ne s'affichera pas dans le navigateur
Il est impossible de styliser le champ
Le champ ne pourra pas être soumis dans le formulaire
2. Si tu définis « heigth : 100% » sur un élément, de quoi dépend cette hauteur ?
De la hauteur du viewport (la zone visible d’une page web dans le navigateur)
De la hauteur de son contenu
De la hauteur de son parent
De la hauteur de l'élément racine seulement
3. Un élève veut centrer un formulaire en CSS à la fois horizontalement et verticalement. Quelle
combinaison est correcte ?
margin: auto; et text-align: center;
padding : auto ; et position : 50%, 50% ;
position: fixed; et transform: translate(-50%, -50%)
display: block; text-align: center;
4. Pourquoi est-il plus pertinent d’utiliser une balise <section> plutôt qu’un <div> pour structurer une
page HTML 5 ?
Pour améliorer le référencement sémantique
Parce qu’elle est automatiquement stylisée par le navigateur
Pour permettre un meilleur style
Parce qu’elle est compatible avec JavaScript uniquement
Page 1/13
5. En CSS, pourquoi la séparation entre structure HTML et style est-elle essentielle dans une approche
professionnelle ?
Pour que le code soit plus rapide à exécuter
Pour maintenir une bonne modularité et réutilisabilité du code
Pour garantir un chargement plus lent des pages
Pour améliorer l’affichage des pages web
6. Lorsqu'on clique sur le bouton de soumission d'un formulaire, celui-ci ne semble pas réagir (la page
de l'action ne se charge pas). Quelle pourrait être l'origine de ce problème ?
Le formulaire utilise la méthode POST au lieu de GET
Le bouton n’a pas le type submit
Le champ texte est vide
Le bouton ne possède pas de lien
7. Une image insérée dans une page HTML ne s'affiche pas. Quelle pourrait en être la cause ?
Le chemin vers le fichier image est incorrect
L'attribut alt est manquant
La balise <img> est placée à l’intérieur d’un élément <div>
Le fichier CSS n’est pas bien lié à la page HTML
8. Une règle CSS semble ne pas s’appliquer à un élément HTML. Quelle est la cause la plus probable ?
Le sélecteur utilisé ne correspond pas à l’élément ciblé
La propriété CSS est écrite en majuscules
La règle est placée après la fermeture de la balise <html>
Le fichier CSS est enregistré dans un dossier autre que celui du fichier HTML
Exercice N°2 : (4 Points)
Soit la page web suivante permettant d'ajouter des livres avec leur titre, auteur et nombre de pages, puis de les
afficher dynamiquement. Elle offre également des fonctions de recherche par titre et de calcul de la moyenne des
pages.
Aperçu de la page
Page 2/13
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Gestion de Bibliothèque</title>
<script src='[Link]'></script>
</head>
<body>
<h1>Ajouter un Livre</h1>
<input type="text" id="titre" placeholder="Titre">
<input type="text" id="auteur" placeholder="Auteur">
<input type="text" id="pages" placeholder="Pages">
<input type="button" value="Ajouter" onclick="ajouterLivre()">
<div id="erreur" style="color: red;"></div>
<h2>Liste des Livres</h2>
<div id="listeLivres"></div>
<h2>Recherche</h2>
<input type="text" id="recherche" placeholder="Rechercher par titre">
<input type="button" value="Rechercher" onclick="recherche()">
<div id="resultatRecherche"></div>
<h2>Statistiques</h2>
<input type="button" value="Afficher" onclick=" calculerMoyenne() ">
<p>Moyenne des pages : <span id="moyPage">0</span></p>
</body>
</html>
Question 1 :
1. Le champ « pages » doit être un entier positif. (0.25 pt)
Quelle instruction permet de vérifier qu’une valeur représente un nombre entier ? (mettre une croix)
a. isNaN(valeur)
b. parseInt(valeur) == parseFloat(valeur)
c. valeur > 0
2. Pour vérifier que le titre n’est pas vide, on a ce code :
Titre =[Link]("titre").value ;
if ( Titre =="") { test= False ; }
Cependant, cette vérification ne prend pas en compte les cas où le champ ne contient que des espaces.
Comment modifier ce code pour qu’il considère également le champ remplis uniquement avec des
espaces comme vides ? (0.25 pt)
Titre = [Link]("titre").[Link]()
Page 3/13
Question 2 :
Les livres sont stockés dans un tableau « bibliotheque » au format "titre:auteur:pages".
1. Que fait [Link] dans cette instruction ? (0.25 pt)
bibliotheque[[Link]] = a+":"+b+ ":"+c
elle permet d’indexer le dernier élément du tableau
2. Le caractère « : » peut poser des problèmes dans les champs « titre » ou « auteur ». Compléter le code
suivant, pour remplacer toutes les occurrences du caractère « : » par le caractère « ; » dans le champ titre :
while ( [Link](":") != -1 ) {
Titre = Titre. replace (" :"," ;") }
Question 3 :
À partir du code suivant :
function afficherLivre() {
for (let i = 0; i < [Link]; i++) {
let livre = bibliotheque[i] ;
let x = [Link](0, [Link](":")) ;
let y = [Link]([Link](" :")) ;
[Link]("listeLivres").innerHTML += "<p>" + x + y + "</p>";
}
}
Et du tableau :
bibliotheque = [ "Le Petit Prince:Antoine de SaEntier-Exupéry:96", "1984:George Orwell:328",
"L'Étranger:Albert Camus:123", "Le Hobbit : J. R. R. Tolkien :509" ];
Quelle sera l’apparence du contenu de l’élément HTML ayant l’id listeLivres après l’exécution de la
fonction afficherLivre() ?
Le Petit Prince:96
1984:328
L’Etranger:123
Le Hobbit:509
Question 4 :
1. Pourquoi « indexOf("hobbit") » ne trouvera pas "Hobbit" ?
Parce qu’il y’a une différence entre « h » et « H »
2. Quelle(s) méthode(s) qui peut (peuvent) être utilisée(s) pour comparer les chaînes "Hobbit" et "hobbit" sans
prendre en compte la casse ?
a. toUpperCase()
b. toLowerCase()
c. trim()
Page 4/13
REPUBLIQUE TUNISIENNE SECTION : INFORMATIQUE
EPREUVE : STI
MINISTERE DE L’EDUCATION
LYCEE NOUVELLE MEDINA
DUREE : 3 H.
❖❖❖ COEFFICIENT : 3
DATE : MARDI 13 mai 2025
EXAMEN DU BAC BLANC
Nom & Prénom :…………………………………………………….…………..4ième :……….………. N° :……..
Le sujet comporte 11 pages numérotées de 1/13 à 13/13.
Le candidat est appelé à répondre sur cette même feuille d’examen qui sera remise à la fin de l’épreuve.
Question 5 :
function calculerMoyenne(){
let s=0
for (let i=0;i<[Link];i++) {
s=s+Number(bibliotheque[i].substring(bibliotheque[i].lastIndexOf(":")+1)) }
[Link]("moyPage").innerHTML= s / [Link]
}
La fonction calculerMoyenne() retourne NaN si aucun livre n’est ajouté.
1. Quelle instruction cause cette erreur ?
C’est l’opérateur « / » qui cause l’erreur (division par 0)
2. Proposez une condition pour afficher "Aucun livre" au lieu de NaN :
if(s !=0) ou if(bibliothè[Link]!=0) {alert("aucun livre") ;return false}
Exercice N°3 : (4 Points)
Dans un quartier, des voisins ont créé un club de cuisine. Chaque voisin peut proposer une recette, s’inscrire
à des événements culinaires (comme des ateliers de cuisine ou des repas collectifs), et noter les recettes qu'il a
essayées. Ci-dessous une représentation textuelle des tables de la base de données, qui présente certaines
anomalies :
voisin(idVoisin, nom, adresse, telephone, email, idRecette#)
recette(idRecette, titre, description)
evenement(idEvenement, titre, dateEv, lieu)
inscription(idInscription, idEvenement#, idVoisin#)
avis(idRecette#, idVoisin#, note, commentaire)
Page 5/13
Règles de gestion imposées :
R1. Un voisin peut proposer plusieurs recettes, mais chaque recette appartient à un seul voisin.
R2. Un voisin peut participer à plusieurs événements en s’inscrivant, et un événement peut avoir plusieurs
participants.
R3. Un événement est organisé par un seul voisin (l’organisateur).
R4. Un voisin ne peut pas s’inscrire à un événement si celui-ci a atteint sa capacité maximale
R5. Un voisin ne peut déposer qu’un seul avis par recette.
R6. Les recettes doivent être notées sur une échelle de 1 à 5, et les avis doivent être associés à un
commentaire.
QUESTIONS :
1. En analysant la relation entre la table "voisin" et la table "recette", il apparaît que la règle de gestion
R1 n'est pas respectée. Réécrire la représentation textuelle des deux tables pour respecter cette règle ?
voisin(idVoisin, nom, adresse, telephone, email)
recette(idRecette, titre, description, idVoisin#)
2. Quelle est la nature des relations entre la table voisin et la table evenement ? S'agit-il d'une relation
un-à-plusieurs, plusieurs-à-plusieurs ? Justifiez votre réponse pour chaque relation.
➢ Lien de type plusieurs à plusieurs
3. Pourquoi la table inscription est nécessaire ?
C’est une table intermédiaire pour assurer le lien plusieurs à +eurs entre voisin et evenement
……………………………………………….……………………………………………………………………
4. Étant donné la structure actuelle de la table "evenement", il est impossible de garantir que la règle R4
soit respectée. Proposez une nouvelle structure pour la table "evenement" afin de permettre de contrôler cette
règle.
evenement(idEvenement, titre, dateEv, lieu, capacitéMax)
5. Proposez une nouvelle structure pour la table "avis" afin de respecter la règle R5 :
avis(idRecette#, idVoisin#, note, commentaire)
6. Que se passe-t-il si un voisin veut supprimer une recette qu’il a proposée après qu’elle a eu été notée
par d'autres :
1er cas : si la création de la clé étrangère dans la table avis est effectué sans « on delete cascade », le
SGBD refuse de supprimer et génère une erreur
2ème cas : si la création de la clé étrangère dans la table avis est effectué avec « on delete cascade », la
suppression d’une recette entraine la suppression de tous les avis associés à elle.
Page 6/13
Exercice N°4 : (4 Points)
On se propose de créer une page web qui permet à un utilisateur d’entrer plusieurs notes dans un tableau,
puis de calculer automatiquement la moyenne de ces notes.
[Link]
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Calcul de moyenne</title>
<link rel="stylesheet" href="[Link]">
<script src="[Link]"></script>
</head>
<body>
<h2>Entrez vos notes</h2>
<table>
<thead> <tr> <th>Matière</th> <th>Note</th> <th>Coefficient</th> </tr> </thead>
<tbody>
<tr>
<td>Programmation</td> <td><input type="number" name="note" step="0.05"></td>
<td><input type="number" name="coef" ></td>
</tr>
<tr>
<td>STI</td> <td><input type="number" name="note" step="0. 05"></td>
<td><input type="number" name="coef" ></td>
</tr>
<tr>
<td>Maths</td> <td><input type="number" name="note" step="0. 05"></td>
<td><input type="number" name="coef" ></td>
</tr>
<tr>
<td>Physique</td> <td><input type="number" name="note" step="0. 05"></td>
<td><input type="number" name="coef" ></td>
</tr>
<tr>
<td>Français</td> <td><input type="number" name="note" step="0. 05"></td>
<td><input type="number" name="coef" ></td>
</tr>
</tbody>
</table>
<br>
<input type=button onclick="calculerMoyenne()" value=" Calculer la moyenne ">
<p id="resultat"></p>
</body>
</html>
Extrait du fichier [Link] :
table {
border-collapse: collapse;
width: 50%;
}
Page 7/13
Aperçu :
1. Expliquer le rôle de cette propriété en css : border-collapse : collapse ; :
Elle fusionne les bordures des cellules adjacentes
2. Ajouter les attributs nécessaires à l’élément <input type="number" name="note" step="0.05"> afin
de limiter la saisie de l’utilisateur à des valeurs comprises entre 0 et 20:
<input type="number" name="note" step="0.05" min=0 max=20>
3. Quel attribut doit-on ajouter à l’élément <input type="number" name="coef"> pour définir une valeur
par défaut ?
On ajoute l’attribut “value”
4. Quelle instruction JavaScript permet de stocker dans la variable x la valeur saisie dans le champ de note
pour la matière "STI" ?
Note=[Link]("note")
x=Note[1].value
5. Quelle instruction JavaScript permet de convertir la variable x en un nombre réel ?
X=parseFloat(x)
6. Soit la fonction verif suivante :
function verif(x){
n=Number([Link]("note")[x].value)
if (n<0 || n>20)
[Link]("note")[x].[Link] ="red"
else
[Link]("note")[x].[Link] ="black"
}
Donner le rôle de cette fonction ?
Mettre en rouge la valeur de la note d’indice x si elle n’est pas entre 0 et 20
7. Compléter le code pour appeler la fonction verif(x) à chaque relâchement de touche dans le premier champ
de saisie ayant name="note" ?
(le paramètre x désigne l'indice du champ dans la liste des éléments name="note")
<input type="number" name="note" step="0. 05" onkeyup = verif(0) >
Page 8/13
REPUBLIQUE TUNISIENNE SECTION : INFORMATIQUE
EPREUVE : STI
MINISTERE DE L’EDUCATION
LYCEE NOUVELLE MEDINA
DUREE : 3 H.
❖❖❖ COEFFICIENT : 3
DATE : MARDI 13 mai 2025
EXAMEN DU BAC BLANC
Nom & Prénom :…………………………………………………….…………..4ième :……….………. N° :……..
Le sujet comporte 11 pages numérotées de 1/13 à 13/13.
Le candidat est appelé à répondre sur cette même feuille d’examen qui sera remise à la fin de l’épreuve.
Exercice N°5 : (4 Points)
Soit un site web qui contient un formulaire d’inscription. Lorsqu’un utilisateur s’inscrit, ses données (nom,
email, mot de passe) sont enregistrées dans une base de données nommée utilisateurs contenant une table comptes :
comptes (id , nom ,email , mot_de_passe )
Soit le script suivant :
<?php
$conn = mysqli_connect("localhost", "root", "", "BD_Users");
$resultat = mysqli_query($conn, "SELECT nom, email FROM comptes");
while ($row = mysqli_fetch_array($resultat)) {
echo "Nom : " . $row["nom"] . "<br>";
echo "Email : " . $row["email"] . "<br><br>";
}
?>
1- Le script PHP s’exécute-t-il côté client ou côté serveur ?
Coté serveur
2- La connexion a échoué. Quelle est la cause ?
Le nom de la base de données est incorrect
3- Que retourne mysqli_query(), dans ce script ?
Elle retournes une ressources qui contient les information de la table compte
4- Réécrire le script en ajoutant le code qui permet d’afficher "Aucun utilisateur trouvé" si la table est vide :
$resultat = mysqli_query($conn, "SELECT nom, email FROM comptes");
If !$resultat:
Die(‘Aucun utilisateur trouvé’);
Page 9/13
5 – Réécrire le script pour n’afficher que les utilisateurs dont le domaine de l’email est « @[Link] » :
while ($row = mysqli_fetch_array($resultat)) {
if(substr($row[1],strlen($t[1])-11)==”@[Link]”){
echo "Nom : " . $row["nom"] . "<br>";
echo "Email : " . $row["email"] . "<br><br>";
}
}
6- Réécrire la boucle while en remplaçant mysqli_fetch_array() par mysqli_fetch_row() ?
while ($row = mysqli_fetch_row($resultat)) {
echo "Nom : " . $row[0] . "<br>";
echo "Email : " . $row[1] . "<br><br>";
}
7- Quelle fonction faut-il appeler pour fermer proprement la connexion à la base de données à la fin du script?
Mysqli_close()
Exercice N°6 : (4 Points)
Base de données – Centre de sport et bien-être
(voir page 13)
a. Répondez aux questions suivantes en cochant la case appropriée, en fonction de la signification intuitive des
relations de la base de données :
N° Question reformulée Oui Non
1 Un client peut-il s’inscrire à plusieurs cours différents ? ✓
2 Un cours peut-il être encadré par plusieurs coachs ? ✓
3 Un client peut-il s’inscrire deux fois au même cours ? ✓
4 Un coach peut-il être évalué par plusieurs clients ? ✓
5 Un coach peut-il donner des cours dans plusieurs centres différents ? ✓
6 Un client peut-il être accompagné par plusieurs coachs ? ✓
7 Un coach peut avoir plusieurs spécialités ? ✓
8 Un client peut-il évaluer plusieurs fois le même coach ? ✓
9 Un coach peut-il enseigner plusieurs cours ? ✓
10 Peut-on évaluer un coach sans laisser de commentaire ? ✓
Page 10/13
A. Donner les requêtes SQL permettant de :
1. Étant donné qu’une inscription peut être liée à plusieurs paiements, créer la table Paiement permettant
d’enregistrer l’identifiant du paiement, les données de l’inscription correspondante, le montant payé, la date du
paiement et le mode de règlement ("espèce", "chèque") .
Create table Paiement (
Id_pay int auto_increment constraint c1 primary key,
idCours int not null,
idClient int not null,
dateInscription date not null,
mont_pay decimal(8,3) not null,
datePay date not null,
reglement varchar(6) not null constraint c2 check(reglement in ("espèce", "chèque"),
constraint c3 foreign key (idCours, idClient, dateInscription) references Inscription (idCours, idClient,
dateInscription) on delete cascade) ;
2. Ajoutez une colonne email (VARCHAR(100)) à la table Client :
Alter table Client
Add column email varchar(100) constraint q2 check(email like “%[Link]”);;
3. Modifiez la colonne « capacite » de la table Centre pour limiter à 3 chiffres :
Alter table Centre
Modify capacité int(3) not null ;
4. Ajoutez une contrainte dans la table Cours empêchant qu’un coach anime plusieurs fois un cours avec le même
nom :
Alter table Cour
Modify nomCours varchar(100) not null unique;
5. Supprimez la contrainte de clé étrangère fk_idCours dans la table Inscription :
Alter table Inscription
Drop constraint fk_idCours ;
B. Manipulation des données :
Ecrire les requêtes SQL permettant d’:
1. Insérer un nouveau client nommé Ines Chatti, âgée de 27 ans, ID = 1101 :
Insert into client
Values(1101, "Ines Chatti",27, "F") ;
2. Augmenter de 20% la capacité des centres situés à Tunis :
Update centre set
capacite = capacite + capacite*20/100 ;
Page 11/13
3. Afficher les noms des coachs et leur spécialité, affectés à un centre ayant une capacité supérieure à 100 :
Select nom, specialite
From coach C, centre T
Where [Link] = [Link]
And capacite > 100;
4. Afficher le nom des clients, le nom des cours auxquels ils sont inscrits, ainsi que le nom du coach, pour toutes
les inscriptions dont la date correspond au mois courant :
Select [Link], nomCours, [Link]
From client cl, inscription I, cours cs, coach c
Where [Link] = [Link]
And [Link] = [Link]
And [Link] = [Link]
And month(dateInscription) = month(now())
And year(dateinscription) = year(now())”;
5. Écrire une requête SQL permettant d’afficher le nom des clients, la date de leur inscription, ainsi que le
nombre de jours écoulés depuis cette inscription. Seuls les clients inscrits depuis plus de 30 jours doivent être
affichés :
Select nom, dateInscription, datediff(date(now()),dateInscription)
From client cl, inscription i
Where [Link] = [Link]
And datediff(date(now()),dateInscription)>30;
6. Afficher les identifiants des clients qui ne se sont jamais inscrits à un cours de niveau "avancé" :
Select idClient
From client
Where idClient not in (select idClient
from client cl, inscription I, cours cs
where [Link] = [Link] and [Link] = [Link]
and niveau = “avancé”);
7. Afficher les coachs qui ont animé plus de 3 cours. Pour chacun, afficher leur nom et le nombre de cours
animés.
Select nom , count(*) as "Cours animés"
From coach c, cours cs
Where [Link] = [Link]
Group by nom
Having count(*) > 3;
Page 12/13
REPUBLIQUE TUNISIENNE SECTION : INFORMATIQUE
EPREUVE : STI
MINISTERE DE L’EDUCATION
LYCEE NOUVELLE MEDINA
DUREE : 3 H.
❖❖❖ COEFFICIENT : 3
DATE : MARDI 13 mai 2025
EXAMEN DU BAC BLANC
Base de données – Centre de sport et bien-être
Cette base de données gère un centre de sport, en suivant les centres, les coachs, les cours proposés, les clients
et leurs inscriptions. Elle permet aussi aux clients d’évaluer les coachs à travers des notes et commentaires.
ableau descriptif des colonnes
Colonne Type Contraintes
idCentre INT Obligatoire
nomCentre VARCHAR(100) Obligatoire
ville VARCHAR(50) Obligatoire
capacite INT Obligatoire, > 0
idCoach INT Obligatoire
nom VARCHAR(100) Obligatoire
specialite VARCHAR(50) Obligatoire
idCours INT Obligatoire
nomCours VARCHAR(100) Obligatoire
type VARCHAR(30) Obligatoire
niveau VARCHAR(30) Obligatoire (ex: débutant, avancé...)
idClient INT Obligatoire
age INT Obligatoire, >= 16
genre CHAR(1) ‘M’ ou ‘F’
dateInscription DATE Obligatoire
note INT Entre 1 et 5
commentaire VARCHAR(200) Obligatoire
Page 13/13
