Skip to content

Commit eda2254

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

File tree

8 files changed

+67
-24
lines changed

8 files changed

+67
-24
lines changed

‎assets/html/Pizzatest.png‎

925 KB
Loading

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

Lines changed: 67 additions & 24 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,28 @@ <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")}
313330
${wrapWithSSML("La abuela", "es-ES")}
331+
${wrapWithSSML("La abuela", "es-MX")}
314332
${wrapWithSSML("La abeja", "es-ES")}
333+
${wrapWithSSML("La abeja", "es-MX")}
315334
${wrapWithSSML("El árbol", "es-ES")}
335+
${wrapWithSSML("El árbol", "es-MX")}
316336
</speak>
317337
`;
318-
319338
var utterance = new SpeechSynthesisUtterance(ssml);
320339
window.speechSynthesis.speak(utterance);
321340
});
322341
}
342+
var currentSliceCount = 4;
343+
function updatePizzaControl() {
344+
const pizzaInput = document.getElementById("pizza-input");
345+
pizzaInput.style.backgroundImage = `url(../img/Pizza-${currentSliceCount}.png)`;
346+
pizzaInput.ariaValueNow = `${currentSliceCount}`;
347+
pizzaInput.ariaValueText = `${currentSliceCount} ${currentSliceCount === 1 ? "slice" : "slices"}`;
348+
}
323349
function switchTo(screen) {
324350
currentScreen = screen
325351
switch (currentScreen) {
@@ -337,30 +363,47 @@ <h2 id="main-heading">Ms. Z's 2nd Grade Pop Quiz</h2>
337363
s.initSlider();
338364
}
339365
});
366+
367+
document.getElementById("pizza-input").addEventListener("click", (event) => {
368+
console.log(
369+
"clientX: " + event.clientX +
370+
" - clientY: " + event.clientY);
371+
});
372+
document.getElementById("pizza-input").addEventListener("keydown", (event) => {
373+
console.log(`Keydown: ${event.key}, ${event.code}`);
374+
if (event.key === "ArrowLeft")
375+
currentSliceCount = Math.max(currentSliceCount - 1, 1);
376+
else if (event.key === "ArrowRight")
377+
currentSliceCount = Math.min(currentSliceCount + 1, 6);
378+
else
379+
return;
380+
381+
updatePizzaControl();
382+
});
340383
break;
341384
case Screen.Translation:
342385
setupFinalQuestionContent()
343386
break;
344387
case Screen.TranslationWithAriaLabel:
345-
setupFinalQuestionContent("You got all six questions correct. Great work!")
388+
setupFinalQuestionContent("dialog-content")
346389
break;
347390
}
348391
}
349392

350-
function wrapWithSSML(phrase, lang) {
393+
function wrapWithSSML(phrase, lang, insertBreak = true) {
351394
const ssml = `
352-
<break time="1s"/>
353-
<prosody rate="slow">
395+
${insertBreak ? "<break time='80ms'/>" : ""}
396+
<prosody rate="80%">
354397
<lang xml:lang="${lang}">
355398
${phrase}
356399
</lang>
357400
</prosody>
358-
<break time="1s"/>
359401
`
360402
console.log(ssml)
361403
return ssml
362404
}
363405
function switchCurrentScreen() {
406+
console.log(window.speechSynthesis.getVoices().map((v) => v.lang));
364407
switch (currentScreen) {
365408
case Screen.PizzaRadio:
366409
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)