Skip to content

Commit b2ed859

Browse files
cpp-tutorcpp-tutor
committed
Improve web interface
1 parent d50a4f1 commit b2ed859

File tree

3 files changed

+129
-31
lines changed

3 files changed

+129
-31
lines changed

‎pscweb.css‎

Lines changed: 67 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20,41 +20,93 @@ h3 {
2020
margin: 2pt;
2121
}
2222

23-
pre {
23+
.window {
24+
background-color: rgb(224, 160, 224);
25+
margin: 4px;
26+
padding: 8px;
27+
border-radius: 10px;
28+
width: 600px;
29+
height: 576px;
30+
float: left;
31+
}
32+
33+
.window pre {
2434
font-size: 12pt;
2535
line-height: 14pt;
2636
}
2737

28-
textarea {
38+
.window textarea {
2939
width: 584px;
30-
height: 512px;
40+
height: 480px;
3141
background-color: rgba(0, 0, 0, 0);
3242
border: 8px;
3343
padding: 8px;
3444
font-size: 12pt;
45+
line-height: 14pt;
3546
resize: none;
3647
}
3748

38-
button {
49+
.window button {
3950
border: 2px solid rgb(0, 0, 0);
4051
border-radius: 3px;
4152
background-color: rgb(224, 224, 224);
53+
font-size: 10pt;
54+
padding: 2pt;
4255
}
4356

44-
input {
57+
.window input {
4558
border: 2px solid rgb(0, 0, 0);
4659
border-radius: 3px;
4760
background-color: rgb(255, 255, 255);
48-
width: 60%;
49-
float: right;
61+
font-size: 10pt;
62+
padding: 2pt;
63+
width: 80%;
5064
}
5165

52-
.window {
53-
background-color: rgb(224, 160, 224);
54-
margin: 4px;
55-
padding: 8px;
56-
border-radius: 10px;
57-
width: 600px;
58-
height: 584px;
59-
float: left;
66+
.output {
67+
width: 584px;
68+
height: 484px;
69+
}
70+
71+
.bar {
72+
height: 100%;
73+
position: relative;
74+
bottom :-8pt;
75+
left: 0;
76+
}
77+
78+
.load-menu {
79+
display: inline-block;
80+
position: relative;
81+
}
82+
83+
.load-menu-content {
84+
display: none;
85+
position: absolute;
86+
width: 100%;
87+
overflow: visible;
88+
bottom: 18pt;
6089
}
90+
91+
.load-menu:hover .load-menu-content {
92+
display: block;
93+
}
94+
95+
.load-menu-content p {
96+
display: block;
97+
color: rgb(0, 0, 0);
98+
background-color: rgb(255, 255, 255);
99+
border-radius: 0px;
100+
border-style: solid;
101+
border-width: 1px;
102+
border-color: rgb(0, 0, 0);
103+
padding: 4px;
104+
margin: 0px;
105+
font-size: 10pt;
106+
text-decoration: none;
107+
}
108+
109+
.load-menu-content p:hover {
110+
color: rgb(0, 0, 0);
111+
background-color: rgb(224, 160, 224);
112+
}

‎pscweb.html‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,26 +9,38 @@
99
<body>
1010
<script type="text/javascript" src="pscweb.js">
1111
</script>
12-
<span>
12+
<script type="text/javascript" src="pscexamples.js">
13+
</script>
1314
<div>
14-
<h2 align="center">Pseudocode to JavaScript Compiler</h2>
15+
<h2 style="text-align: center">Pseudocode to JavaScript Compiler</h2>
1516
</div>
1617
<div class="window">
18+
<h3 style="text-align: center">Type your program here</h3>
1719
<form id="input" accept-charset="utf-8" spellcheck="false">
18-
<label for="program_source_id"><h3 align="center">Type your program in here</h3>
1920
<textarea name="program_source"></textarea>
20-
</label>
21-
<div>
21+
</form>
22+
<div class="bar">
2223
<button type="button" onClick="run()">Run program</button>
23-
<button type="button" onClick="clear_output()">Clear output</button>
24-
<input type="text" name="user_input" placeholder="Input1,Input2..." maxlength="128"/>
24+
<button type="button" onClick="clear_input()">Clear window</button>
25+
<span class="load-menu">
26+
<div class="load-menu-content" id="examples">
2527
</div>
26-
</form>
28+
<button type="button">Load example</button>
29+
</span>
2730
</div>
31+
</div>
32+
<script type="text/javascript">
33+
createmenu();
34+
</script>
2835
<div class="window">
29-
<h3 align="center">View the output of your program here</h3>
36+
<h3 style="text-align: center">View the output here</h3>
37+
<div class="output">
3038
<pre id="program_output"></pre>
3139
</div>
32-
</span>
40+
<div class="bar">
41+
<button type="button" onClick="clear_output()">Clear output</button>
42+
<input type="text" id="user_input" placeholder="Input1,Input2..." maxlength="128"/>
43+
</div>
44+
</div>
3345
</body>
3446
</html>

‎pscweb.js‎

Lines changed: 40 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
// pscweb.js : support library for Pseudocode Compiler web interface
22

3-
var input_index = 0;
3+
var input_index = 0, pseudocode_examples;
44

55
function readline() {
6-
let input = document.getElementById('input').elements['user_input'].value;
6+
let input = document.getElementById('user_input').value;
77
var input_read = '';
88
var more = input.indexOf(',', input_index);
99
if (more != -1) {
@@ -14,15 +14,20 @@ function readline() {
1414
else {
1515
input_read = input.substring(input_index);
1616
}
17-
print(input_read);
17+
if (input_read != '') {
18+
print(input_read);
19+
}
20+
else {
21+
print('#Empty input#');
22+
}
1823
return input_read;
1924
}
2025

2126
function print(line) {
22-
let max_lines = 28, max_length = 60;
23-
let lines = document.getElementById('program_output').innerHTML.split('\n').length;
27+
let max_lines = 26, max_length = 60;
28+
let lines = document.getElementById('program_output').innerHTML.split('\n').length + line.length / max_length;
2429
if (lines > max_lines) {
25-
alert('Too many lines of output. Please clear the output window!');
30+
alert('Too many lines of output! Please clear the output window.');
2631
throw new Error('Window full');
2732
}
2833
while(line.length > max_length) {
@@ -36,6 +41,10 @@ function clear_output() {
3641
document.getElementById('program_output').innerHTML = '';
3742
}
3843

44+
function clear_input() {
45+
document.getElementById('input').elements['program_source'].value = '';
46+
}
47+
3948
function toutf8(str) {
4049
var urifmt = '' + encodeURIComponent(str), x = function(s) {
4150
return String.fromCharCode(parseInt(s.substring(1), 16));
@@ -77,3 +86,28 @@ function run() {
7786
document.body.appendChild(script);
7887
}
7988

89+
function createmenu() {
90+
var container = document.getElementById('examples');
91+
if (pseudocode_examples == undefined) {
92+
container.innerHTML = '<p onclick="alert(\'Could not load pscexamples.js\');">No examples</p>';
93+
return;
94+
}
95+
for (var e = 0; e != pseudocode_examples.length; e++) {
96+
container.innerHTML += '<p onclick="menuload(\'' + pseudocode_examples[e].name + '\');">' + pseudocode_examples[e].name + '</p>\n';
97+
}
98+
}
99+
100+
function menuload(program) {
101+
var container = document.getElementById('input').elements['program_source'];
102+
if (container.value != '') {
103+
alert('Please clear input window first!');
104+
return;
105+
}
106+
for (var e = 0; e != pseudocode_examples.length; e++) {
107+
if ((pseudocode_examples[e].name == program) && (pseudocode_examples[e].code != undefined)) {
108+
container.value = pseudocode_examples[e].code;
109+
return;
110+
}
111+
}
112+
alert('Could not load program ' + program);
113+
}

0 commit comments

Comments
 (0)