Skip to content
This repository was archived by the owner on Jun 7, 2023. It is now read-only.

Commit 0025966

Browse files
ram8647ram8647
committed
DRAFT: nitial commit of quizly component
1 parent 8d03164 commit 0025966

34 files changed

Lines changed: 7496 additions & 6512 deletions

‎package-lock.json‎

Lines changed: 328 additions & 6512 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎runestone/__init__.py‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
from .animation import Animation
88
from .mchoice import MChoice, QuestionNumber
99
from .blockly import Blockly
10+
from .quizly import Quizly
1011
from .codelens import Codelens
1112
from .clickableArea import ClickableArea
1213
from .datafile import DataFile
@@ -194,6 +195,7 @@ def build(options):
194195
"dragndrop": DragNDrop,
195196
"parsonsprob": ParsonsProblem,
196197
"poll": Poll,
198+
"quizly": Quizly,
197199
"reveal": RevealDirective,
198200
"selectquestion": SelectQuestion,
199201
"shortanswer": JournalDirective,

‎runestone/quizly/__init__.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
from .quizly import *

‎runestone/quizly/js/all_appinv.js‎

Lines changed: 1764 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎runestone/quizly/js/all_blockly.js‎

Lines changed: 2217 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎runestone/quizly/js/all_quizly.js‎

Lines changed: 426 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎runestone/quizly/js/blockly.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<html>
2+
3+
<!-- Mirrored from course.mobilecsp.org/mobilecsp/assets/lib/quizly/blockly.html by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 26 Feb 2021 01:25:30 GMT -->
4+
<head>
5+
<meta charset="utf-8">
6+
<!-- NOTE: Don't change this Title -->
7+
<title>Blockly Frame</title>
8+
9+
<link type="text/css" rel="stylesheet" href="media/blockly.css">
10+
11+
<!-- Loads the quizzes into the the global variable 'quizzes', used below -->
12+
<!-- in the initBlockly() function. -->
13+
<script>
14+
var GLOBAL_DEBUG = false; // Sets DEBUG a quizme*.js files.
15+
var GLOBAL_ED_X = false; // This is not the edX version.
16+
</script>
17+
<script type="text/javascript" src="quizzes.js"></script>
18+
19+
<!-- These compressed files are built with plovr.config: -->
20+
<!-- java -jar plovr-eba786b34df9.jar build plovr.config -->
21+
<script type="text/javascript" src="all_blockly.js"></script>
22+
<script type="text/javascript" src="all_appinv.js"></script>
23+
<script type="text/javascript" src="all_quizly.js"></script>
24+
25+
<!-- Because plovr renames functions and variables, which causes
26+
eval(fn) to fail for evaluating function problems, we include
27+
quizme-helper.js separately from the rest of Quizly code. -->
28+
<script type="text/javascript" src="quizme-helper.js"></script>
29+
30+
<!-- Got to document why this is not needed for GCB? -->
31+
<!-- <script type="text/javascript" src="./jquery-1.9.1.min.js"></script> -->
32+
33+
<style>
34+
html, body {
35+
background-color: #fff;
36+
margin: 0;
37+
padding: 0;
38+
overflow: hidden;
39+
}
40+
.blocklySvg {
41+
height: 100%;
42+
width: 100%;
43+
}
44+
</style>
45+
46+
<script>
47+
// NOTE: Blockly injects a static toolbox in the form of an Xml tree. We want our toolbox to be dynamic but
48+
// we must initialize it here. The TOOLBOX category serves as a static heading for the toolbox.
49+
50+
function initBlockly() {
51+
if (GLOBAL_DEBUG) console.log('RAM>>>>>>>>>>>>>>>: initBlockly');
52+
53+
// The quizzes are loaded by the script above and stored in global var quizzes.
54+
initBlocklyFrame(quizzes);
55+
}
56+
</script>
57+
58+
</head>
59+
<body id="ai_frame" onload="initBlockly()">
60+
<div id="ai_type_block" style="display:none">
61+
<p>
62+
<input id="ac_input_text" />
63+
</p>
64+
</div>
65+
</body>
66+
67+
<!-- Mirrored from course.mobilecsp.org/mobilecsp/assets/lib/quizly/blockly.html by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 26 Feb 2021 01:25:32 GMT -->
68+
</html>

