Add question slider

index.html

@@ -16,6 +16,15 @@
     <main id="map" class="map">
       <img class="control__download" src="download.png" />
     </main>
+    <div class="questions">
+      <p class="questions__current-question">
+        1. What are the important origins and destinations people will need to connect via West Station (to, from, or through)?
+      </p>
+      <p class="questions__controls">
+        <button class="questions__controls--back" disabled>&#8592;</button>
+        <button class="questions__controls--forward">&#8594;</button>
+      </p>
+    </div>
     <aside class="sidebar">
       <form class="layers">
         <h3 class="layers__subtitle">Map layers</h3>
@@ -142,5 +151,6 @@ <h3 class="layers__subtitle">Travel time</h3>
     <script src="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
     <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.js"></script>
     <script src="map.js"></script>
+    <script src="questions.js"></script>
   </body>
 </html>

questions.js

@@ -0,0 +1,29 @@
+let currentQuestionIndex = 1;
+const questionList = {
+  1: ' 1. What are the important origins and destinations people will need to connect via West Station (to, from, or through)?',
+  2: '2. What existing transit routes need improvements, and what new services are needed to increase the range of transit access to and from the West Station area?',
+  3: '3. What active transportation routes need to be improved or created in order to provide safe access to and from the West Station area?',
+  4: '4. What additional development options, zoning standards, parking requirements, transit fares, or other policies should we model and evaluate?'
+}
+const backButton = document.querySelector('.questions__controls--back');
+const forwardButton = document.querySelector('.questions__controls--forward');
+const questionText = document.querySelector('.questions__current-question');
+
+document.querySelector('.questions__controls').addEventListener('click', (e) => {
+  if (e.target.className === 'questions__controls--back') {
+    currentQuestionIndex--;
+  } else if (e.target.className === 'questions__controls--forward') {
+    currentQuestionIndex++
+  }
+  if (currentQuestionIndex == 1) {
+    backButton.disabled = true;
+    forwardButton.disabled = false;
+  } else if (currentQuestionIndex == 4) {
+    backButton.disabled = false;
+    forwardButton.disabled = true;
+  } else {
+    backButton.disabled = false;
+    forwardButton.disabled = false;
+  }
+  questionText.innerText = questionList[`${currentQuestionIndex}`]
+});

style.css

@@ -20,6 +20,27 @@ p {
   width: calc(100% - 300px);
 }
 
+.questions {
+  background: rgba(255, 255, 255, .9);
+  display:  flex;
+  flex-direction: column;
+  font-size: 16px;
+  height: 110px;
+  justify-content: space-between;
+  padding: 10px;
+  position: absolute;
+  right: 310px;
+  top: 10px;
+  width: 300px;
+}
+
+.questions__controls {
+  display: flex;
+  flex-direction: row;
+  margin-top: 10px;
+  justify-content: space-around;
+}
+
 .sidebar {
   background: rgba(255, 255, 255, .5);
   width: 300px;