Update

App.js

@@ -21,6 +21,7 @@ import Quiz11 from './quiz11';
 import Quiz12 from './quiz12';
 import Quiz13 from './quiz13';
 import Quiz14 from './quiz14';
+import TotalScore from './totalScore';
 
 const Stack = createStackNavigator();
 
@@ -183,6 +184,17 @@ class App extends React.Component {
               headerTintColor: '#fff',
             }}
           />
+          <Stack.Screen
+            name="15"
+            component={TotalScore}
+            options={{
+              title: ' ',
+              headerStyle: {
+                backgroundColor: '#E07EF9',
+              },
+              headerTintColor: '#fff',
+            }}
+          />
         </Stack.Navigator>
       </NavigationContainer>
     );

context.js

+/* eslint-disable prettier/prettier */
+import React from 'react';
+
+export default React.createContext({
+  wrong: 0,
+  correct: 0,
+  tasks: [],
+  addNewTask: (task) => {},
+  deleteTask: (taskId) => {},
+});

quiz1.js

@@ -51,6 +51,8 @@ export default class Quiz1 extends Component {
     console.log(keywordsList);
     this.setState({
       timer: 0,
+      correct: 0,
+      wrong: 0,
     });
   };
 
@@ -58,25 +60,30 @@ export default class Quiz1 extends Component {
     console.log(keywordsList.toString());
     if (keywordsList.toString() === 'C,D,E,F,G,A,B') {
       this.setState((prevState) => ({
-        correct: prevState.correct + 1,
         timer: 0,
       }));
       Alert.alert('Correct!');
       keywordsList.splice(0, keywordsList.length);
-      this.props.navigation.navigate('2');
+      this.props.navigation.navigate('2', {
+        c: this.state.correct + 1,
+        w: this.state.wrong,
+      });
     } else {
       console.log('wrong');
-      this.setState((prevState) => ({wrong: prevState.wrong + 2, timer: 0}));
+      this.setState((prevState) => ({timer: 0}));
       keywordsList.splice(0, keywordsList.length);
       Alert.alert('Try Again!');
-      this.props.navigation.navigate('2');
+      this.props.navigation.navigate('2', {
+        c: this.state.correct,
+        w: this.state.wrong + 2,
+      });
     }
   };
 
   componentDidMount() {
     this.interval = setInterval(
       () => this.setState((prevState) => ({timer: prevState.timer + 1})),
-      1000,
+      1500,
     );
   }
 

quiz10.js

 /* eslint-disable prettier/prettier */
+/* eslint-disable react/no-did-mount-set-state */
+/* eslint-disable prettier/prettier */
 /* eslint-disable no-unused-vars */
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable prettier/prettier */
@@ -51,6 +53,8 @@ export default class Quiz10 extends Component {
     console.log(keywordsList);
     this.setState({
       timer: 0,
+      correct: 0,
+      wrong: 0,
     });
   };
 
@@ -58,25 +62,34 @@ export default class Quiz10 extends Component {
     console.log(keywordsList.toString());
     if (keywordsList.toString() === 'B,C#,D#,E,F#,G#,A#') {
       this.setState((prevState) => ({
-        correct: prevState.correct + 1,
         timer: 0,
       }));
       Alert.alert('Correct!');
       keywordsList.splice(0, keywordsList.length);
-      this.props.navigation.navigate('11');
+      this.props.navigation.navigate('11', {
+        c: this.state.correct + 1,
+        w: this.state.wrong,
+      });
     } else {
       console.log('wrong');
-      this.setState((prevState) => ({wrong: prevState.wrong + 2, timer: 0}));
+      this.setState((prevState) => ({timer: 0}));
       keywordsList.splice(0, keywordsList.length);
       Alert.alert('Try Again!');
-      this.props.navigation.navigate('11');
+      this.props.navigation.navigate('11', {
+        c: this.state.correct,
+        w: this.state.wrong + 2,
+      });
     }
   };
 
   componentDidMount() {
+    this.setState({
+      correct: this.props.route.params.c,
+      wrong: this.props.route.params.w,
+    });
     this.interval = setInterval(
       () => this.setState((prevState) => ({timer: prevState.timer + 1})),
-      1000,
+      1500,
     );
   }
 

quiz11.js

 /* eslint-disable prettier/prettier */
