add speech synthesis

content/01.mdx

@@ -5,13 +5,14 @@ metaTitle: '01. Role of Driver’s License in Wisconsin and Employment'
 
 import Chart1 from './components/1-chart';
 import Scenario from './components/scenario';
+import Voice from './components/voice';
 
 Often possessing a driver’s license is a job requirement; either employers require a driver’s license, a lack of public transportation makes it necessary, or both. For many employers, a driver’s license is a symbol of responsibility and employability.
 
 This hurts people with low-incomes and people of color, demographics who are less likely to have a driver’s license and more likely to have a driver’s license suspended. Employment and Training Institute at the University of Wisconsin-Milwaukee studied driver’s license prevalence in 2016 and found that 75% of white 18-year-olds had a driver’s license, compared to just 34% of Black 18-year-olds, and 33% of Latinx 18-year-olds[^1].
 
 <Chart1 />
-
+<Voice />
 Losing one’s driver’s license is usually due to cost rather than one’s driving ability which makes getting a license an expensive proposition. For instance, an inability to pay a traffic ticket can snowball into a driver’s license suspension for failure to pay forfeitures.
 
 This next activity will put you in the shoes of a person with low income who is experiencing driver’s license barriers. You’ll be given some facts about your character, and then asked to choose your response to provided questions. Each time you choose a response, it affects your character’s position and your next questions.

content/components/voice.js

@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+
+class Voice extends Component {
+  componentDidMount() {
+    const script = document.createElement('script');
+    script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js';
+    document.head.appendChild(script);
+
+    const script2 = document.createElement('script');
+    script2.src = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/915932/articulate.min.js';
+    document.head.appendChild(script2);
+  }
+
+  speak(e) {
+    $().articulate('replace', '§', 'section');
+    if (e.target.innerText === 'Speak') {
+      $('#text').articulate('speak');
+      e.target.innerText = 'Stop';
+    } else {
+      $().articulate('stop');
+      e.target.innerText = 'Speak';
+    }
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        <button onClick={e => { this.speak(e) }}>Speak</button>
+      </React.Fragment>
+    );
+  }
+}
+
+export default Voice;