Add music page

frontend/App.js

@@ -4,6 +4,7 @@ import {NavigationContainer} from '@react-navigation/native';
 import Home from "./screens/Home";
 import Quizzer from "./screens/Quizzer";
 import Ionicons from 'react-native-vector-icons/Ionicons';
+import Music from "./screens/Music";
 
 const Tab = createBottomTabNavigator();
 
@@ -28,6 +29,10 @@ export default function App() {
                     name="Quizzer"
                     component={Quizzer}
                 />
+                <Tab.Screen
+                    name="music"
+                    component={Music}
+                />
             </Tab.Navigator>
         </NavigationContainer>
     );

frontend/package.json

@@ -32,7 +32,7 @@
     "typescript": "^4.1.3"
   },
   "scripts": {
-    "start": "expo start --web --https",
+    "start": "expo start --web",
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo web --https",

frontend/screens/Home.tsx

@@ -11,7 +11,7 @@ const Home = () => {
     const navigation = useNavigation();
 
     const handleClick = () => {
-        axios.get<Quiz>('https://45.55.107.39/test')
+        axios.get<Quiz>('http://45.55.107.39/test')
             .then((response) => {
                 navigation.navigate('Quizzer', {
                     roomId: response.data.id

frontend/screens/Music.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {Card, Paragraph} from 'react-native-paper';
+import {ScrollView} from "react-native";
+
+const Music = () => {
+    return (
+        <ScrollView>
+            <Card>
+                <Card.Cover
+                    source={{ uri: "https://childbraininjurytrust.org.uk/wp-content/uploads/2020/04/Why-You-Love-Online-Quizzes-825x500-1.jpg" }}
+                />
+                <Card.Content>
+                    <Paragraph>
+                        There are seven musical notes that are used in music theory and they are A, B, C, D, E, F and G, these are the only notes that in music notation.
+                        They are used for two different areas and they are for determining the tone, pitch and duration of the notes indicated on the stave.
+                        Each note has its own sound of tone that is completely different from any other notes and its pitch is based on where it is positioned on the stave.
+                        Musical Notes and Stave go hand in hand with each other because that’s where the notes are written on for the individual to read so they can understand what
+                        their playing. For example, the Musical Stave consists of five lines where the beginning note is Middle C, and it is positioned underneath the Musical Stave
+                    </Paragraph>
+                    <Paragraph>
+
+                        However, the principle of the concept stays the same. is used for indicating what note is written and the pitch of it. The notes move up the Stave then the pitch
+                        is raised and if it moves down then it’s lowered. For example, the note Middle C is positioned underneath the stave with a leger line within the note indicating
+                        its position in relation to the Musical Stave.
+                    </Paragraph>
+                    <Paragraph>
+                        Leger Lines are additional stave lines for when the notes pitch is higher or lower that’s what can be notated on the Musical Stave, so the leger lines are drawn either within,
+                        above or below relative to the notes name itself.
+                    </Paragraph>
+                </Card.Content>
+            </Card>
+        </ScrollView>
+    );
+};
+
+export default Music;

frontend/screens/Quizzer.tsx

@@ -30,7 +30,7 @@ const Quizzer = () => {
     useEffect(() => {
         setLoading(true);
         const connection = new HubConnectionBuilder()
-            .withUrl("https://165.227.254.227/gateway?roomId=" + roomId, {
+            .withUrl("http://165.227.254.227/gateway?roomId=" + roomId, {
                 skipNegotiation: true,
                 transport: HttpTransportType.WebSockets
             })