Skip to content

Commit 25ad76f

Browse files
twilcotwilco
committed
Test pizza image
1 parent 2f8de93 commit 25ad76f

File tree

8 files changed

+71
-23
lines changed

8 files changed

+71
-23
lines changed

‎assets/html/Pizzatest.png‎

925 KB
Loading

‎assets/html/test-assessment.html‎ renamed to ‎assets/html/index.html‎

Lines changed: 71 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@
9191
dialog {
9292
width: 57vw;
9393
height: 40vh;
94-
margin: 20vh auto;
94+
margin: 26vh auto;
9595
text-align: center;
9696
padding: 30px;
9797
border: none;
@@ -129,7 +129,11 @@
129129
button:active {
130130
transform: scale(0.99);
131131
}
132-
#main-heading { text-align: center; }
132+
#main-heading {
133+
text-align: center;
134+
margin-bottom: 1px;
135+
font-size: 1.7em;
136+
}
133137
.one-fourth-container { font-size: 2.5rem; }
134138
#question-count-container {
135139
margin-left: -20px;
@@ -177,31 +181,41 @@
177181
background-color: #888;
178182
position: relative;
179183
}
180-
.thumb::before {
184+
/*.thumb::before {
181185
content: "🍕";
182186
font-size: 58px;
183187
margin-left: -27px;
184188
margin-top: -22px;
185189
position: absolute;
186-
}
190+
}*/
187191
div.focus .rail {
188192
background-color: #CCC;
189193
}
194+
#pizza-input {
195+
background-image: url("../img/Pizza-4.png");
196+
background-repeat: no-repeat;
197+
background-size: contain;
198+
width: 419px;
199+
height: 406px;
200+
margin-top: 35px;
201+
margin-left: auto;
202+
margin-right: auto;
203+
}
190204
</style>
191205
<script src="customslider.js"></script>
192206
</head>
193207
<body>
194208
<dialog id="show-score-modal">
195209
<form method="dialog">
196210
<div style="width: 100%">
197-
You got all six questions correct. Great work!
211+
<span id="dialog-content">You got all six questions correct. Great work!</span>
198212
</div>
199213
<div style="width: 100%">
200214
<button type="submit" autofocus>Close</button>
201215
</div>
202216
</form>
203217
</dialog>
204-
<h2 id="main-heading">Ms. Z's 2nd Grade Pop Quiz</h2>
218+
<h1 id="main-heading">Pop Quiz</h1>
205219
<div class="question-box">
206220
<div class="question-header">
207221
<div id="question-count-container"></div>
@@ -218,15 +232,17 @@ <h2 id="main-heading">Ms. Z's 2nd Grade Pop Quiz</h2>
218232
const pizzaSliderHtml = `
219233
<div class="question">
220234
${pizzaHtml}
221-
Drag the pizza to select your answer!
235+
Tap the pizza to add and remove slices!
222236
</div>
223237
224-
<div class="aria-widget-slider">
225-
<div class="value">0</div>
226-
<div class="rail">
227-
<div role="slider" class="thumb" aria-valuemin="0" aria-valuenow="0" aria-valuetext="0 slices" aria-valuemax="8"></div>
228-
</div>
229-
</div>
238+
<div id="pizza-input" role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="4" aria-valuetext="4 slices" aria-valuemax="8"></div>
239+
240+
<!-- <div class="aria-widget-slider"> -->
241+
<!-- <div class="value">0</div> -->
242+
<!-- <div class="rail"> -->
243+
<!-- <div role="slider" class="thumb" aria-valuemin="0" aria-valuenow="0" aria-valuetext="0 slices" aria-valuemax="8"></div> -->
244+
<!-- </div> -->
245+
<!-- </div> -->
230246
`
231247
const pizzaRadioHtml = `
232248
<div class="question">
@@ -293,11 +309,11 @@ <h2 id="main-heading">Ms. Z's 2nd Grade Pop Quiz</h2>
293309
document.getElementById("next-question-button").addEventListener('click', (e) => { switchCurrentScreen() });
294310
document.getElementById("question-footer").style.justifyContent = "center"
295311
}
296-
function setupFinalQuestionContent(ariaLabel) {
297-
if (ariaLabel)
298-
document.getElementById("show-score-modal").ariaLabel = ariaLabel
312+
function setupFinalQuestionContent(labelledById) {
313+
if (labelledById)
314+
document.getElementById("show-score-modal").setAttribute("aria-labelledby", labelledById)
299315
else
300-
document.getElementById("show-score-modal").removeAttribute("aria-label")
316+
document.getElementById("show-score-modal").removeAttribute("aria-labelledby")
301317

302318
document.getElementById("question-count-container").innerHTML = "6 of 6"
303319
document.getElementById("emoji-container").innerHTML = "🇪🇸"
@@ -308,18 +324,33 @@ <h2 id="main-heading">Ms. Z's 2nd Grade Pop Quiz</h2>
308324
document.getElementById("read-question-button").addEventListener('click', (e) => {
309325
var ssml = `
310326
<speak>
311-
How do you say ${wrapWithSSML("the water", "en-US")} in Spanish?
327+
How do you say ${wrapWithSSML("the water", "en-US", false)} in Spanish?
312328
${wrapWithSSML("El agua", "es-ES")}
329+
${wrapWithSSML("El agua", "es-MX")}
330+
${wrapWithSSML("El agua", "ca-ES")}
313331
${wrapWithSSML("La abuela", "es-ES")}
332+
${wrapWithSSML("La abuela", "es-MX")}
333+
${wrapWithSSML("La abuela", "ca-ES")}
314334
${wrapWithSSML("La abeja", "es-ES")}
335+
${wrapWithSSML("La abeja", "es-MX")}
336+
${wrapWithSSML("La abeja", "ca-ES")}
315337
${wrapWithSSML("El árbol", "es-ES")}
338+
${wrapWithSSML("El árbol", "es-MX")}
339+
${wrapWithSSML("El árbol", "ca-ES")}
316340
</speak>
317341
`;
318342

319343
var utterance = new SpeechSynthesisUtterance(ssml);
320344
window.speechSynthesis.speak(utterance);
321345
});
322346
}
347+
var currentSliceCount = 4;
348+
function updatePizzaControl() {
349+
const pizzaInput = document.getElementById("pizza-input");
350+
pizzaInput.style.backgroundImage = `url(../img/Pizza-${currentSliceCount}.png)`;
351+
pizzaInput.ariaValueNow = `${currentSliceCount}`;
352+
pizzaInput.ariaValueText = `${currentSliceCount} ${currentSliceCount === 1 ? "slice" : "slices"}`;
353+
}
323354
function switchTo(screen) {
324355
currentScreen = screen
325356
switch (currentScreen) {
@@ -337,30 +368,47 @@ <h2 id="main-heading">Ms. Z's 2nd Grade Pop Quiz</h2>
337368
s.initSlider();
338369
}
339370
});
371+
372+
document.getElementById("pizza-input").addEventListener("click", (event) => {
373+
console.log(
374+
"clientX: " + event.clientX +
375+
" - clientY: " + event.clientY);
376+
});
377+
document.getElementById("pizza-input").addEventListener("keydown", (event) => {
378+
console.log(`Keydown: ${event.key}, ${event.code}`);
379+
if (event.key === "ArrowLeft")
380+
currentSliceCount = Math.max(currentSliceCount - 1, 1);
381+
else if (event.key === "ArrowRight")
382+
currentSliceCount = Math.min(currentSliceCount + 1, 6);
383+
else
384+
return;
385+
386+
updatePizzaControl();
387+
});
340388
break;
341389
case Screen.Translation:
342390
setupFinalQuestionContent()
343391
break;
344392
case Screen.TranslationWithAriaLabel:
345-
setupFinalQuestionContent("You got all six questions correct. Great work!")
393+
setupFinalQuestionContent("dialog-content")
346394
break;
347395
}
348396
}
349397

350-
function wrapWithSSML(phrase, lang) {
398+
function wrapWithSSML(phrase, lang, insertBreak = true) {
351399
const ssml = `
352-
<break time="1s"/>
353-
<prosody rate="slow">
400+
${insertBreak ? "<break time='80ms'/>" : ""}
401+
<prosody rate="80%">
354402
<lang xml:lang="${lang}">
355403
${phrase}
356404
</lang>
357405
</prosody>
358-
<break time="1s"/>
359406
`
360407
console.log(ssml)
361408
return ssml
362409
}
363410
function switchCurrentScreen() {
411+
console.log(window.speechSynthesis.getVoices().map((v) => v.lang));
364412
switch (currentScreen) {
365413
case Screen.PizzaRadio:
366414
switchTo(Screen.PizzaSlider)

‎assets/img/Pizza-1.png‎

229 KB
Loading

‎assets/img/Pizza-2.png‎

372 KB
Loading

‎assets/img/Pizza-3.png‎

509 KB
Loading

‎assets/img/Pizza-4.png‎

663 KB
Loading

‎assets/img/Pizza-5.png‎

796 KB
Loading

‎assets/img/Pizza-6.png‎

925 KB
Loading

0 commit comments

Comments
 (0)