+/* eslint-disable react/no-did-mount-set-state */
+/* eslint-disable prettier/prettier */
 /* eslint-disable no-unused-vars */
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable prettier/prettier */
@@ -51,6 +53,8 @@ export default class Quiz11 extends Component {
     console.log(keywordsList);
     this.setState({
       timer: 0,
+      correct: 0,
+      wrong: 0,
     });
   };
 
@@ -58,25 +62,34 @@ export default class Quiz11 extends Component {
     console.log(keywordsList.toString());
     if (keywordsList.toString() === 'C#,D#,E#,F#,G#,A#,B#') {
       this.setState((prevState) => ({
-        correct: prevState.correct + 1,
         timer: 0,
       }));
       Alert.alert('Correct!');
       keywordsList.splice(0, keywordsList.length);
-      this.props.navigation.navigate('12');
+      this.props.navigation.navigate('12', {
+        c: this.state.correct + 1,
+        w: this.state.wrong,
+      });
     } else {
       console.log('wrong');
-      this.setState((prevState) => ({wrong: prevState.wrong + 2, timer: 0}));
+      this.setState((prevState) => ({timer: 0}));
       keywordsList.splice(0, keywordsList.length);
       Alert.alert('Try Again!');
-      this.props.navigation.navigate('12');
+      this.props.navigation.navigate('12', {
+        c: this.state.correct,
+        w: this.state.wrong + 2,
+      });
     }
   };
 
   componentDidMount() {
+    this.setState({
+      correct: this.props.route.params.c,
+      wrong: this.props.route.params.w,
+    });
     this.interval = setInterval(
       () => this.setState((prevState) => ({timer: prevState.timer + 1})),
-      1000,
+      1500,
     );
   }
 

quiz12.js

 /* eslint-disable prettier/prettier */
+/* eslint-disable react/no-did-mount-set-state */
+/* eslint-disable prettier/prettier */
 /* eslint-disable no-unused-vars */
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable prettier/prettier */
@@ -51,6 +53,8 @@ export default class Quiz12 extends Component {
     console.log(keywordsList);
     this.setState({
       timer: 0,
+      correct: 0,
+      wrong: 0,
     });
   };
 
@@ -58,25 +62,34 @@ export default class Quiz12 extends Component {
     console.log(keywordsList.toString());
     if (keywordsList.toString() === 'Bb,C,D,Eb,F,G,A') {
       this.setState((prevState) => ({
-        correct: prevState.correct + 1,
         timer: 0,
       }));
       Alert.alert('Correct!');
       keywordsList.splice(0, keywordsList.length);
-      this.props.navigation.navigate('13');
+      this.props.navigation.navigate('13', {
+        c: this.state.correct + 1,
+        w: this.state.wrong,
+      });
     } else {
       console.log('wrong');
-      this.setState((prevState) => ({wrong: prevState.wrong + 2, timer: 0}));
+      this.setState((prevState) => ({timer: 0}));
       keywordsList.splice(0, keywordsList.length);
       Alert.alert('Try Again!');
-      this.props.navigation.navigate('13');
+      this.props.navigation.navigate('13', {
+        c: this.state.correct,
+        w: this.state.wrong + 2,
+      });
     }
   };
 
   componentDidMount() {
+    this.setState({
+      correct: this.props.route.params.c,
+      wrong: this.props.route.params.w,
+    });
     this.interval = setInterval(
       () => this.setState((prevState) => ({timer: prevState.timer + 1})),
-      1000,
+      1500,
     );
   }
 

quiz13.js

 /* eslint-disable prettier/prettier */
