<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>First Test</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
      integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="View/src/CSS/FirstTest.css" />
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark pb-5">
      <div class="container-fluid mx-0">
        <div class="nav-item nav-link">
          <a class="navbar-brand" href="index.php?action=goToHome">Home</a>
        </div>
        <div class="mx-auto d-flex">
          <h5
            class="m-1 text-uppercase"
            style="color: #fff; font-weight: bold; font-size: 22px"
          >
          Test de qualification
          </h5>
          <h5
          class="m-1 text-uppercase"
          style="color: #44fff6; font-weight: bold; font-size: 22px"
        > 
          9/10
        </h5>
        </div>
        <div class="nav-link">
          <a class="navbar-brand" href="index.php?action=goToNext&num=8">Back</a>
        </div>
        <div class="nav-link">
          <a class="navbar-brand" href="index.php?action=goToNext&num=10">Next</a>
        </div>
      </div>
    </nav>

    <div class="container">
      <!-- First Test -->
      <div
        class="row rounded p-3 m-3"
        style="
          background: #16222a; /* fallback for old browsers */
          background: -webkit-linear-gradient(
            to right,
            #3a6073,
            #16222a
          ); /* Chrome 10-25, Safari 5.1-6 */
          background: linear-gradient(to right, #3a6073, #16222a);
        "
      >
        <div class="row">
          <div class="col-10">
            <section
              style="background-color: #222831; min-height: 0"
              class="p-3 rounded m-0">
              <p>
                Durant le test précédent, tu as découvert l'instruction <b style="color : violet">for</b>.
                Nous ne l'avons abordé que brièvement, mais il est temps de l'étudier plus en détail.<br/>
                La boucle <b style="color : violet">for</b> est une boucle qui permet de répéter un bloc d'instruction un nombre défini de fois.<br/>
                On précise après le mot-clé <b style="color : violet">for</b> le nom d’une variable 
                qui prendra successivement toutes les valeurs qui sont données après le mot-clé <b style="color : violet">in</b>.<br/>
                Il est possible d’obtenir le même résultat sans donner de liste de valeurs, mais en utilisant la fonction <b style="color : violet">range()</b>. 
            </p>
            <p>
                Voici un exemple de code.
            </p>
            <code style="font-size: 18px">
                list = [1, 2, 3, 4, 5]<br/>
                for i in list:<br/>
                &nbsp;&nbsp;print(i+2)<br/>
                <br/>
                for j in range(5):<br/>
                &nbsp;&nbsp;print(j)<br/>
                <br/>
                for k in range(1, 5):<br/>
                &nbsp;&nbsp;print(k)<br/>
                <br/>
                for l in range(0, 5, 2):<br/>
                &nbsp;&nbsp;print(l)<br/>
                <br/>
                for m in range(5, 0, -1):<br/>
                &nbsp;&nbsp;print(m)<br/>
                <br/>
                for n in range(len("toto"))):<br/>
                &nbsp;&nbsp;print(n)<br/>
            </code>
            <br></br>
            <p>
                Je te laisse expérimenter par toi même.
            </p>
            </section>
          </div>
          <div class="col-2 align-self-center">
            <img
              src="View/assets/img/Foxy.png"
              alt="Logo"
              class="img-fluid rounded-circle"
              style="
                border: 2px solid #44fff6;
                background-image: url('View/src/assets/img/BackgroundMain.jpg');
                background-size: cover;
                background-position: center;
              "
            />
          </div>
        </div>
        <div class="row mt-5">
          <!-- Editor -->
          <div class="col-8">
            <div class="ace rounded ace-1" id="editor" style="min-height: 40vh"><?php
            if (isset ($_COOKIE['test9'])) {
                echo $_COOKIE['test9'];
            }
            else {
              echo 'list = [1, 2, 3, 4, 5] 
print("Boucle for dans une liste : ")
for i in list:
  print(i+2)

print("")
print("Boucle for dans avec range (5): ")
for j in range(5):
  print(j)

print("")
print("Boucle for dans avec range (1, 5): ")
for k in range(1, 5):
  print(k)
 
print("")
print("Boucle for dans avec range (0, 5, 2): ")
for l in range(1, 5, 2):
  print(l)

print("")
print("Boucle for dans avec range (5, 0, -1): ")
for m in range(5, 0, -1):
  print(m)

print("")
print("Boucle for sur un len() : ")
for n in range(len("toto")):
  print(n)';
            }?></div>
          </div>
          <!-- End Editor -->

          <!-- Console -->
          <div class="col-4" style="min-height: 40vh">
            <textarea
              id="console"
              readonly
              style="width: 100%; height: 60%"
              class="p-3 rounded"
            ></textarea>
            <!-- End Return Code -->

            <!-- Buttons -->
            <div
              class="row pt-5 text-center"
              style="cursor: pointer; height: 20%"
            >
              <div class="col">
                <a onclick="run_init()" class="btn">
                  <span>Run</span>
                </a>
              </div>
            </div>
            <!-- End Buttons -->
          </div>
          <!-- End Console -->
        </div>
      </div>
      <!-- End First Test -->
    </div>
    <script
      src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script
      src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script src="View/src/JS/baseTest.js"></script>
  </body>
</html>
