{% extends 'base.html' %}

{% block title %}QueryCraft Web - @Didapro 11{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/didapro11.css') }}">
{% endblock %}

{% block header_title %}🔍 Atelier QueryCraft @ Didapro 11{% endblock %}

{% block header_subtitle %}Mercredi 11 mars 2026{% endblock %}

{% block header_extra %}
    <div class="version">Version {{ version }}</div>
{% endblock %}

{% block nav_buttons %}
    <div class="nav-buttons">
        <a href="{{ base_path }}/" class="nav-btn">🏠 Accueil</a>
    </div>
{% endblock %}

{% block content %}
    <div class="content">
<div class="section">
    <h2>Introduction</h2>

    <p>Cette interface permet d'interroger une base de données via un SGBD (MySQL, PSQL ou SQLite) choisi par l'enseignant.
Pour cet atelier, nous utiliserons SQLite avec la base de données "cours.db". Le schéma et contenu des tables de la BD sont disponibles via l'application, via le bouton, mais aussi en annexe.</p>

</div>


<div class="section">
<h2>📖 Partie 1 : les requêtes simples</h2>

    <p>L'apprenant peut exécuter n'importe quelle requête SQL (langage de manipulation des données réduit au "Select") sur la base de données sélectionnée par l'enseignant.
Cela permet à l'étudiant de tester la validité de la syntaxe de sa requête et de retourner la table résultat obtenu si la syntaxe est correcte.
    </p>

    <p>Testez le mode simple avec la requête qui retourne le nom et prénom des étudiants inscrits dans le module MIAS2I5.
</p>
<div class="wrapper">
<textarea id="myText1">
select nom, prenom
    from etudiants natural join notes
    where codemat='MIAS2I5';
</textarea>
<button class="copy-btn js-copy-text" aria-label="Copier le texte">📋</button>

    <p>Autre test</p>
<div class="wrapper">
<textarea id="myText2">Select noetu, prenom
    from etudiants join notes Using(noetu)
    where noteex < 8 ;
</textarea>
<button class="copy-btn js-copy-text" aria-label="Copier le texte">📋</button>
</div>

</div>
</div>


<div class="section">
<h2>📖 Partie 2 :  Exercices</h2>
<p>Attendez que l'animateur active la mode exercice. Vous pourrez continuer à utiliser le mode "libre". Pour cela, sélectionnez "Pas d'exercice".</p>

<p>L'apprenant devra sélectionner la question à laquelle il veut répondre via l'encadré Exercice et Question.
Puis via le formulaire libre requête SQL, l'apprenant devra répondre à la requête. En plus de la validation syntaxique de sa requête, QueryCraft précisera si la table résultat obtenue correspond à la table résultat attendue.

ATTENTION, ce ne signifiera pas forcément que la requête est sémantiquement correcte (répond totalement à l'intention posée).

</p>

<p>Sélectionnez l'exercice Didapro11 et la question n°1 :
    "Nom et prénom des étudiants ayant des notes dans le module MIAS2I5"</p>

<p>L'intention précise s'affiche et éventuellement la table résultat attendue.
    Exécutez les requêtes suivantes pour visualiser les différences </p>

<p>R1 (requête correcte) </p>
<div class="wrapper">
<textarea id="myText3">
select nom, prenom
    from etudiants Natural Join notes
    where codemat='MIAS2I5';
</textarea>
<button class="copy-btn js-copy-text" aria-label="Copier le texte">📋</button>
</div>


<p>R2 (requête syntaxiquement correcte, mais qui ne répond pas à l'intention) </p>
<div class="wrapper">
<textarea id="myText4">
select noetu
    from etudiants Natural Join notes
    where codemat='MIAS2I5';
</textarea>
<button class="copy-btn js-copy-text" aria-label="Copier le texte">📋</button>
</div>


<p>R3 (requête syntaxiquement incorrecte) </p>
<div class="wrapper">
<textarea id="myText5">
select nom, prenom
    from notes
    where codemat='MIAS2I5';
</textarea>
<button class="copy-btn js-copy-text" aria-label="Copier le texte">📋</button>
</div>

</div>

<div class="section">
    <h2>📖 Partie 3 : pas à pas</h2>

<p>
    Pour comprendre les opérateurs utilisés dans sa requête, Quel que soit le mode de manipulation (libre ou dirigée) choisi, l'apprenant pourra utiliser le mode pas à pas proposé. L'exécution des opérateurs se fait de manière itérative : jointure / sélection / regroupement / condition de regroupement / projection / tri.
</p>


<h3>Sélectionnez la question n°2 dans l'interface Exercice et Question.</h3>

<p>Etudiants (nom et prénom) qui ont eu une note d'examen supérieure à 10.
Ecrivez la requête suivante dans l'interface Requête SQL et cochez la case Mode pas à pas.
Requête correcte avec une jointure, une sélection et une projection</p>

<div class="wrapper">
<textarea id="myText6">
select nom, prenom
    from notes Natural Join etudiants
    where noteex > 10;
</textarea>
<button class="copy-btn js-copy-text" aria-label="Copier le texte">📋</button>
</div>

<p>Visualisez les différentes étapes de la requête :<ul>
    <li> Etape 1 : visualisation de la table notes</li>
    <li>  Etape 2 : visualisation de la table étudiants</li>
    <li>  Etape 3 : visualisation de la jointure entre les 2 tables</li>
    <li>  Etape 4 : Sélection des t-uples : codemat = 'MIAS2I5'</li>
    <li>  Etape 5 : Projection sur les attributs nom et prénom</li>
</ul>
</p>


<h3>Sélectionnez la question n°3 dans l'interface Exercice et Question.</h3>
<p>Etudiants (nom, prénom) qui ont eu une moyenne générale supérieur à 10.
Ecrivez la requête suivante dans l'interface Requête SQL et cochez la case Mode pas à pas si pas conservée.
    Requête correcte avec un group by et une sélection sur les groupes.</p>

<div class="wrapper">
<textarea id="myText7">
select nom,prenom, AVG((noteex+notecc)/2)
    from etudiants Natural Join notes
    group by noetu,nom,prenom
    having AVG((noteex+notecc)/2)>10;
</textarea>
<button class="copy-btn js-copy-text" aria-label="Copier le texte">📋</button>
</div>

<p>Visualisez les différentes étapes de la requête comportant un regroupement et une sélection sur celui-ci.</p>

</div>


<div class="section">
    <h2>📖 Partie 4 : aide de l'IA générative</h2>

<p>Quelque soit le mode de manipulation, une aide via une IA est proposée à l'apprenant, que ce soit : <ul>

<li>Dans la compréhension de la requête correcte.</li>
    <li>Dans la résolution de sa requête syntaxiquement fausse </li>
    <li>Dans la correction de sa requête pour obtenir une table résultat correcte.</li>
    </ul>
</p>
<p>Reprenons la question n°3 dans l'interface Exercice et Question.
Etudiants (nom, prénom) qui ont eu une moyenne générale supérieur à 10.
Décochez la case mode Pas à Pas et sélectionnez désormais uniquement Aide de l'IA.
Etudiez les retours de l'IA pour les différentes requêtes proposées suivantes.</p>

<p>R1 - requête correcte : explication détaillée par l'IA de la requête proposée</p>
<div class="wrapper">
<textarea id="myText8">
select nom, prenom, AVG((noteex+notecc)/2)
    from etudiants Natural Join notes
    group by noetu, nom, prenom
    having AVG((noteex+notecc)/2)>10;
</textarea>
<button class="copy-btn js-copy-text" aria-label="Copier le texte">📋</button>
</div>


<p>R2 - requête syntaxiquement fausse : aide par l'IA pour corriger la requête</p>
<div class="wrapper">
<textarea id="myText9">
select nom, prenom, AVG((noteex+notecc)/2)
    from etudiants Natural Join notes
    group by noetu
    having AVG((noteex+notecc)/2)>10;
</textarea>
<button class="copy-btn js-copy-text" aria-label="Copier le texte">📋</button>
</div>



<p>R3 - requête correcte syntaxiquement, mais ne répond pas à l'intention (pas la bonne table résultat) : aide de l'IA pour comprendre les erreurs.</p>
<div class="wrapper">
<textarea id="myText10">
select nom, prenom, AVG(noteex+notecc)
    from etudiants Natural Join notes
    group by noetu, nom, prenom
    having AVG(noteex+notecc)>10;
</textarea>
<button class="copy-btn js-copy-text" aria-label="Copier le texte">📋</button>
</div>


</div>

<div class="section">
    <h2>📖 Partie 5 : exercice complémentaire</h2>

    <p>Nous vous proposons maintenant de manipuler l'outil avec les modes souhaitées (pas à pas et/ou aide de l'IA) pour en mesurer les fonctionnalités proposées soit : <ul>

<li>Via la manipulation libre à travers des requêtes que vous souhaitez tester</li>
<li>Via les autres questions de l'exercice Didapro11 où nous vous donnons l'intention et la requête correcte. </li>
</ul>

N'hésitez pas : <ul>

<li>à utiliser le mode Pas à Pas pour comprendre une requête.</li>
<li>à provoquer des erreurs dans la requête SQL que ce soit syntaxiquement ou non pour tester le mode Aide à l'IA</li>
</ul>
Vous pouvez aussi tester de cocher les 2 modes en même temps.</p>



<p>Sélectionner la question n°4 - Tri de la table résultat
"Nom et Prénom des étudiants qui ont un nom qui commence par un D,
trié par ordre alphabétique sur le nom et prénom."</p>
<div class="wrapper">
<textarea id="myText11">
select nom, prenom
    from etudiants
    where nom like 'D%'
    order by nom, prenom
</textarea>
<button class="copy-btn js-copy-text" aria-label="Copier le texte">📋</button>
</div>



<p>Sélectionnez la question n°5 - Plusieurs jointures.
	"Liste des étudiants (nom, prénom) inscrits en Deug MIAS"</p>
<div class="wrapper">
<textarea id="myText12">
select nom, prenom
    from matieres m join notes n on m.codemat = n.codemat join etudiants e on e.noetu = n.noetu
    where diplome = 'Deug MIAS'
</textarea>
<button class="copy-btn js-copy-text" aria-label="Copier le texte">📋</button>
</div>



<p>Sélectionnez la question n°6 - Autojointure
	"Etudiants inscrits dans le module MIAS2I5 et le module MIAS2I6",</p>
<div class="wrapper">
<textarea id="myText13">
select n1.noetu
    from notes n1 join notes n2 on n1.noetu=n2.noetu
	where n1.codemat='MIAS2I5' and n2.codemat='MIAS2I6'
</textarea>
<button class="copy-btn js-copy-text" aria-label="Copier le texte">📋</button>
</div>

<p>Sélectionnez la question n°7 - Jointure externe
"Etudiants (nom, prénom) qui ne sont pas inscrits dans le module MIAS2I5"</p>
<div class="wrapper">
<textarea id="myText14">
select nom, prenom
    from etudiants e Left Outer Join
		(select noetu, codemat from notes where codemat='MIAS2I5') n
		on e.noetu = n.noetu
	where codemat is NULL
</textarea>
<button class="copy-btn js-copy-text" aria-label="Copier le texte">📋</button>
</div>

<p>Sélectionnez la question n°8 - À faire par vous-même.
"La moyenne générale des étudiants en deuxième année de Deug MIAS, s'ils n'ont pas de notes dans un module, ils ont 0 à ce module.
    Même chose pour les notes (noteex et notecc)."</p>
<div class="wrapper">
<textarea id="myText15">


</textarea>
<button class="copy-btn js-copy-text" aria-label="Copier le texte">📋</button>
</div>
</div>



<div class="section">
    <h2>ANNEXE - Base de données cours.db</h2>

<p>Cette base de données permet de stocker les notes obtenuss par les étudiants dans chaque matière où ils sont inscrits pour les différentes formations proposées dans mon établissement.
    La moyenne de chaque matière correspond à la moyenne de la note de contrôle continu et de la note d'examen. Chaque matière a le même poids, donc la moyenne générale correspond à la moyenne générale de toutes les moyennes obtenues de chaque matière.</p>

<ul>
    <li>Etudiants (_noetu_ varchar(6), nom varchar(10), prénom varchar(10))  qui stockent les étudiants de l'établissement. Chaque étudiant est identifié par un numéro noetu et caractérisé par un nom et prénom.</li>

    <li>Matieres (_codemat_ varchar(8), titre varchar(10), responsable varchar(4), diplome varchar(20)) qui stockent les matières enseignées dans les formations proposées par l'établissement. Chaque matière est identifiée par un numéro codemat et caractérisé par un titre, le responsable de la matière, le diplôme auquel est rattaché la matière.</li>

    <li>Notes (_#noetu_ varchar(6), _#codemat_ varchar(8), noteex numeric, notecc numeric) stockent les notes obtenues par les étudiants inscrits dans les différentes matières. Chaque ensemble de notes est identifié par le numéro de l'étudiant et le code de la matière dans lequel il est inscrit et caractérisé par la note d'examen et la note de contrôle continu obtenues.</li>
</ul>

</div>

    </div>
{% endblock %}

{% block footer_content %}
    © E. Desmontils & Laura Monceaux, Nantes Université, 2026 | QueryCraft v{{ version }}
    <br/>
    <a href="{{ url_for('static', filename='papers/AtelierDidapro11-2026-03-11.pdf') }}">Transparents de l'atelier.</a>
{% endblock %}

{% block scripts %}
    <script src="{{ url_for('static', filename='script/didapro11.js') }}"></script>
{% endblock %}