+/* eslint-disable react/no-did-mount-set-state */
+/* eslint-disable prettier/prettier */
 /* eslint-disable no-unused-vars */
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable prettier/prettier */
@@ -27,7 +29,7 @@ export default class Quiz13 extends Component {
   constructor(props: Object) {
     super(props);
     this.state = {
-      timer: 0,
+      timer: 15,
       correct: 0,
       wrong: 0,
       keywordsList: '',
@@ -51,6 +53,8 @@ export default class Quiz13 extends Component {
     console.log(keywordsList);
     this.setState({
       timer: 0,
+      correct: 0,
+      wrong: 0,
     });
   };
 
@@ -58,25 +62,34 @@ export default class Quiz13 extends Component {
     console.log(keywordsList.toString());
     if (keywordsList.toString() === 'Ab,Bb,C,Db,Eb,F,G') {
       this.setState((prevState) => ({
-        correct: prevState.correct + 1,
         timer: 0,
       }));
       Alert.alert('Correct!');
       keywordsList.splice(0, keywordsList.length);
-      this.props.navigation.navigate('14');
+      this.props.navigation.navigate('14', {
+        c: this.state.correct + 1,
+        w: this.state.wrong,
+      });
     } else {
       console.log('wrong');
-      this.setState((prevState) => ({wrong: prevState.wrong + 2, timer: 0}));
+      this.setState((prevState) => ({timer: 0}));
       keywordsList.splice(0, keywordsList.length);
       Alert.alert('Try Again!');
-      this.props.navigation.navigate('14');
+      this.props.navigation.navigate('14', {
+        c: this.state.correct,
+        w: this.state.wrong + 2,
+      });
     }
   };
 
   componentDidMount() {
+    this.setState({
+      correct: this.props.route.params.c,
+      wrong: this.props.route.params.w,
+    });
     this.interval = setInterval(
       () => this.setState((prevState) => ({timer: prevState.timer + 1})),
-      1000,
+      1500,
     );
   }
 

quiz14.js

 /* eslint-disable prettier/prettier */
+/* eslint-disable react/no-did-mount-set-state */
+/* eslint-disable prettier/prettier */
 /* eslint-disable no-unused-vars */
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable prettier/prettier */
@@ -51,6 +53,8 @@ export default class Quiz14 extends Component {
     console.log(keywordsList);
     this.setState({
       timer: 0,
+      correct: 0,
+      wrong: 0,
     });
   };
 
@@ -58,25 +62,34 @@ export default class Quiz14 extends Component {
     console.log(keywordsList.toString());
     if (keywordsList.toString() === 'Gb,Ab,Bb,Cb,Db,F') {
       this.setState((prevState) => ({
-        correct: prevState.correct + 1,
         timer: 0,
       }));
       Alert.alert('Correct!');
       keywordsList.splice(0, keywordsList.length);
-      this.props.navigation.navigate('1');
+      this.props.navigation.navigate('15', {
+        c: this.state.correct + 1,
+        w: this.state.wrong,
+      });
     } else {
       console.log('wrong');
-      this.setState((prevState) => ({wrong: prevState.wrong + 2, timer: 0}));
+      this.setState((prevState) => ({timer: 0}));
       keywordsList.splice(0, keywordsList.length);
       Alert.alert('Try Again!');
-      this.props.navigation.navigate('1');
+      this.props.navigation.navigate('15', {
+        c: this.state.correct,
+        w: this.state.wrong + 2,
+      });
     }
   };
 
   componentDidMount() {
+    this.setState({
+      correct: this.props.route.params.c,
+      wrong: this.props.route.params.w,
+    });
     this.interval = setInterval(
       () => this.setState((prevState) => ({timer: prevState.timer + 1})),
-      1000,
+      1500,
     );
   }
 
@@ -123,7 +136,6 @@ export default class Quiz14 extends Component {
               style={styles.logo}
               source={require('./img/Gflatmajor.png')}
             />
-            <Text style={styles.t}>You clicked {keywordsList.join(' ')}</Text>
           </View>
           <View style={styles.c2}>
             {NOTESWHITE.map((item, id) => (

quiz2.js

 /* eslint-disable prettier/prettier */
+/* eslint-disable react/no-did-mount-set-state */
+/* eslint-disable prettier/prettier */
 /* eslint-disable no-unused-vars */
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable prettier/prettier */
@@ -58,25 +60,34 @@ export default class Quiz2 extends Component {
     console.log(keywordsList.toString());
     if (keywordsList.toString() === 'D,E,F#,G,A,B,C#') {
       this.setState((prevState) => ({
-        correct: prevState.correct + 1,
         timer: 0,
       }));
       Alert.alert('Correct!');
       keywordsList.splice(0, keywordsList.length);
-      this.props.navigation.navigate('3');
+      this.props.navigation.navigate('3', {
+        c: this.state.correct + 1,
+        w: this.state.wrong,
+      });
     } else {
       console.log('wrong');
-      this.setState((prevState) => ({wrong: prevState.wrong + 2, timer: 0}));
+      this.setState((prevState) => ({timer: 0}));
       keywordsList.splice(0, keywordsList.length);
       Alert.alert('Try Again!');
-      this.props.navigation.navigate('3');
+      this.props.navigation.navigate('3', {
+        c: this.state.correct,
+        w: this.state.wrong + 2,
+      });
     }
   };
 
   componentDidMount() {
+    this.setState({
+      correct: this.props.route.params.c,
+      wrong: this.props.route.params.w,
+    });
     this.interval = setInterval(
       () => this.setState((prevState) => ({timer: prevState.timer + 1})),
-      1000,
+      1500,
     );
   }
 

quiz3.js

 /* eslint-disable prettier/prettier */
+/* eslint-disable react/no-did-mount-set-state */
+/* eslint-disable prettier/prettier */
 /* eslint-disable no-unused-vars */
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable prettier/prettier */
@@ -51,6 +53,8 @@ export default class Quiz3 extends Component {
     console.log(keywordsList);
     this.setState({
       timer: 0,
+      correct: 0,
+      wrong: 0,
     });
   };
 
@@ -58,25 +62,34 @@ export default class Quiz3 extends Component {
     console.log(keywordsList.toString());
     if (keywordsList.toString() === 'E,F#,G#,A,B,C#,D#') {
       this.setState((prevState) => ({
-        correct: prevState.correct + 1,
         timer: 0,
       }));
       Alert.alert('Correct!');
       keywordsList.splice(0, keywordsList.length);
-      this.props.navigation.navigate('4');
+      this.props.navigation.navigate('4', {
+        c: this.state.correct + 1,
+        w: this.state.wrong,
+      });
     } else {
       console.log('wrong');
       this.setState((prevState) => ({wrong: prevState.wrong + 2, timer: 0}));
       keywordsList.splice(0, keywordsList.length);
       Alert.alert('Try Again!');
-      this.props.navigation.navigate('4');
+      this.props.navigation.navigate('4', {
+        c: this.state.correct,
+        w: this.state.wrong + 2,
+      });
     }
   };
 
   componentDidMount() {
+    this.setState({
+      correct: this.props.route.params.c,
+      wrong: this.props.route.params.w,
+    });
     this.interval = setInterval(
       () => this.setState((prevState) => ({timer: prevState.timer + 1})),
-      1000,
+      1500,
     );
   }
 

quiz4.js

 /* eslint-disable prettier/prettier */
+/* eslint-disable react/no-did-mount-set-state */
+/* eslint-disable prettier/prettier */
 /* eslint-disable no-unused-vars */
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable prettier/prettier */
@@ -51,6 +53,8 @@ export default class Quiz4 extends Component {
     console.log(keywordsList);
     this.setState({
       timer: 0,
+      correct: 0,
+      wrong: 0,
     });
   };
 
@@ -58,25 +62,34 @@ export default class Quiz4 extends Component {
     console.log(keywordsList.toString());
     if (keywordsList.toString() === 'F#,G#,A#,B,C#,D#,E#') {
       this.setState((prevState) => ({
-        correct: prevState.correct + 1,
         timer: 0,
       }));
       Alert.alert('Correct!');
       keywordsList.splice(0, keywordsList.length);
-      this.props.navigation.navigate('5');
+      this.props.navigation.navigate('5', {
+        c: this.state.correct + 1,
+        w: this.state.wrong,
+      });
     } else {
       console.log('wrong');
-      this.setState((prevState) => ({wrong: prevState.wrong + 2, timer: 0}));
+      this.setState((prevState) => ({timer: 0}));
       keywordsList.splice(0, keywordsList.length);
       Alert.alert('Try Again!');
-      this.props.navigation.navigate('5');
+      this.props.navigation.navigate('5', {
+        c: this.state.correct,
+        w: this.state.wrong + 2,
+      });
     }
   };
 
   componentDidMount() {
+    this.setState({
+      correct: this.props.route.params.c,
+      wrong: this.props.route.params.w,
+    });
     this.interval = setInterval(
       () => this.setState((prevState) => ({timer: prevState.timer + 1})),
-      1000,
+      1500,
     );
   }
 

quiz5.js

 /* eslint-disable prettier/prettier */
+/* eslint-disable react/no-did-mount-set-state */
+/* eslint-disable prettier/prettier */
 /* eslint-disable no-unused-vars */
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable prettier/prettier */
@@ -51,6 +53,8 @@ export default class Quiz5 extends Component {
     console.log(keywordsList);
     this.setState({
       timer: 0,
+      correct: 0,
+      wrong: 0,
     });
   };
 
@@ -58,25 +62,34 @@ export default class Quiz5 extends Component {
     console.log(keywordsList.toString());
     if (keywordsList.toString() === 'F,G,A,Bb,C,D,E') {
       this.setState((prevState) => ({
-        correct: prevState.correct + 1,
         timer: 0,
       }));
       Alert.alert('Correct!');
       keywordsList.splice(0, keywordsList.length);
-      this.props.navigation.navigate('6');
+      this.props.navigation.navigate('6', {
+        c: this.state.correct + 1,
+        w: this.state.wrong,
+      });
     } else {
       console.log('wrong');
-      this.setState((prevState) => ({wrong: prevState.wrong + 2, timer: 0}));
+      this.setState((prevState) => ({timer: 0}));
       keywordsList.splice(0, keywordsList.length);
       Alert.alert('Try Again!');
-      this.props.navigation.navigate('6');
+      this.props.navigation.navigate('6', {
+        c: this.state.correct,
+        w: this.state.wrong + 2,
+      });
     }
   };
 
   componentDidMount() {
+    this.setState({
+      correct: this.props.route.params.c,
+      wrong: this.props.route.params.w,
+    });
     this.interval = setInterval(
       () => this.setState((prevState) => ({timer: prevState.timer + 1})),
-      1000,
+      1500,
     );
   }
 

quiz6.js

 /* eslint-disable prettier/prettier */
+/* eslint-disable react/no-did-mount-set-state */
+/* eslint-disable prettier/prettier */
 /* eslint-disable no-unused-vars */
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable prettier/prettier */
@@ -51,6 +53,8 @@ export default class Quiz6 extends Component {
     console.log(keywordsList);
     this.setState({
       timer: 0,
+      correct: 0,
+      wrong: 0,
     });
   };
 
@@ -58,25 +62,34 @@ export default class Quiz6 extends Component {
     console.log(keywordsList.toString());
     if (keywordsList.toString() === 'Eb,F,G,Ab,Bb,C,D') {
       this.setState((prevState) => ({
-        correct: prevState.correct + 1,
         timer: 0,
       }));
       Alert.alert('Correct!');
       keywordsList.splice(0, keywordsList.length);
-      this.props.navigation.navigate('7');
+      this.props.navigation.navigate('7', {
+        c: this.state.correct + 1,
+        w: this.state.wrong,
+      });
     } else {
       console.log('wrong');
-      this.setState((prevState) => ({wrong: prevState.wrong + 2, timer: 0}));
+      this.setState((prevState) => ({timer: 0}));
       keywordsList.splice(0, keywordsList.length);
       Alert.alert('Try Again!');
-      this.props.navigation.navigate('7');
+      this.props.navigation.navigate('7', {
+        c: this.state.correct,
+        w: this.state.wrong + 2,
+      });
     }
   };
 
   componentDidMount() {
+    this.setState({
+      correct: this.props.route.params.c,
+      wrong: this.props.route.params.w,
+    });
     this.interval = setInterval(
       () => this.setState((prevState) => ({timer: prevState.timer + 1})),
-      1000,
+      1500,
     );
   }
 

quiz7.js

 /* eslint-disable prettier/prettier */
+/* eslint-disable react/no-did-mount-set-state */
+/* eslint-disable prettier/prettier */
 /* eslint-disable no-unused-vars */
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable prettier/prettier */
@@ -51,6 +53,8 @@ export default class Quiz7 extends Component {
     console.log(keywordsList);
     this.setState({
       timer: 0,
+      correct: 0,
+      wrong: 0,
     });
   };
 
@@ -58,25 +62,34 @@ export default class Quiz7 extends Component {
     console.log(keywordsList.toString());
     if (keywordsList.toString() === 'Db,Eb,F,Gb,Ab,Bb,C') {
       this.setState((prevState) => ({
-        correct: prevState.correct + 1,
         timer: 0,
       }));
       Alert.alert('Correct!');
       keywordsList.splice(0, keywordsList.length);
-      this.props.navigation.navigate('8');
+      this.props.navigation.navigate('8', {
+        c: this.state.correct + 1,
+        w: this.state.wrong,
+      });
     } else {
       console.log('wrong');
-      this.setState((prevState) => ({wrong: prevState.wrong + 2, timer: 0}));
+      this.setState((prevState) => ({timer: 0}));
       keywordsList.splice(0, keywordsList.length);
       Alert.alert('Try Again!');
-      this.props.navigation.navigate('8');
+      this.props.navigation.navigate('8', {
+        c: this.state.correct,
+        w: this.state.wrong + 2,
+      });
     }
   };
 
   componentDidMount() {
+    this.setState({
+      correct: this.props.route.params.c,
+      wrong: this.props.route.params.w,
+    });
     this.interval = setInterval(
       () => this.setState((prevState) => ({timer: prevState.timer + 1})),
-      1000,
+      1500,
     );
   }
 

quiz8.js

 /* eslint-disable prettier/prettier */
+/* eslint-disable react/no-did-mount-set-state */
+/* eslint-disable prettier/prettier */
 /* eslint-disable no-unused-vars */
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable prettier/prettier */
@@ -51,6 +53,8 @@ export default class Quiz8 extends Component {
     console.log(keywordsList);
     this.setState({
       timer: 0,
+      correct: 0,
+      wrong: 0,
     });
   };
 
@@ -58,25 +62,34 @@ export default class Quiz8 extends Component {
     console.log(keywordsList.toString());
     if (keywordsList.toString() === 'G,A,B,C,D,E,F#') {
       this.setState((prevState) => ({
-        correct: prevState.correct + 1,
         timer: 0,
       }));
       Alert.alert('Correct!');
       keywordsList.splice(0, keywordsList.length);
-      this.props.navigation.navigate('9');
+      this.props.navigation.navigate('9', {
+        c: this.state.correct + 1,
+        w: this.state.wrong,
+      });
     } else {
       console.log('wrong');
-      this.setState((prevState) => ({wrong: prevState.wrong + 2, timer: 0}));
+      this.setState((prevState) => ({timer: 0}));
       keywordsList.splice(0, keywordsList.length);
       Alert.alert('Try Again!');
-      this.props.navigation.navigate('9');
+      this.props.navigation.navigate('9', {
+        c: this.state.correct,
+        w: this.state.wrong + 2,
+      });
     }
   };
 
   componentDidMount() {
+    this.setState({
+      correct: this.props.route.params.c,
+      wrong: this.props.route.params.w,
+    });
     this.interval = setInterval(
       () => this.setState((prevState) => ({timer: prevState.timer + 1})),
-      1000,
+      1500,
     );
   }
 

quiz9.js

 /* eslint-disable prettier/prettier */
+/* eslint-disable react/no-did-mount-set-state */
+/* eslint-disable prettier/prettier */
 /* eslint-disable no-unused-vars */
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable prettier/prettier */
@@ -51,6 +53,8 @@ export default class Quiz9 extends Component {
     console.log(keywordsList);
     this.setState({
       timer: 0,
+      correct: 0,
+      wrong: 0,
     });
   };
 
@@ -58,25 +62,34 @@ export default class Quiz9 extends Component {
     console.log(keywordsList.toString());
     if (keywordsList.toString() === 'A,B,C#,D,E,F#,G#') {
       this.setState((prevState) => ({
-        correct: prevState.correct + 1,
         timer: 0,
       }));
       Alert.alert('Correct!');
       keywordsList.splice(0, keywordsList.length);
-      this.props.navigation.navigate('10');
+      this.props.navigation.navigate('10', {
+        c: this.state.correct + 1,
+        w: this.state.wrong,
+      });
     } else {
       console.log('wrong');
-      this.setState((prevState) => ({wrong: prevState.wrong + 2, timer: 0}));
+      this.setState((prevState) => ({timer: 0}));
       keywordsList.splice(0, keywordsList.length);
       Alert.alert('Try Again!');
-      this.props.navigation.navigate('10');
+      this.props.navigation.navigate('10', {
+        c: this.state.correct,
+        w: this.state.wrong + 2,
+      });
     }
   };
 
   componentDidMount() {
+    this.setState({
+      correct: this.props.route.params.c,
+      wrong: this.props.route.params.w,
+    });
     this.interval = setInterval(
       () => this.setState((prevState) => ({timer: prevState.timer + 1})),
-      1000,
+      1500,
     );
   }
 
@@ -120,7 +133,6 @@ export default class Quiz9 extends Component {
               </Text>
             </View>
             <Image style={styles.logo} source={require('./img/Amajor.png')} />
-            <Text style={styles.t}>You clicked {keywordsList.join(' ')}</Text>
           </View>
           <View style={styles.c2}>
             {NOTESWHITE.map((item, id) => (

style.js

@@ -230,4 +230,13 @@ export default StyleSheet.create({
     marginLeft: 289,
     position: 'absolute',
   },
+  boxScore: {
+    alignContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'white',
+    padding: 50,
+    marginTop: '50%',
+    marginBottom: '10%',
+    borderRadius: 30,
+  },
 });

totalScore.js

+/* eslint-disable prettier/prettier */
+/* eslint-disable react/no-did-mount-set-state */
+/* eslint-disable prettier/prettier */
+/* eslint-disable no-unused-vars */
+/* eslint-disable react-native/no-inline-styles */
+/* eslint-disable prettier/prettier */
+import React, {Component} from 'react';
+import {
+  Text,
+  View,
+  StyleSheet,
+  TouchableHighlight,
+  ImageBackground,
+  Image,
+  Button,
+  Alert,
+} from 'react-native';
+import styles from './style.js';
+import {useNavigation} from '@react-navigation/native';
+const NOTESWHITE = ['C', 'D', 'E', 'F', 'G', 'A', 'Cb'];
+const NOTESCC = ['Db'];
+const NOTESDD = ['Eb'];
+const NOTESFF = ['Gb'];
+const NOTESGG = ['Ab'];
+const NOTESAA = ['Bb'];
+const keywordsList = [];
+
+export default class TotalScore extends Component {
+  constructor(props: Object) {
+    super(props);
+    this.state = {
+      timer: 0,
+      correct: 0,
+      wrong: 0,
+      keywordsList: '',
+    };
+  }
+  toggleKeyword = (keyword) => {
+    let list = keywordsList;
+    let index = -1;
+    if ((index = keywordsList.indexOf(keyword)) !== -1) {
+      list.splice(index, 1);
+      console.log(list);
+    } else {
+      list.push(keyword);
+      console.log(list);
+    }
+    this.setState({keywordsList: list});
+  };
+
+  removeArray = () => {
+    keywordsList.splice(0, keywordsList.length);
+    console.log(keywordsList);
+    this.setState({
+      timer: 0,
+    });
+  };
+
+  onSubmit = () => {
+    console.log(keywordsList.toString());
+    if (keywordsList.toString() === 'Gb,Ab,Bb,Cb,Db,F') {
+      this.setState((prevState) => ({
+        correct: prevState.correct + 1,
+        timer: 0,
+      }));
+      Alert.alert('Correct!');
+      keywordsList.splice(0, keywordsList.length);
+      this.props.navigation.navigate('1', {
+        c: this.state.correct + 1,
+        w: this.state.wrong,
+      });
+    } else {
+      console.log('wrong');
+      this.setState((prevState) => ({wrong: prevState.wrong + 2, timer: 0}));
+      keywordsList.splice(0, keywordsList.length);
+      Alert.alert('Try Again!');
+      this.props.navigation.navigate('1', {
+        c: this.state.correct + 1,
+        w: this.state.wrong,
+      });
+    }
+  };
+
+  componentDidMount() {
+    this.setState({
+      correct: this.props.route.params.c,
+      wrong: this.props.route.params.w,
+    });
+    this.interval = setInterval(
+      () => this.setState((prevState) => ({timer: prevState.timer + 1})),
+      1500,
+    );
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+  ';';
+
+  render() {
+    const {
+      container1,
+      selectedKeywordStyle,
+      buttonStyle,
+      textStyle,
+      buttonB1,
+      buttonB2,
+      buttonB3,
+      buttonB4,
+      buttonB5,
+      SbuttonB1,
+      SbuttonB2,
+      SbuttonB3,
+      SbuttonB4,
+      SbuttonB5,
+    } = styles;
+    return (
+      <View style={styles.container}>
+        <ImageBackground
+          source={require('./img/background.jpg')}
+          style={{width: '100%', height: '100%'}}>
+          <View style={styles.c1}>
+            <View style={styles.boxScore}>
+              <Text style={{fontSize: 20}}>Total Score </Text>
+              <Text>Correct :{this.state.correct}</Text>
+              <Text>Wrong :{this.state.wrong}</Text>
+            </View>
+            <Button
+              title="START AGAIN"
+              color="#E07EF9"
+              onPress={() => this.props.navigation.navigate('1')}
+            />
+          </View>
+        </ImageBackground>
+      </View>
+    );
+  }
+}