Skip to content

Commit abaade0

Browse files
laike9mlaike9m
committed
Split challenge area into a separate template file
1 parent 3655eb3 commit abaade0

File tree

2 files changed

+150
-151
lines changed

2 files changed

+150
-151
lines changed

‎templates/challenge.html

Lines changed: 1 addition & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -262,157 +262,7 @@
262262

263263
<!-- Right/Bottom Challenge Area-->
264264
<div class="challenge-area">
265-
<!-- Challenge Header Area-->
266-
<div class="challenge-header">
267-
<div class="challenge-header__title">
268-
<span>Challenge - {{ name }}</span>
269-
{%include 'components/badge.html' with context %}
270-
</div>
271-
<p class="challenge-header__exerpt">
272-
Complete code following the instructions, so that lines followed by
273-
<code># expect-type-error</code> (if any)
274-
fail type check, while others can pass.<br>
275-
Hit the "▶️ Run" button to see result.
276-
</p>
277-
<div class="hints-container">
278-
{% if hints_for_display %}
279-
<a id="read-hints" role="button" class="secondary outline" href="javascript:void(0);">💡 Read Hints</a>
280-
{% else %}
281-
<div id="hints-missing">💡 No Hints Available</div>
282-
{% endif %}
283-
<article class="hints-message">{{hints_for_display | safe}}</article>
284-
</div>
285-
</div>
286-
287-
<div class="challenge-main">
288-
<!-- Code Editor Area -->
289-
<div class="codemirror-container">
290-
<div id="editor">
291-
<a id="playground-link" target="_blank" rel="noopener noreferrer">
292-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4m-8-2l8-8m0 0v5m0-5h-5"/></svg>
293-
<span>Open Pyright Playground</span>
294-
</a>
295-
</div>
296-
<div class="editor-actions">
297-
<p id="answer-link">Stuck? Check out
298-
<a target="_blank" rel="noopener noreferrer"
299-
href="https://github.com/laike9m/Python-Type-Challenges/tree/main/challenges/{{level}}-{{name}}/solution.py">
300-
solution
301-
</a>
302-
</p>
303-
<button id="reset-button" class="secondary">
304-
Reset
305-
</button>
306-
<button id="run-button">
307-
▶️ Run
308-
</button>
309-
</div>
310-
</div>
311-
<!-- Test Cases and Result Area -->
312-
<div class="tests-result-container">
313-
<div id="tests"></div>
314-
<div id="result"></div>
315-
</div>
316-
</div>
265+
{% include "components/challenge_area.html" %}
317266
</div>
318267
</div>
319-
320-
<script type="text/javascript">
321-
let confetti = new JSConfetti();
322-
let initTheme = localStorage.getItem('theme') === 'dark' ? "material-darker" : "default"
323-
let sharedCodeMirrorOptions = {
324-
mode: "python",
325-
lineWrapping: true,
326-
lineNumbers: true,
327-
indentUnit: 4,
328-
theme: initTheme,
329-
}
330-
let code_under_test = {{ code_under_test | tojson }};
331-
let myCodeMirror = CodeMirror(document.getElementById("editor"), {
332-
value: code_under_test,
333-
...sharedCodeMirrorOptions,
334-
});
335-
let test_code = {{ test_code | tojson }};
336-
let testCodeMirror = CodeMirror(document.getElementById("tests"), {
337-
value: test_code,
338-
readOnly: "nocursor",
339-
...sharedCodeMirrorOptions,
340-
});
341-
342-
let playgroundLink = document.getElementById("playground-link");
343-
playgroundLink.addEventListener('click', function (event) {
344-
const code = myCodeMirror.getValue() + testCodeMirror.getValue();
345-
this.href = "https://pyright-play.net/?code=" + LZString.compressToEncodedURIComponent(code);
346-
});
347-
348-
window.addEventListener('themeSwitch', function (event) {
349-
let theme = localStorage.getItem('theme') === 'dark' ? "material-darker" : "default"
350-
myCodeMirror.setOption("theme", theme);
351-
testCodeMirror.setOption("theme", theme);
352-
})
353-
354-
let runButton = document.getElementById('run-button')
355-
runButton.onclick = function () {
356-
console.log(`Run challenge at: ${new Date().toLocaleString()}`);
357-
358-
// set button spinner
359-
let rawInnerText = runButton.innerText;
360-
runButton.ariaBusy = true;
361-
runButton.innerText = ""
362-
363-
let code = myCodeMirror.getValue();
364-
fetch('/run/{{level}}/{{name}}', {
365-
method: 'POST',
366-
body: code
367-
})
368-
.then(response => response.json())
369-
.then(json => {
370-
// add confetti effect when passed
371-
if (json.passed) {
372-
confetti.addConfetti()
373-
}
374-
setTimeout(() => {
375-
document.getElementById('answer-link').style.display = 'block';
376-
}, 500);
377-
document.getElementById("result").innerHTML = json.message;
378-
if (json.debug_info !== undefined) {
379-
console.log(json.debug_info);
380-
}
381-
})
382-
.catch((error) => {
383-
console.error('Error:', error);
384-
})
385-
.finally(() => {
386-
// reset button spinner
387-
runButton.ariaBusy = false;
388-
runButton.innerText = rawInnerText;
389-
});
390-
};
391-
392-
let resetButton = document.getElementById('reset-button')
393-
resetButton.onclick = function () {
394-
myCodeMirror.setValue(code_under_test);
395-
};
396-
397-
// Set up hints events and functions
398-
let hintBtn = document.getElementById('read-hints')
399-
hintBtn.onclick = function () {
400-
// Toggle the display of the hints message.
401-
let msgElem = document.getElementsByClassName('hints-message')[0];
402-
if (msgElem.style.display === 'block') {
403-
msgElem.style.display = 'none';
404-
} else {
405-
msgElem.style.display = 'block';
406-
}
407-
};
408-
// Make sure to open links in hints in new tab.
409-
document.querySelectorAll('.hints-message a').forEach(function(elem) {
410-
elem.setAttribute('target', '_blank');
411-
})
412-
413-
// Make sure the current challenge is visible to user.
414-
activeChallengeInList = document.getElementById("{{level}}-{{name}}");
415-
activeChallengeInList.scrollIntoView({block: 'center'});
416-
activeChallengeInList.classList.add('active-challenge'); // Highlight
417-
</script>
418268
{% endblock %}

