Ajout de l'interpreteur pyhton

brythonRunner/css/palindrome.css

@@ -0,0 +1,3 @@
+.hidden{
+    visibility: hidden;
+}		

brythonRunner/javascript/palindrome.js

@@ -0,0 +1,158 @@
+
+function run() {
+    const console = document.getElementById("console");
+    const runner = new BrythonRunner({
+      stdout: {
+        write(content) {
+          console.innerHTML += content;
+          console.scrollTop = console.scrollHeight;
+        },
+        flush() {}
+      },
+      stderr: {
+        write(content) {
+          console.innerHTML += content;
+          console.scrollTop = console.scrollHeight;
+        },
+        flush() {}
+      },
+      stdin: {
+        async readline() {
+          console.innerHTML += "\n";
+          console.scrollTop = console.scrollHeight;
+          var userInput = prompt();
+          return userInput;
+        },
+        flush() {}
+      }
+     });
+    var code = editor.getValue();
+    runner.runCode(code)
+    }
+          
+function run_init() {        
+  if (document.getElementById("console") != '') {
+    document.getElementById("console").innerHTML = '';
+    run();
+    // setTimeout(() => {console.log("Resolve while pb")}, 1000);
+    // setTimeout(() => {location.reload();}, 1000);
+  } 
+  else {
+    run();
+    // setTimeout(() => {console.log("Resolve while pb")}, 1000);
+    // setTimeout(() => {location.reload();}, 1000);
+  }
+}
+
+var editor = ace.edit("editor");
+editor.setTheme("ace/theme/vibrant_ink");
+editor.getSession().setMode("ace/mode/python");
+editor.setFontSize("16px");
+editor.container.style.height = "250px"
+editor.setOptions({
+  enableLiveAutocompletion: true,
+  copyWithEmptySelection: true,
+  showGutter: true,
+  useWrapMode: true, // wrap text to view
+  indentedSoftWrap: false,
+});
+
+//Function that execute given code and return the result in a given element by id
+        
+function exec(code, id) {
+  const terminal = document.getElementById("console");
+  const retour = document.getElementById(id);
+  const runner = new BrythonRunner({
+    stdout: {
+      write(content) {
+        retour.textContent = content;
+        },
+      flush() {}
+    },
+    stderr: {
+      write(content) {
+        retour.textContent = "ERROR";
+        terminal.innerHTML += content;
+        terminal.scrollTop = terminal.scrollHeight;
+      },
+      flush() {}
+    },
+    stdin: {
+      async readline() {
+        terminal.innerHTML += "\n";
+        terminal.scrollTop = terminal.scrollHeight;
+        var userInput = prompt();
+        return userInput;
+      },
+      flush() {}
+    }
+  });
+  runner.runCode(code)
+}
+          
+//~ Function that check if the code in the editor as the same result as the solution.
+          
+function check(){
+  const retourCode = document.getElementById("code").textContent;
+  const retourSolution = document.getElementById("solution").textContent;
+  if (retourSolution == "ERROR") {
+    result.innerHTML = "Il semblerait qu'il y a une erreur dans ton code :/";
+    result.classList.remove('hidden');
+  }
+
+  else if (retourSolution == retourCode) {
+    result.innerHTML = "Bien joué";
+    result.classList.remove('hidden');
+  } 
+  else {
+    result.innerHTML = "Mauvaise réponse";
+    result.classList.remove('hidden');
+  }
+}
+		
+//~ Function that test the user code
+          
+async function submit(){
+  var test = editor.getValue()+`\n
+import random as r
+def estPalindromeVerif(var):
+  if(var == var[::-1]):
+      return True
+  else:
+      return False
+
+def testPalindrome(x):
+  l=[]
+  for i in range(x):
+      for j in range(r.randint(1,10)):
+        l.append(r.randint(0,9))
+        if(estPalindrome(l)!=estPalindromeVerif(l)):
+          return False
+  return True
+
+print(testPalindrome(5))
+  `;
+  exec("print ('True')", "code"); 
+  exec(test, "solution");
+  await new Promise(r => setTimeout(r, 1500));
+  check();
+}
+       
+function aide(){
+  if(document.getElementById("textAide").textContent == ""){
+    document.getElementById("textAide").textContent = "En python l’instruction [::-1] permet d’inverse une chaine de caractère. Par exemple print(\"ae\"[::-1])  affiche : ea.";  
+  }
+  else{
+    document.getElementById("textAide").textContent = "";
+  }
+}
+
+function rappel(){
+  if(document.getElementById("textRappel").textContent == ""){
+    document.getElementById("textRappel").textContent = "Un palindrome est un nombre qui peut se lire dans les deux sens. Par exemple 111.";  
+  }
+  else{
+    document.getElementById("textRappel").textContent = "";
+  }
+}
+

brythonRunner/page/palindrome.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Brython</title>
+  <link rel="stylesheet"href="../css/palindrome.css" />
+</head>
+<body>
+  <div class="enigme">
+	  <h2>
+      Écrire une fonction estPalindrome qui prend en argument un entier et qui renvoie True si c’est un palindrome et False sinon. 
+		</h2>
+  </div>
+
+  <h1 id="result" class="hidden"></h1>
+
+  <button onclick="run_init()">run</button>
+  <button onclick="submit()">submit</button>
+  <button onclick="aide()" id="buttonAide">Aide</button>
+  <button onclick="rappel()" id="buttonRappel">Rappel</button>
+  <p id="textAide"></p>
+  <p id="textRappel"></p>
+  <div class='editor_class' id='editor'>def estPalindrome(var):
+  if(var == var[::-1]):
+    return True
+  else:
+    return False
+	</div>
+  <div class='compiler_class'>
+    <textarea id='console' readonly></textarea>
+  </div>
+
+  <p id="code" class="hidden">code</p>
+  <p id="solution" class="hidden">solution</p>
+
+  <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="../javascript/palindrome.js"></script>
+
+</body>
+</html>