This is the client side of our application. This was built with React, Chakra UI components, and a mobile first design utilising Flexbox.
The issue: Problem with remote teaching delivery is that it can be really challenging to encourage engagement and participation, as you don’t get the same live feedback and reception that would in real life, making it difficult to gauge audience understanding.
Component tree: Diagram 1 Diagram 2
BEFORE YOU BEGIN You have to make sure that you are in the database of users, there are two different types of user (speaker and participant) giving access to different views, features and tools depending upon your authorisation (more about this later). If you don't have these logging into the app will be a problem.
The feature menu is your paracetamol displaying tools that we have designed to help with the headache. The Thumbometer feature can help with gauging how everyone is feeling, are you going at the right speed? The right level? Etc. The Raise A Hand feature can help with being able to ask and answer questions when they arise. Live Poll/Quiz feature can help with making sure that you are digesting what is being said
Speaker instructions Open the thumbometer feature (either through the nav bar or by clicking on the thumb icon). To give a question you can use the drop down to select one of the preset question options provided or if you select custom an input field is then given and you may type your own. Similar to how you can give a timer you can select one of the preset options from the timer drop down or pick custom and an input field is given and you may type your own (numbers in seconds). Then you can pick start and wait for the results. You will see the results displayed by the rotation of the thumb that has now appeared on the scene. Down is low, Up is high. The results are also available as a percentage below as well showing how many participants have already submitted their response. This is handy as if all the participants have already submitted their result and there is time left you can end it with the stop timer button.The time amount is displayed with a progression bar and when it gets down to 5 seconds it turns red, also displayed in digits below. That session data is then submitted to the database for a later date.
Participant instructions Open the thumbometer feature (either through the nav bar or by clicking on the thumb icon). When the speaker has submitted a question it appears in a heading. The participant can then use the slider below the thumb to register their response to the question. Left is low, right is high as the participant moves the slider the thumb rotates round. Thumb down - low, thumb up - high. The percentage amount of their response is also displayed. The time amount is displayed with a progression bar and when it gets down to 5 seconds it turns red, also displayed in digits below.
Speaker instructions When a hand is raised a notification is sent to the speaker, the list of hands raised is viewable by opening the raise a hand feature (either through the nav bar or by clicking on the hand icon). The hands are shown in a list along with the name of who submitted it. As well as knowing the name and the order can also know the rough idea of what the question entails (useful as the speaker can see if multiple hands have the same sort of question).
Participant instructions If had a question to ask open the raise a hand feature (either through the nav bar or by clicking on the hand icon). Click the icon of a closed hand this will send a notification to the speaker that a hand has been raised with the name attached to it. An added feature is that could also use the input field to put a topic. Not the whole question but just a few words showing the general idea of what want to ask. The raised hand can be put back down by clicking the hand icon again which has now changed to an open hand (or the speaker could reset the hand from their view).
Speaker instructions If wanted to test your audience could give them an on the spot question, open the live quiz feature (either through the nav bar or by clicking on the face icon). To give a question you can use the drop down to select one of the preset question options provided or if you select custom an input field is then given and you may type your own. After creating answer options for the question with the pencil icon (maximum of 4), select the correct answer with the buttons next to each answer(this will not be visible to the participants) and submit that question.
Results shown...
Participant instructions When a live quiz poll has been started by the speaker, open the live quiz feature (either through the nav bar or by clicking on the face icon). The question is displayed with the answer options available. Participant selects their answer and this is submitted back to the speaker.
Results shown...
Admin Access Only In order for the Spotify playlist to run, you will need to create an app at Spotify Developer Dashboard, once you have created a client id and client secret place these inside of the environment variables. By default the playlist url is defined, by default to the School of Code playlist. To change this just replace the url inside of the spotify component.
The sound sample files need to be placed in the sound folder within the public folder. To access them, create a new Audio file and place the file name into a variable.