‎runestone/quizly/js/index.html‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
<html>
2+
3+
<head>
4+
<meta charset="utf-8">
5+
<!-- NOTE: Don't change this Title -->
6+
<title>Quizme App Inventor</title>
7+
<link type="text/css" rel="stylesheet" href="../../css/main.css">
8+
<style>
9+
body {
10+
background-color: white;
11+
font-family: sans-serif;
12+
}
13+
h1 {
14+
font-weight: normal;
15+
font-size: 140%;
16+
}
17+
18+
#dialogoverlay{
19+
display: none;
20+
opacity: .2;
21+
position: fixed;
22+
top: 0px;
23+
left: 0px;
24+
background: #FFF;
25+
width: 100%;
26+
z-index: 10;
27+
}
28+
#dialogbox{
29+
display: none;
30+
position: fixed;
31+
background: #000;
32+
border-radius:7px;
33+
width:400px;
34+
z-index: 10;
35+
}
36+
#dialogbox > div{ background:#FFF; margin:8px; }
37+
#dialogbox > div > #dialogboxhead{ background: #666; font-size:19px; padding:10px; color:#CCC; }
38+
#dialogbox > div > #dialogboxbody{ background:#333; padding:20px; color:#FFF; }
39+
#dialogbox > div > #dialogboxfoot{ background: #666; padding:10px; text-align:right; }
40+
</style>
41+
42+
<script>
43+
// Event listener and handler for quiz result
44+
window.addEventListener('message', handleMessage, false);
45+
46+
function handleMessage(event) {
47+
// if (event.origin != "http://localhost:85") { return; }
48+
console.log("handleMessage result: " + event.data)
49+
this.window.quizly_result = event.data;
50+
console.log("handleMessage window result: " + this.window.quizly_result);
51+
}
52+
53+
// Based on: https://www.developphp.com/video/JavaScript/Custom-Alert-Box-Programming-Tutorial
54+
// The variable doc is set based on where the dialogoverlay, which varies if index.html is embedded.
55+
function JavaScriptAlert(){
56+
this.render = function(dialog){
57+
var winW = window.innerWidth;
58+
var winH = window.innerHeight;
59+
var dialogoverlay = window.parent.document.getElementById('dialogoverlay');
60+
var doc;
61+
if (dialogoverlay) {
62+
doc = window.parent.document;
63+
} else {
64+
doc = window.document; // For embedded cases
65+
}
66+
dialogoverlay = doc.getElementById('dialogoverlay');
67+
var dialogbox = doc.getElementById('dialogbox');
68+
dialogoverlay.style.display = "block";
69+
dialogoverlay.style.height = winH+"px";
70+
dialogbox.style.left = winW - 550 +"px";
71+
dialogbox.style.top = "100px";
72+
dialogbox.style.display = "block";
73+
doc.getElementById('dialogboxhead').innerHTML = "Javascript Code";
74+
doc.getElementById('dialogboxbody').innerHTML = "<pre>" + dialog + "</pre>";
75+
doc.getElementById('dialogboxfoot').innerHTML = '<button onclick="Alert.ok()">OK</button>';
76+
}
77+
this.ok = function(){
78+
var dialogoverlay = window.parent.document.getElementById('dialogoverlay');
79+
if (dialogoverlay) {
80+
doc = window.parent.document;
81+
} else {
82+
doc = window.document; // For embedded cases
83+
}
84+
doc.getElementById('dialogbox').style.display = "none";
85+
doc.getElementById('dialogoverlay').style.display = "none";
86+
}
87+
}
88+
var Alert = new JavaScriptAlert();
89+
var DEBUG = false;
90+
91+
function showJavascript() {
92+
if (DEBUG) console.log("ShowJavaScript");
93+
Blockly.hello('showjavascript');
94+
}
95+
96+
/**
97+
Handler for the Quizly submit button. It
98+
evaluates the user's solution and posts
99+
the result (true or false) on window.parent.quizlies
100+
where it can be retrieved by the GCB quiz object.
101+
*/
102+
function checkAnswer() {
103+
console.log("checkAnswer -- RAM");
104+
document.getElementById('show_javascript').disabled = true;
105+
var result = Blockly.Quizme.evaluateUserAnswer();
106+
var quizName = Blockly.Quizme.quizName
107+
window.postMessage("Result=" + result, 'http://localhost:85');
108+
109+
// window.parent.quizlies['quizname']=quizName;
110+
// var thisQuiz = window.parent.quizlies[quizName];
111+
// thisQuiz.result = result[0];
112+
// thisQuiz.workspace = result[1];
113+
114+
115+
// Comment this out if there is separate GCB button for submitting the result.
116+
// window.parent.checkAnswer(); // This parent script is in modules/quizly/quizly.py
117+
}
118+
119+
function giveHint() {
120+
if (DEBUG) console.log("giveHint");
121+
Blockly.hello('hint');
122+
}
123+
124+
function showQuiz(quizname) {
125+
if (DEBUG) console.log("showQuiz");
126+
Blockly.hello('showquiz', quizname);
127+
}
128+
129+
function giveNewQuestion(quizname) {
130+
if (DEBUG) console.log("giveNewQuestion");
131+
Blockly.hello('showquiz', quizname);
132+
}
133+
134+
</script>
135+
136+
</head>
137+
<body>
138+
<div id="dialogoverlay"></div>
139+
<div id="dialogbox">
140+
<div>
141+
<div id="dialogboxhead"></div>
142+
<div id="dialogboxbody"></div>
143+
<div id="dialogboxfoot"></div>
144+
</div>
145+
</div>
146+
147+
<input type="hidden" id="quizname" value="">
148+
<h1 hidden="true" id="heading">Quizly: Live Coding Exercises for App Inventor</h1>
149+
<table width="100%" height="100%" cellspacing="0" cellpadding="0" style="border:0px">
150+
<tr>
151+
<td>
152+
<div id="quiz_question">Here is where the quiz question goes.</div>
153+
<input hidden="true" id="quiz_answer" width="80" font-size="14px" type="text"></input>
154+
<div id="hint_html">Here is where the hint goes. </div>
155+
&nbsp;
156+
&nbsp;
157+
<table style="border:0px" >
158+
<tr>
159+
<td>
160+
<button class="gcb-button gcb-button-primary" id="hint_button" onclick="giveHint()">Hint</button>
161+
</td>
162+
<td>
163+
<button class="gcb-button gcb-button-primary" id="gcb_check_answer" onclick="checkAnswer()">Check Answer</button>
164+
</td>
165+
<td>
166+
<button class="gcb-button gcb-button-primary" id="show_javascript" onclick="showJavascript()" style="visibility:hidden" disabled>Show Javascript</button>
167+
</td>
168+
</tr>
169+
</table>
170+
</td>
171+
</tr>
172+
<tr>
173+
<td><div contenteditable="true" width="300px" height="100px" id="quiz_result" readonly="readonly">&nbsp; </div></td>
174+
</tr>
175+
<tr>
176+
<td height="99%">
177+
<script>
178+
// Called once Blockly is fully loaded. Puts Blockly on the top-level Window
179+
function blocklyLoaded(blockly) {
180+
window.Blockly = blockly;
181+
}
182+
</script>
183+
<iframe style="width: 100%; height: 100%; border: 0px; padding: 1px; margin: 2px;" src="blockly.html"></iframe>
184+
</td>
185+
</tr>
186+
</table>
187+
188+
</body>
189+
190+
<!-- Mirrored from course.mobilecsp.org/mobilecsp/assets/lib/quizly/gcb-index.html?backpack=hidden&selector=hidden&quizname=quiz_pause_the_player&hints=true&repeatable=false by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 26 Feb 2021 01:25:30 GMT -->
191+
</html>

‎runestone/quizly/js/media/1x1.gif‎

43 Bytes
Loading

‎runestone/quizly/js/media/backpack-small.png‎

8.31 KB
Loading

0 commit comments

Comments
 (0)