Add SSML example

twilco · twilco · commit fb04cbce1396 · 2022-04-13T09:54:33.000-05:00
diff --git a/assets/html/customslider.js b/assets/html/customslider.js
@@ -258,7 +258,7 @@ aria.widget.slider.prototype.updateThumbPosition = function () {
 
     console.log(this.valueNow);
   this.thumb.setAttribute('aria-valuenow', this.valueNow);
-  this.thumb.setAttribute('aria-valuetext', `${this.valueNow} slices`);
+  this.thumb.setAttribute('aria-valuetext', `${this.valueNow} ${this.valueNow === 1 ? "slice" : "slices"}`);
 
   var pos = Math.round(
     (this.valueNow * this.sliderWidth) / (this.valueMax - this.valueMin)
diff --git a/assets/html/ssml.html b/assets/html/ssml.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+</head>
+<body>
+
+<button id="press-to-speak">Press to speak</button>
+
+<script>
+var a = `
+<speak>
+  What does the Spanish word
+    <break time="1s"/><prosody rate="slow"><lang xml:lang="es-ES">casa</lang></prosody><break time="1s"/>
+  mean in English?
+</speak>
+`;
+
+var b = `
+<speak>
+  <p>
+    <s>You have 4 new messages.</s>
+    <s>The first is from Stephanie Williams and arrived at <break/> 3:45pm.
+    </s>
+    <s>
+      The subject is <prosody rate="-20%">ski trip</prosody>
+    </s>
+  </p>
+</speak>
+`
+
+var utterThis = new SpeechSynthesisUtterance(a);
+// utterThis.voice = window.speechSynthesis.getVoices()[0];
+document.getElementById("press-to-speak").addEventListener("click", () => {
+    window.speechSynthesis.speak(utterThis);
+});
+
+</script>
+</body>
+</html>
+
diff --git a/assets/html/test-assessment-with-slider.html b/assets/html/test-assessment-with-slider.html
@@ -1,20 +1,18 @@
 <!DOCTYPE HTML>
 <html>
 <head>
+<meta charset="UTF-8">
 <style>
     body {
         text-align: center;
         font-size: 24px;
     }
-
     #show-score-container {
         margin-top: 30px;
     }
-
     #show-score-container > button {
         font-size: 32px;
     }
-
     .first-answer-wrapper {
         margin-top: 15px;
     }
@@ -29,7 +27,6 @@
       margin-right: auto;
       width: 300px;
     }
-
     div.aria-widget-slider .rail {
       margin: 2px;
       padding: 1px;
@@ -38,27 +35,30 @@
       position: relative;
       top: 2em;
     }
-
     div.aria-widget-slider .thumb  {
       border: 1px solid #888;
       border-top-color:  #666;
       border-left-color: #666;
       background-color: #DDD;
       position: relative;
     }
-
     div.aria-widget-slider .value  {
       width:      2em;
       text-align: right;
       position: absolute;
     }
-
     div.focus .thumb  {
       border: 1px solid #444;
       background-color: #888;
       position: relative;
     }
-
+    .thumb::before {
+        content: "🍕";
+        font-size: 44px;
+        margin-left: -30px;
+        margin-top: -16px;
+        position: absolute;
+    }
     div.focus .rail {
       background-color: #CCC;
     }
@@ -71,6 +71,8 @@ <h1>Pop quiz</h1>
     <div>
         <h3>Question one</h3>
         How many slices are in 1/4 of a pizza with 8 total slices?
+        <br />
+        Grab the pizza slice and drag to select your answer!
 
         <div class="aria-widget-slider">
           <div class="value">0</div>
diff --git a/assets/html/test-assessment.html b/assets/html/test-assessment.html
