Skip to content

Commit a2b6d20

Browse files
ecc521ecc521
committed
Fix issues caused by programmatic rename
From 60+ commits ago.......
1 parent 4185a02 commit a2b6d20

5 files changed

Lines changed: 218 additions & 411 deletions

File tree

‎lesson10.html‎

Lines changed: 56 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,11 @@
44
<title>Beginner JavaScript</title>
55
</head>
66
<body>
7+
78
<script src="allPages.js"></script>
89

10+
11+
912
<!-- HTML Mixed CodeMirror-->
1013
<script src="codemirror-5.42.0/lib/codemirror.js"></script>
1114
<link rel="stylesheet" href="codemirror-5.42.0/lib/codemirror.css">
@@ -15,8 +18,6 @@
1518
<script src="codemirror-5.42.0/mode/css/css.js"></script>
1619

1720

18-
19-
2021
<style>
2122
h1 {
2223
text-align:center;
@@ -35,85 +36,42 @@
3536

3637

3738

38-
<p>Now try writing a function. Your function will take two numbers, add them together, and alert the user of the answer.</p>
39-
40-
<p>When called with the numbers 14 and 28, your function should alert 42</p>
41-
42-
43-
<script>
44-
window.answershown = false
45-
46-
function showanswer() {
47-
48-
if (window.answershown === true) {
49-
document.querySelector("#example > .CodeMirror").remove()
50-
window.answershown = false
51-
document.getElementById("solutionbutton").innerHTML = "Show Solution"
52-
}
53-
else {
54-
window.answershown = true
55-
document.getElementById("solutionbutton").innerHTML = "Hide Solution"
56-
57-
58-
59-
document.getElementById("exampleeditor").value = window.solutionHTML
60-
61-
var example = CodeMirror.fromTextArea(document.getElementById("exampleeditor"), {
62-
name: "htmlmixed",
63-
autoCloseTags: true,
64-
styleActiveLine: true,
65-
lineWrapping: false,
66-
lineNumbers:true,
67-
tabSize:2,
68-
readOnly:true,
69-
cursorBlinkRate:-1 //Hides cursor
70-
});
71-
}
72-
}
39+
<p>Paragraph elements aren't that entertaining - lets create a button!</p>
7340

74-
window.solutionHTML = "<!--<!DOCTYPE html>\n<html>\n <head>\n </head>\n <body>\n <script>\n\t\t\tfunction addAndAlert(number1, number2) {\n \tvar sum = number1 + number2\n alert(\"The sum of \" + number1 + \" and \" + number2 + \" is \" + sum)\n }\n addAndAlert(14,28)\n </script>\n </body>\n</html>-->";
7541

76-
window.solutionHTML = window.solutionHTML.slice(4)
77-
window.solutionHTML = window.solutionHTML.slice(0, -3)
78-
</script>
7942

8043

8144
<div style="text-align:center;">
82-
<button style="display:inline-block;margin:auto;padding:6px;background-color:aqua"onclick="showanswer()" id="solutionbutton">Show Solution</button>
83-
8445
<button style="display:inline-block;margin:auto;padding:6px;background-color:lightsalmon;"onclick="window.location = self.previousLesson">Go Back</button>
8546

8647
<button style="display:inline-block;margin:auto;padding:6px;background-color:lightgreen;"onclick="window.location = self.nextLesson">Continue</button>
87-
</div>
8848

89-
<div id="example">
49+
</div>
50+
51+
<div id="example">
9052
<textarea id="exampleeditor" hidden="true"></textarea>
9153
</div>
9254

93-
<br><br><br><br><br><br><br><br>
9455

9556

9657

97-
<script>
98-
//HTML that is in editor at start
99-
//.split("\n").join("\\n").split("\t").join("\\t").split("\"").join("\\\"")
100-
window.initialHTML = "<!--<!DOCTYPE html>\n<html>\n <head>\n </head>\n <body>\n <script>\n\t\t\tfunction addAndAlert(number1, number2) {\n \t//Your code here\n }\n addAndAlert(14,28)\n </script>\n </body>\n</html>-->";
101-
102-
window.initialHTML = window.initialHTML.slice(4)
103-
window.initialHTML = window.initialHTML.slice(0, -3)
104-
105-
106-
</script>
10758

10859

10960

11061

62+
<script>
11163

11264

65+
//HTML that is in editor at start
66+
//.split("\n").join("\\n").split("\t").join("\\t").split("\"").join("\\\"")
67+
window.initialHTML = "<!--<!DOCTYPE html>\n<html>\n <head>\n </head>\n <body>\n <style>\n html, body {\n \tbackground-color:antiquewhite;\n }\n </style>\n <script>\n \n paragraph = document.createElement(\"p\") //Create a paragraph element\n paragraph.innerHTML = \"This is the text (HTML) inside the paragraph element\"\n document.body.appendChild(paragraph) //Add the paragraph to the page\n \n \n </script>\n </body>\n</html>-->";
11368

69+
window.initialHTML = window.initialHTML.slice(4)
70+
window.initialHTML = window.initialHTML.slice(0, -3)
11471

11572

11673

74+
</script>
11775

11876

11977

@@ -126,6 +84,7 @@
12684
<!-- window.initialHTML is the HTML that they should begin with-->
12785

12886

87+
12988
<div id="editorwrapper">
13089
<textarea id="editor"></textarea>
13190
<button id="run">Run!</button>
@@ -135,17 +94,38 @@
13594

13695
<iframe id="result" src="javascript:document.write('Click run - the HTML page will display here')"></iframe>
13796

138-
13997
<script>
14098

14199
function download(content, name, mimetype) {
100+
101+
if (!window.Blob) {
102+
//IE <10
103+
var ifd = document.getElementById('dummy').contentDocument;
104+
ifd.open('text/plain', 'replace');
105+
ifd.write(content);
106+
ifd.close();
107+
ifd.execCommand('SaveAs', true, name);
108+
}
109+
else {
110+
content = new Blob([content], {type:mimetype})
111+
112+
//IE >=10
113+
if (navigator.msSaveBlob) {
114+
navigator.msSaveBlob(content, name)
115+
}
116+
else {
117+
//Non-IE
142118
var link = document.createElement("a");
143119
document.body.appendChild(link);
144-
content = new Blob([content], {type:mimetype})
120+
145121
link.download = name
146122
link.href = URL.createObjectURL(content);
147123
link.click();
124+
148125
document.body.removeChild(link);
126+
127+
}
128+
}
149129
}
150130

151131
document.getElementById("editor").value = localStorage.getItem(window.location.href + "htmlcode") || window.initialHTML
@@ -185,6 +165,7 @@
185165
tabSize:2
186166
});
187167

