WIP - changing the Discord FAQs to Yaml. But it doesn't work at the moment

Author: KeiranWDigital

_data/discordQuestions/cantHearAnything.yaml

@@ -0,0 +1,7 @@
+name: "cantHearAnything"
+question: "I can't hear anything!?!"
+answer: "<p>
+    Make sure your speakers/headphones are plugged in/turned on. Make sure your system
+    volume is turned up.
+</p>
+"

_data/discordQuestions/cantSeePresentation.yaml

@@ -0,0 +1,8 @@
+name: "cantSeePresentation"
+question: "I can't see the presentation!"
+answer: "<p>
+    Click on the channel name (on the left of the screen) and you will see everyone's' pictures. One of them will have a
+    button saying "Watch Stream". Click this button.
+    <img class="discord-image mg-fluid" width="300" src="../images/discord/discord-watch-stream.png">
+</p>
+"

_data/discordQuestions/imTalkingCantHear.yaml

@@ -0,0 +1,21 @@
+name: "imTalkingCantHear"
+question: "I'm talking but you can't hear me!"
+answer: "<p>
+    Make sure your microphone/headset is plugged in/turned on. Make sure your microphone is set in the settings.
+</p>
+<p> You can see settings by clicking the gear icon.
+</p>
+<img class="discord-image mg-fluid" width="300" src="../images/discord/discord-setting-button.png">
+
+<p>Click "Voice and Video" </p>
+<img class="discord-image mg-fluid" width="300" src="../images/discord/discord-voice.png">
+
+<p>Make Sure your microphone is selected here:</p>
+
+<img class="discord-image mg-fluid" width="500" src="../images/discord/discord-microphone-dropdown.png">
+
+<p>You can test it by clicking the "Let's Check" button:</p>
+
+<img class="discord-image mg-fluid" width="500" src="../images/discord/discord-mic-test.png">
+
+"

discord.html

@@ -52,7 +52,7 @@ <h2>Before the event</h2>
         </p>
     </div>
 </div>
-<br />
+
 
 <a name="joiningTheEvent"></a>
 <h2>Joining the event</h2>
@@ -135,7 +135,7 @@ <h3>Log in</h3><img width="200" class="discord-image mg-fluid" src="../images/di
             <a href="#">Back to top</a>
         </p>
     </div>
-</div><br />
+</div>
 
 <a name="controls"></a>
 <h2>Controls</h2>
@@ -170,46 +170,15 @@ <h4>Step 2</h4><img class="discord-image mg-fluid" width="300" src="../images/di
             <a href="#">Back to top</a>
         </p>
     </div>
-</div><br />
+</div>
 <a name="troubleshooting"></a>
 <h2>Troubleshooting</h2>
-<h4>I can't hear anything!?!</h4>
-<p>
-    Make sure your speakers/headphones are plugged in/turned on. Make sure your system
-    volume is turned up.
-</p>
-
-<h4>I can't see the presentation!</h4>
-<p>
-    Click on the channel name (on the left of the screen) and you will see everyone's' pictures. One of them will have a
-    button saying "Watch Stream". Click this button.
-
-    <img class="discord-image mg-fluid" width="300" src="../images/discord/discord-watch-stream.png">
-
-</p>
 
-<h4>I'm talking but you can't hear me!</h4>
-<p>
-    Make sure your microphone/headset is plugged in/turned on. Make sure your microphone is set in the settings.
-</p>
-<p> You can see settings by clicking the gear icon.
-</p>
-<img class="discord-image mg-fluid" width="300" src="../images/discord/discord-setting-button.png">
-
-<p>Click "Voice and Video" </p>
-<img class="discord-image mg-fluid" width="300" src="../images/discord/discord-voice.png">
-
-<p>Make Sure your microphone is selected here:</p>
-
-<img class="discord-image mg-fluid" width="500" src="../images/discord/discord-microphone-dropdown.png">
+<div id="accordion">
+    {% for question_hash in site.data.discordQuestions %}
+    {% assign question = question_hash[1] %}
+    {% include_relative _includes/question.html question=question %}
+    {% endfor %}
+</div>
 
-<p>You can test it by clicking the "Let's Check" button:</p>
 
-<img class="discord-image mg-fluid" width="500" src="../images/discord/discord-mic-test.png">
-<div class="row unpadded">
-    <div class="col">
-        <p class="back-to-top">
-            <a href="#">Back to top</a>
-        </p>
-    </div>
-</div><br />