|
|
@ -1,95 +1,197 @@
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<head>
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<title>Hanoi</title>
|
|
|
|
<title>Palindrome</title>
|
|
|
|
<link
|
|
|
|
<link rel="stylesheet" href="../../CSS/Enigme.css"/>
|
|
|
|
rel="stylesheet"
|
|
|
|
<link rel="stylesheet" href="../../CSS/Home.css">
|
|
|
|
href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
|
|
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
|
|
|
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
|
|
|
|
<style>
|
|
|
|
crossorigin="anonymous"
|
|
|
|
html{
|
|
|
|
/>
|
|
|
|
background-image: url(../../../assets/img/Background5.jpg);
|
|
|
|
<script
|
|
|
|
}
|
|
|
|
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
|
|
|
|
</style>
|
|
|
|
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="https://fonts.googleapis.com/icon?family=Material+Icons"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="View/src/CSS/Enigme.css" />
|
|
|
|
</head>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<body>
|
|
|
|
<div class="enigme">
|
|
|
|
<div class="container-fluid px-5">
|
|
|
|
<div class="titre_pre">
|
|
|
|
<!-- First Row -->
|
|
|
|
<div class="retour">
|
|
|
|
<div class="row py-4">
|
|
|
|
<a class="material-icons" id="home" href="../Home.html" style="font-size:36px;color:white;">home</a>
|
|
|
|
<div class="col-9 d-flex align-items-center px-0">
|
|
|
|
</div>
|
|
|
|
<a
|
|
|
|
<div class="sign">
|
|
|
|
class="material-icons pl-0"
|
|
|
|
<h1>
|
|
|
|
id="home"
|
|
|
|
<span class="fast-flicker">T</span>
|
|
|
|
href="index.php?action=goToHome"
|
|
|
|
<span>our </span>
|
|
|
|
style="font-size: 40px; color: white"
|
|
|
|
<span class="flicker"> H</span>
|
|
|
|
>home</a
|
|
|
|
<span>anoi</span>
|
|
|
|
>
|
|
|
|
</h1>
|
|
|
|
</div>
|
|
|
|
</div><br>
|
|
|
|
<button
|
|
|
|
</div>
|
|
|
|
style="background-color: transparent; border: none"
|
|
|
|
<h2>Consigne</h2><br>
|
|
|
|
onclick="displayHelp()"
|
|
|
|
<p class="enonce">
|
|
|
|
class="col-3 d-flex align-items-center"
|
|
|
|
Faire une fonction permettant de résoudre le problème des tours d’hanoi peu importe le nombre d'entrées dans la fonction.
|
|
|
|
>
|
|
|
|
</p><br>
|
|
|
|
<div class="col-10 text-right px-3">
|
|
|
|
<h2>Rappel</h2><br>
|
|
|
|
<p style="font-size: 14px; color: white"><b>Besoin d'aide ?</b></p>
|
|
|
|
<p class="rappel">Le problème des tours de hanoi est le suivant, on souhaite déplacer un certain nombre de disque de taille différente et ils sont et doivent restés empilés de telle sorte qu’aucun disque d’une certaine taille n soit placé en dessous d’un disque de taille plus grande en sachant qu’il n’y a que 3 piles.
|
|
|
|
</div>
|
|
|
|
</p><br>
|
|
|
|
<div class="col-2 text-right">
|
|
|
|
<h2>Exemple</h2><br>
|
|
|
|
<img
|
|
|
|
<p>Entrée :3,"A","B","C"</p>
|
|
|
|
src="View/assets/img/Foxy.png"
|
|
|
|
<p>Sortie : [['A','C'],['A','B'],['C','B'],['A','C'],['B','A'],['B','C'],['A','C']]</p>
|
|
|
|
alt="Logo"
|
|
|
|
<h2>Aide</h2><br>
|
|
|
|
class="rounded-circle moving-fox"
|
|
|
|
<p>Une fonction récursive est une fonction qui fait appelle à elle même</p>
|
|
|
|
style="border: 1px solid #44fff6; width: 60px; height: 60px"
|
|
|
|
</div>
|
|
|
|
/>
|
|
|
|
<div class='ace' id='editor'>def hanoi(nb_disks,start, middle, end):
|
|
|
|
</div>
|
|
|
|
l=[]
|
|
|
|
</button>
|
|
|
|
hanoi_rec(l,nb_disks,start, middle, end)
|
|
|
|
</div>
|
|
|
|
return l
|
|
|
|
<!-- End First Row -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Second Row -->
|
|
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
|
|
<!-- First Column -->
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
|
|
|
class="col-3 rounded p-3"
|
|
|
|
|
|
|
|
style="background-color: #222831; min-height: 80vh; height: auto"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<h2 class="text-left py-3" style="color: #44fff6; font-weight: 500">
|
|
|
|
|
|
|
|
Les tours d'Hanoi
|
|
|
|
|
|
|
|
</h2>
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
|
|
Écrire une fonction <b style="color: violet;">hanoi</b> permettant de résoudre le problème des <b>tours d’hanoi </b>
|
|
|
|
|
|
|
|
peu importe le nombre d'entrées dans la fonction. <br />
|
|
|
|
|
|
|
|
Cette fonction devra prend en paramètre le <b style="color: #44fff6;">nombre de disques</b>,
|
|
|
|
|
|
|
|
le <b style="color: #44fff6;">nom</b> de la tour de départ,
|
|
|
|
|
|
|
|
le <b style="color: #44fff6;">nom</b> la tour d'arrivée et
|
|
|
|
|
|
|
|
le <b style="color: #44fff6;">nom</b> la tour intermédiaire. <br />
|
|
|
|
|
|
|
|
Elle devra retoure une <b style="color: yellow;">liste</b> contenant les déplacements à effectuer (cf exemple ci-dessous).
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
<h3 class="text-left pb-3 pt-5" style="color: #44fff6">Rappel</h3>
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
|
|
Le problème des tours de <b>hanoi</b> est le suivant, on souhaite déplacer un certain nombre de disque de taille différente
|
|
|
|
|
|
|
|
et ils sont et doivent restés empilés de telle sorte
|
|
|
|
|
|
|
|
qu’aucun disque d’une certaine taille n soit placé en dessous d’un disque de taille plus grande
|
|
|
|
|
|
|
|
en sachant qu’il n’y a que 3 piles.
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
<h3 class="text-left pb-3 pt-5" style="color: #44fff6">Exemple</h3>
|
|
|
|
|
|
|
|
<p><b>Entrée</b> :3,"A","B","C"</p>
|
|
|
|
|
|
|
|
<p><b>Sortie</b> : [['A','C'],['A','B'],['C','B'],['A','C'],['B','A'],['B','C'],['A','C']]</p>
|
|
|
|
|
|
|
|
<h3
|
|
|
|
|
|
|
|
class="text-left pb-3 pt-5 help"
|
|
|
|
|
|
|
|
style="color: #44fff6; display: none"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
Aide
|
|
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
|
|
<p style="display: none" class="help">
|
|
|
|
|
|
|
|
Pensse à utiliser une fonction récursive pour résoudre ce problème.
|
|
|
|
|
|
|
|
Pour rappel une fonction récursive est une fonction qui s'appelle elle même.
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- End First Column -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Second Column -->
|
|
|
|
|
|
|
|
<div class="col-5 pr-0">
|
|
|
|
|
|
|
|
<div class="ace rounded" id="editor">def hanoi(nb_disks,start, middle, end):
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- End Second Column -->
|
|
|
|
|
|
|
|
|
|
|
|
def hanoi_rec(l,nb_disks, start, middle, end):
|
|
|
|
<!-- Third Column -->
|
|
|
|
if nb_disks == 1:
|
|
|
|
<div class="col-4">
|
|
|
|
return l.append([start,end])
|
|
|
|
<textarea
|
|
|
|
else:
|
|
|
|
id="console"
|
|
|
|
hanoi_rec(l,nb_disks - 1, start, end, middle)
|
|
|
|
readonly
|
|
|
|
l.append([start,end])
|
|
|
|
style="width: 100%; min-height: 65vh; height: auto"
|
|
|
|
hanoi_rec(l,nb_disks - 1, middle, start, end)</div>
|
|
|
|
class="p-3 rounded"
|
|
|
|
<div class='compiler_class'>
|
|
|
|
></textarea>
|
|
|
|
<textarea id='console' readonly rows="30" cols="100"></textarea>
|
|
|
|
|
|
|
|
<div class="buttons">
|
|
|
|
<div class="row pt-5 text-center" style="cursor: pointer">
|
|
|
|
<div>
|
|
|
|
<div class="col-6">
|
|
|
|
<a onclick="run_init()" class="btn">
|
|
|
|
<a onclick="run_init()" class="btn">
|
|
|
|
<span class="noAnimation">Run</span>
|
|
|
|
<span>Run</span>
|
|
|
|
</a>
|
|
|
|
|
|
|
|
<a href="#m1-o" onclick="submit()" class="btn">
|
|
|
|
|
|
|
|
<span class="noAnimation">Submit</span>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="col-6">
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
|
|
|
onclick="submit()"
|
|
|
|
|
|
|
|
class="btn"
|
|
|
|
|
|
|
|
data-toggle="modal"
|
|
|
|
|
|
|
|
data-target="#modal"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<span>Submit</span>
|
|
|
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- End Third Column -->
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- End Second Row -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="modal-container" id="m1-o" style="--m-background: transparent;">
|
|
|
|
<!-- Modal -->
|
|
|
|
<div class="modal">
|
|
|
|
<div
|
|
|
|
<div id="containerResult">
|
|
|
|
class="modal fade"
|
|
|
|
<h1 id="result"></h1>
|
|
|
|
id="modal"
|
|
|
|
</div>
|
|
|
|
tabindex="-1"
|
|
|
|
<div class="buttons">
|
|
|
|
role="dialog"
|
|
|
|
<div id="top">
|
|
|
|
aria-labelledby="exampleModalCenterTitle"
|
|
|
|
<a href="#" class="btn">
|
|
|
|
aria-hidden="true"
|
|
|
|
<span class="noAnimation">x</span>
|
|
|
|
>
|
|
|
|
</a>
|
|
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
|
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
|
|
|
<div class="modal-header">
|
|
|
|
|
|
|
|
<h2
|
|
|
|
|
|
|
|
class="modal-title"
|
|
|
|
|
|
|
|
id="exampleModalLongTitle"
|
|
|
|
|
|
|
|
style="color: black"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
Results
|
|
|
|
|
|
|
|
</h2>
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
|
|
|
type="button"
|
|
|
|
|
|
|
|
class="close"
|
|
|
|
|
|
|
|
data-dismiss="modal"
|
|
|
|
|
|
|
|
aria-label="Close"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<span aria-hidden="true">×</span>
|
|
|
|
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="bottom">
|
|
|
|
<div class="modal-body">
|
|
|
|
<a href="../Home.html" class="btn" id="fleche">
|
|
|
|
<h5 id="result" style="color: black"></h5>
|
|
|
|
<span class="noAnimation">Next</span>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="modal-footer">
|
|
|
|
|
|
|
|
<a href="index.php?action=goToTrianglePascal" class="btn" style="display: none" id="next">
|
|
|
|
|
|
|
|
<span>NEXT</span>
|
|
|
|
</a>
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
|
|
|
|
<!-- End Modal -->
|
|
|
|
<script src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js" type="text/javascript" charset="utf-8"></script>
|
|
|
|
|
|
|
|
<script src="../../JS/base.js"></script>
|
|
|
|
<script
|
|
|
|
<script src="../../JS/Hanoi.js"></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/base.js"></script>
|
|
|
|
|
|
|
|
<script src="View/src/JS/Hanoi.js"></script>
|
|
|
|
</body>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
</html>
|
|
|
|