168+
188169
function runcode() {
189170
var htmlcode = editor.getValue()
190171
var iframe = document.getElementById("result")
@@ -206,39 +187,30 @@
206187
<style>
207188

208189
#editorwrapper {
190+
position:fixed;
191+
bottom:0;
209192
left:0;
210-
height:50%;
193+
height:45%;
211194
width:60%;
212195
display:inline-block;
213196
float:left;
197+
padding:0;
214198
border-right:1px solid black;
215199
border-top:1px solid black;
216-
position:fixed;
217-
bottom:0;
218-
padding:0;
219-
}
200+
}
220201

221202
#result {
203+
position:fixed;
204+
bottom:0;
222205
right:0;
223-
height:50%;
206+
height:45%;
224207
width:40%;
225208
border:0;
226209
border-top:1px solid black;
227210
border-left:1px solid black;
228211
display:inline-block;
229212
float:right;
230-
position:fixed;
231-
bottom:0;
232-
padding:0;
233-
background-color:white;
234-
z-index:4;
235-
}
236-
237-
/*Make the bottom editor display over the solution*/
238-
#editorwrapper {
239-
background-color:white;
240-
opacity: 1;
241-
z-index: 4;
213+
padding:0;
242214
}
243215

244216
.CodeMirror {
@@ -276,6 +248,14 @@
276248
float:right;
277249
}
278250

251+
/*Make the bottom editor display over the solution*/
252+
#editorwrapper {
253+
background-color:white;
254+
opacity: 1;
255+
z-index: 4;
256+
}
257+
258+
279259
html, body {
280260
width:100%;
281261
height:100%;

0 commit comments

Comments
 (0)