‎templates/components/challenge_area.html

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
<div class="challenge-header">
2+
<div class="challenge-header__title">
3+
<span>Challenge - {{ name }}</span>
4+
{%include 'components/badge.html' with context %}
5+
</div>
6+
<p class="challenge-header__exerpt">
7+
Complete code following the instructions, so that lines followed by
8+
<code># expect-type-error</code> (if any)
9+
fail type check, while others can pass.<br>
10+
Hit the "▶️ Run" button to see result.
11+
</p>
12+
<div class="hints-container">
13+
{% if hints_for_display %}
14+
<a id="read-hints" role="button" class="secondary outline" href="javascript:void(0);">💡 Read Hints</a>
15+
{% else %}
16+
<div id="hints-missing">💡 No Hints Available</div>
17+
{% endif %}
18+
<article class="hints-message">{{hints_for_display | safe}}</article>
19+
</div>
20+
</div>
21+
22+
<div class="challenge-main">
23+
<div class="codemirror-container">
24+
<div id="editor">
25+
<a id="playground-link" target="_blank" rel="noopener noreferrer">
26+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4m-8-2l8-8m0 0v5m0-5h-5"/></svg>
27+
<span>Open Pyright Playground</span>
28+
</a>
29+
</div>
30+
<div class="editor-actions">
31+
<p id="answer-link">Stuck? Check out
32+
<a target="_blank" rel="noopener noreferrer"
33+
href="https://github.com/laike9m/Python-Type-Challenges/tree/main/challenges/{{level}}-{{name}}/solution.py">
34+
solution
35+
</a>
36+
</p>
37+
<button id="reset-button" class="secondary">
38+
Reset
39+
</button>
40+
<button id="run-button">
41+
▶️ Run
42+
</button>
43+
</div>
44+
</div>
45+
<div class="tests-result-container">
46+
<div id="tests"></div>
47+
<div id="result"></div>
48+
</div>
49+
</div>
50+
51+
52+
<script type="text/javascript">
53+
let confetti = new JSConfetti();
54+
let initTheme = localStorage.getItem('theme') === 'dark' ? "material-darker" : "default"
55+
let sharedCodeMirrorOptions = {
56+
mode: "python",
57+
lineWrapping: true,
58+
lineNumbers: true,
59+
indentUnit: 4,
60+
theme: initTheme,
61+
}
62+
let code_under_test = {{ code_under_test | tojson }};
63+
let myCodeMirror = CodeMirror(document.getElementById("editor"), {
64+
value: code_under_test,
65+
...sharedCodeMirrorOptions,
66+
});
67+
let test_code = {{ test_code | tojson }};
68+
let testCodeMirror = CodeMirror(document.getElementById("tests"), {
69+
value: test_code,
70+
readOnly: "nocursor",
71+
...sharedCodeMirrorOptions,
72+
});
73+
74+
let playgroundLink = document.getElementById("playground-link");
75+
playgroundLink.addEventListener('click', function (event) {
76+
const code = myCodeMirror.getValue() + testCodeMirror.getValue();
77+
this.href = "https://pyright-play.net/?code=" + LZString.compressToEncodedURIComponent(code);
78+
});
79+
80+
window.addEventListener('themeSwitch', function (event) {
81+
let theme = localStorage.getItem('theme') === 'dark' ? "material-darker" : "default"
82+
myCodeMirror.setOption("theme", theme);
83+
testCodeMirror.setOption("theme", theme);
84+
})
85+
86+
let runButton = document.getElementById('run-button')
87+
runButton.onclick = function () {
88+
console.log(`Run challenge at: ${new Date().toLocaleString()}`);
89+
90+
// set button spinner
91+
let rawInnerText = runButton.innerText;
92+
runButton.ariaBusy = true;
93+
runButton.innerText = ""
94+
95+
let code = myCodeMirror.getValue();
96+
fetch('/run/{{level}}/{{name}}', {
97+
method: 'POST',
98+
body: code
99+
})
100+
.then(response => response.json())
101+
.then(json => {
102+
// add confetti effect when passed
103+
if (json.passed) {
104+
confetti.addConfetti()
105+
}
106+
setTimeout(() => {
107+
document.getElementById('answer-link').style.display = 'block';
108+
}, 500);
109+
document.getElementById("result").innerHTML = json.message;
110+
if (json.debug_info !== undefined) {
111+
console.log(json.debug_info);
112+
}
113+
})
114+
.catch((error) => {
115+
console.error('Error:', error);
116+
})
117+
.finally(() => {
118+
// reset button spinner
119+
runButton.ariaBusy = false;
120+
runButton.innerText = rawInnerText;
121+
});
122+
};
123+
124+
let resetButton = document.getElementById('reset-button')
125+
resetButton.onclick = function () {
126+
myCodeMirror.setValue(code_under_test);
127+
};
128+
129+
// Set up hints events and functions
130+
let hintBtn = document.getElementById('read-hints')
131+
hintBtn.onclick = function () {
132+
// Toggle the display of the hints message.
133+
let msgElem = document.getElementsByClassName('hints-message')[0];
134+
if (msgElem.style.display === 'block') {
135+
msgElem.style.display = 'none';
136+
} else {
137+
msgElem.style.display = 'block';
138+
}
139+
};
140+
// Make sure to open links in hints in new tab.
141+
document.querySelectorAll('.hints-message a').forEach(function(elem) {
142+
elem.setAttribute('target', '_blank');
143+
})
144+
145+
// Make sure the current challenge is visible to user.
146+
activeChallengeInList = document.getElementById("{{level}}-{{name}}");
147+
activeChallengeInList.scrollIntoView({block: 'center'});
148+
activeChallengeInList.classList.add('active-challenge'); // Highlight
149+
</script>

0 commit comments

Comments
 (0)