Skip to content

Commit 774c7ba

Browse files
committed
English language works basically
1 parent 941ede7 commit 774c7ba

File tree

4 files changed

+106
-0
lines changed

4 files changed

+106
-0
lines changed

_layouts/tutorial.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,14 @@
77
<script type="text/javascript" async="" src="../js/cookies.js"></script>
88
<script type="text/javascript" async="" src="../js/requirements.js"></script>
99
<script type="text/javascript" async="" src="../js/compatibility.js"></script>
10+
<script type="text/javascript" async="" src="../js/languages.js"></script>
1011
<link type="text/css" rel="stylesheet" href="../css/tutorial.css" media="screen"/>
1112
<link type="text/css" rel="stylesheet" href="../css/playfield.css" media="screen"/>
1213
<link type="text/css" rel="stylesheet" href="../css/quiz.css" media="screen"/>
1314
<link type="text/css" rel="stylesheet" href="../css/hint.css" media="screen"/>
1415
<link type="text/css" rel="stylesheet" href="../css/progress.css" media="screen"/>
1516
<link type="text/css" rel="stylesheet" href="../css/requirements.css" media="screen"/>
17+
<link type="text/css" rel="stylesheet" href="../css/languages.css" media="screen"/>
1618
<link type="text/css" rel="stylesheet" href="../css/Ubuntu.css" media="screen"/>
1719
<link rel="shortcut icon" href="../favicon.ico?v=2" type="image/x-icon">
1820
<meta charset="utf-8">

css/languages.css

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
---
3+
4+
/* ----- language ----- */
5+
.language {
6+
padding: 1em;
7+
border-radius: 1em;
8+
}
9+
.language .regex {
10+
width: 100%;
11+
}
12+
.language .text {
13+
width: 100%;
14+
}
15+
16+
/* ----- language.js ----- */
17+
18+
.language h2 {
19+
width: 100%;
20+
text-align: center;
21+
}
22+
23+
.language textarea {
24+
width: 100%;
25+
}

en/14-01.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
title: Programming
3+
---
4+
<p>
5+
You can use regular expressions in many programming languages.
6+
Type your regular expression and the text to search into the field below.
7+
There, you can see what the progam looks like in the given programming language.
8+
</p>
9+
<div class="language">
10+
<input type="text" value="regular expression" class="regex"/>
11+
<input type="text" value="You can use regular expressions in many programming languages." class="text"/>
12+
</div>

js/languages.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
2+
var languagesLoaded = false;
3+
4+
function updateLanguagePython(regularExpression, text) {
5+
var regex = JSON.stringify(regularExpression);
6+
var text = JSON.stringify(text);
7+
return "import re\nregex = " + regex + "\ntext = " + text + "\nprint(re.findall(regex, text))";
8+
}
9+
10+
function updateLanguageJavaScript(regularExpression, text) {
11+
var regex = JSON.stringify(regularExpression);
12+
var text = JSON.stringify(text);
13+
return "regex = " + regex + ";\ntext = " + text + ";\nalert(RegExp(regex).exec(text))";
14+
}
15+
16+
updateLanguages = [
17+
{"name": "Python", "update": updateLanguagePython},
18+
{"name": "JavaScript", "update": updateLanguageJavaScript},
19+
]
20+
21+
function watchLanguageField(languageField, textElement, regex) {
22+
var textareas = [];
23+
for (var i = 0; i < updateLanguages.length; i++) {
24+
var lang = updateLanguages[i];
25+
var div = document.createElement("div");
26+
languageField.appendChild(div);
27+
div.classList.add("programming-language")
28+
var heading = document.createElement("h2");
29+
heading.innerText = lang.name;
30+
div.appendChild(heading);
31+
var textarea = document.createElement("textarea");
32+
div.appendChild(textarea);
33+
textareas.push(textarea);
34+
}
35+
function update() {
36+
for (var i = 0; i < updateLanguages.length; i++) {
37+
var textarea = textareas[i];
38+
var programUpdate = updateLanguages[i].update;
39+
textarea.value = programUpdate(regex.value, textElement.value);
40+
}
41+
}
42+
regex.onkeyup = update;
43+
textElement.onkeyup = update;
44+
update();
45+
}
46+
47+
function getLanguageElement(languageField, index, name) {
48+
return getPlayfieldElement(languageField, index, name);
49+
}
50+
51+
function loadLanguages(){
52+
if (languagesLoaded) {
53+
return;
54+
}
55+
var languageFields = document.getElementsByClassName("language");
56+
for (var i = 0; i < languageFields.length; i += 1) {
57+
var languageField = languageFields[i];
58+
var regex = getLanguageElement(languageField, i, "regex");
59+
var textElement = getPlayfieldElement(languageField, i, "text");
60+
watchLanguageField(languageField, textElement, regex);
61+
if (i == 0) {
62+
regex.focus();
63+
}
64+
}
65+
languagesLoaded = true;
66+
}
67+
window.addEventListener("load", loadLanguages);

0 commit comments

Comments
 (0)