Merge branch 'master' of http://gitlab.sliit.lk/21_22-j-38/21_22j-38 into it18218640

backend/IT18256888/app.py

@@ -60,13 +60,14 @@ def get_level():
     results=[{"level":float(result)}]
     return (jsonify(results=results))
 
-userpass = 'mysql://root:''@'
-basedir = '127.0.0.1'
-dbname = '/helply'
-socket = '?unix_socket=/opt/lampp/var/mysql/mysql.sock'
-dbname = dbname + socket
-
-app.config['SQLALCHEMY_DATABASE_URI'] = userpass + basedir + dbname
+# userpass = 'mysql://root:''@'
+# basedir = '127.0.0.1'
+# dbname = '/helply'
+# socket = '?unix_socket=/opt/lampp/var/mysql/mysql.sock'
+# dbname = dbname + socket
+
+# app.config['SQLALCHEMY_DATABASE_URI'] = userpass + basedir + dbname
+app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://sql5488870:UylH12yrME@sql5.freesqldatabase.com/sql5488870'
 app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
 
 #DB Connection

frontend/src/constants/Countdown.js

+export default {
+    elementry: 5,
+    average: 3,
+    hard: 3
+}
\ No newline at end of file

frontend/src/constants/endpoint.js

+export default api = 'http://192.168.8.170:5000'
\ No newline at end of file

frontend/src/memory/data/elementry-level.js

+import Gamedataone from '../models/gamedataone';
+
+export const SCREEN1 = [
+    new Gamedataone(1, 'q1', 0, require('../../memory/images/elementry/1/el1.jpg')),
+    new Gamedataone(2, 'q1', 0, require('../../memory/images/elementry/1/el2.jpg')),
+    new Gamedataone(3, 'q1', 0, require('../../memory/images/elementry/1/el4.jpg')),
+    new Gamedataone(4, 'q1', 0, require('../../memory/images/elementry/1/el5.jpg')),
+    new Gamedataone(5, 'q1', 0, require('../../memory/images/elementry/1/el6.jpg')),
+    new Gamedataone(6, 'q1', 1, require('../../memory/images/elementry/1/elmain.jpeg')),
+    new Gamedataone(7, 'q1', 0, require('../../memory/images/elementry/1/el7.jpg')),
+    new Gamedataone(8, 'q1', 0, require('../../memory/images/elementry/1/el3.jpg')),
+];
+
+export const SCREEN2 = [
+    new Gamedataone(1, 'q2', 0, require('../../memory/images/elementry/2/el-ball8.jpg')),
+    new Gamedataone(2, 'q2', 0, require('../../memory/images/elementry/2/el-ball2.jpg')),
+    new Gamedataone(3, 'q2', 0, require('../../memory/images/elementry/2/el-ball3.jpg')),
+    new Gamedataone(4, 'q2', 1, require('../../memory/images/elementry/2/el-ball1-main.jpg')),
+    new Gamedataone(5, 'q2', 0, require('../../memory/images/elementry/2/el-ball4.jpg')),
+    new Gamedataone(6, 'q2', 0, require('../../memory/images/elementry/2/el-ball5.jpg')),
+    new Gamedataone(7, 'q2', 0, require('../../memory/images/elementry/2/el-ball6.jpg')),
+    new Gamedataone(8, 'q2', 0, require('../../memory/images/elementry/2/el-ball7.jpg')),
+];
+
+export const SCREEN3 = [
+    new Gamedataone(1, 'q3', 0, require('../../memory/images/elementry/3/el-flo8.jpg')),
+    new Gamedataone(2, 'q3', 0, require('../../memory/images/elementry/3/el-flo2.jpg')),
+    new Gamedataone(3, 'q3', 1, require('../../memory/images/elementry/3/el-flo1-main.jpg')),
+    new Gamedataone(4, 'q3', 0, require('../../memory/images/elementry/3/el-flo3.jpg')),
+    new Gamedataone(5, 'q3', 0, require('../../memory/images/elementry/3/el-flo4.jpg')),
+    new Gamedataone(6, 'q3', 0, require('../../memory/images/elementry/3/el-flo5.jpg')),
+    new Gamedataone(7, 'q3', 0, require('../../memory/images/elementry/3/el-flo6.jpg')),
+    new Gamedataone(8, 'q3', 0, require('../../memory/images/elementry/3/el-flo7.jpg')),
+];
+
+export const SCREEN4 = [
+    new Gamedataone(1, 'q4', 0, require('../../memory/images/elementry/4/el-car8.jpg')),
+    new Gamedataone(2, 'q4', 0, require('../../memory/images/elementry/4/el-car2.jpg')),
+    new Gamedataone(3, 'q4', 0, require('../../memory/images/elementry/4/el-car3.jpg')),
+    new Gamedataone(4, 'q4', 0, require('../../memory/images/elementry/4/el-car4.jpg')),
+    new Gamedataone(5, 'q4', 0, require('../../memory/images/elementry/4/el-car5.jpg')),
+    new Gamedataone(6, 'q4', 0, require('../../memory/images/elementry/4/el-car6.jpg')),
+    new Gamedataone(7, 'q4', 1, require('../../memory/images/elementry/4/el-car1-main.jpg')),
+    new Gamedataone(8, 'q4', 0, require('../../memory/images/elementry/4/el-car7.jpg')),
+];
+
+export const SCREEN5 = [
+    new Gamedataone(1, 'q5', 0, require('../../memory/images/elementry/5/el-fish8.jpg')),
+    new Gamedataone(2, 'q5', 0, require('../../memory/images/elementry/5/el-fish2.jpg')),
+    new Gamedataone(3, 'q5', 0, require('../../memory/images/elementry/5/el-fish3.jpg')),
+    new Gamedataone(4, 'q5', 0, require('../../memory/images/elementry/5/el-fish4.jpg')),
+    new Gamedataone(5, 'q5', 0, require('../../memory/images/elementry/5/el-fish5.jpg')),
+    new Gamedataone(6, 'q5', 0, require('../../memory/images/elementry/5/el-fish6.jpg')),
+    new Gamedataone(7, 'q5', 0, require('../../memory/images/elementry/5/el-fish7.jpg')),
+    new Gamedataone(8, 'q5', 1, require('../../memory/images/elementry/5/el-fish1-main.jpg')),
+];
+
+export const SCREEN6 = [
+    new Gamedataone(1, 'q6', 0, require('../../memory/images/elementry/6/el-kite6.jpg')),
+    new Gamedataone(2, 'q6', 0, require('../../memory/images/elementry/6/el-kite2.jpg')),
+    new Gamedataone(3, 'q6', 0, require('../../memory/images/elementry/6/el-kite3.jpg')),
+    new Gamedataone(4, 'q6', 0, require('../../memory/images/elementry/6/el-kite4.jpg')),
+    new Gamedataone(5, 'q6', 0, require('../../memory/images/elementry/6/el-kite5.jpg')),
+    new Gamedataone(6, 'q6', 1, require('../../memory/images/elementry/6/el-kite1-main.jpg')),
+    new Gamedataone(7, 'q6', 0, require('../../memory/images/elementry/6/el-kite7.jpg')),
+    new Gamedataone(8, 'q6', 0, require('../../memory/images/elementry/6/el-kite8.jpg')),
+];
\ No newline at end of file

frontend/src/memory/models/gamedataone.js

+class Gamedataone{
+    constructor(id, question, answer, source){
+        this.id = id,
+        this.question = question,
+        this.answer = answer,
+        this.source = source
+    }
+}
+
+export default Gamedataone;
\ No newline at end of file

frontend/src/router/router.js

@@ -7,7 +7,7 @@ import Home from '../screen/home';
 import Start from '../screen/Start';
 import Register from '../screen/auth/Register';
 import Login from '../screen/auth/Login';
-import Splash from '../screen/splash/Splash';
+import Splash from '../screen/splash/splash';
 import Color from '../screen/Color';
 import Blue from '../screen/activity/Blue';
 import Blue2 from '../screen/activity/Blue2';

frontend/src/screen/memory/GameOverScreen.js

@@ -3,6 +3,7 @@ import {View, Text, StyleSheet, Button, Image} from 'react-native';
 import Colors from '../../constants/Colors';
 import { useDispatch, useSelector } from 'react-redux'; 
 import * as memoryActions from '../../store/actions/memory';
+import endpoint from '../../constants/endpoint';
 
 const GameOverScreen = ({navigation}) => {
 
@@ -47,7 +48,7 @@ const GameOverScreen = ({navigation}) => {
     }
 
     const sendData = () => {
-        fetch(`http://192.168.8.170:5000/get_level?q1=${encodeURIComponent(gameData.q1)}&q2=${encodeURIComponent(gameData.q2)}&q3=${encodeURIComponent(gameData.q3)}&q4=${encodeURIComponent(gameData.q4)}&q5=${encodeURIComponent(gameData.q5)}&q6=${encodeURIComponent(gameData.q6)}&time=${encodeURIComponent(gameData.time)}`,{
+        fetch(`${endpoint}/get_level?q1=${encodeURIComponent(gameData.q1)}&q2=${encodeURIComponent(gameData.q2)}&q3=${encodeURIComponent(gameData.q3)}&q4=${encodeURIComponent(gameData.q4)}&q5=${encodeURIComponent(gameData.q5)}&q6=${encodeURIComponent(gameData.q6)}&time=${encodeURIComponent(gameData.time)}`,{
             method: 'GET'
         })
         .then(resp => resp.json())
@@ -68,7 +69,7 @@ const GameOverScreen = ({navigation}) => {
     }
 
     const insertData = () => {
-         fetch('http://192.168.8.170:5000/add', {
+         fetch(`${endpoint}/add`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'

frontend/src/screen/memory/elementry/GameScreenFive.js

 import React, {useState, useEffect} from 'react';
 import {View, Text, StyleSheet, Image} from 'react-native';
 import CountDown from 'react-native-countdown-component';
+import Countdown from '../../../constants/Countdown';
 
 const GameScreenFive = ({navigation}) => {
     
@@ -15,7 +16,7 @@ const GameScreenFive = ({navigation}) => {
                 </View>
                 <CountDown
                     size={40}
-                    until={5}
+                    until={Countdown.elementry}
                     // onFinish={() => alert('Finished')}
                     onFinish={() => navigation.navigate('GameScreenFiveAll')}
                     digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}

frontend/src/screen/memory/elementry/GameScreenFiveAll.js

 import React,{useState,useEffect} from 'react';
-import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
+import {View, Text, StyleSheet, Image, TouchableOpacity, FlatList} from 'react-native';
 import { useDispatch } from 'react-redux';
 import * as memoryActions from '../../../store/actions/memory'
+import { SCREEN5 } from '../../../memory/data/elementry-level';
+
+let gameData = SCREEN5.sort((item)=>Math.random(item.id)-0.5);
 
 const GameScreenFiveAll = ({navigation}) => {
 
+    const shuffle = () => {
+        gameData = SCREEN5.sort((item)=>Math.random(item.id)-0.5);
+    };
+
+    if(gameData.length == 0){
+        shuffle();
+    }
+
     const dispatch = useDispatch();
 
     const [time, setTime] = useState(0);
@@ -25,40 +36,22 @@ const GameScreenFiveAll = ({navigation}) => {
     
       },[timerOn]);
 
+      const renderImageItem = (itemData) => {
+        return(
+            <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('GameScreenSix')}}>
+                <Image style={styles.image}  source={itemData.item.source}/>
+            </TouchableOpacity>
+        )
+      }
+
     return(
         <View style={styles.screen}>
-            <View style={styles.imageContainer}>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q5', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q5', time: time})); navigation.navigate('GameScreenSix')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/5/el-fish8.jpg')}/>
-                </TouchableOpacity>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q5', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q5', time: time})); navigation.navigate('GameScreenSix')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/5/el-fish2.jpg')}/>
-                </TouchableOpacity>
-            </View>
-            <View style={styles.imageContainer}>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q5', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q5', time: time})); navigation.navigate('GameScreenSix')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/5/el-fish3.jpg')}/>
-                </TouchableOpacity>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q5', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q5', time: time})); navigation.navigate('GameScreenSix')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/5/el-fish4.jpg')}/>
-                </TouchableOpacity>
-            </View>
-            <View style={styles.imageContainer}>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q5', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q5', time: time})); navigation.navigate('GameScreenSix')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/5/el-fish5.jpg')}/>
-                </TouchableOpacity>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q5', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q5', time: time})); navigation.navigate('GameScreenSix')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/5/el-fish6.jpg')}/>
-                </TouchableOpacity>
-            </View>
-            <View style={styles.imageContainer}>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q5', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q5', time: time})); navigation.navigate('GameScreenSix')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/5/el-fish7.jpg')}/>
-                </TouchableOpacity>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q5', answer: 1})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q5', time: time})); navigation.navigate('GameScreenSix')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/5/el-fish1-main.jpg')}/>
-                </TouchableOpacity>
-            </View>
+            <FlatList
+                keyExtractor={(item, data)=>item.id}
+                data={gameData}
+                renderItem={renderImageItem}
+                numColumns={2}
+            />
         </View>
     );
 }

frontend/src/screen/memory/elementry/GameScreenFour.js

 import React, {useState, useEffect} from 'react';
 import {View, Text, StyleSheet, Image} from 'react-native';
 import CountDown from 'react-native-countdown-component';
+import Countdown from '../../../constants/Countdown';
 
 const GameScreenFour = ({navigation}) => {
 
@@ -22,7 +23,7 @@ const GameScreenFour = ({navigation}) => {
                 <Text style={styles.imageText}>Car - කාරය</Text>
                 <CountDown
                     size={40}
-                    until={5}
+                    until={Countdown.elementry}
                     // onFinish={() => alert('Finished')}
                     onFinish={() => navigation.navigate('GameScreenFourAll')}
                     digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}

frontend/src/screen/memory/elementry/GameScreenFourAll.js

 import React,{useState,useEffect} from 'react';
-import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
+import {View, Text, StyleSheet, Image, TouchableOpacity, FlatList} from 'react-native';
 import { useDispatch } from 'react-redux';
 import * as memoryActions from '../../../store/actions/memory'
+import { SCREEN4 } from '../../../memory/data/elementry-level';
+
+let gameData = SCREEN4.sort((item)=>Math.random(item.id)-0.5);
 
 const GameScreenFourAll = ({navigation}) => {
 
+    const shuffle = () => {
+        gameData = SCREEN4.sort((item)=>Math.random(item.id)-0.5);
+    };
+
+    if(gameData.length == 0){
+        shuffle();
+    }
+
     const dispatch = useDispatch();
 
     const [time, setTime] = useState(0);
@@ -25,40 +36,22 @@ const GameScreenFourAll = ({navigation}) => {
     
       },[timerOn]);
 
+      const renderImageItem = (itemData) => {
+        return(
+            <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('GameScreenFive')}}>
+                <Image style={styles.image}  source={itemData.item.source}/>
+            </TouchableOpacity>
+        )
+      }
+
     return(
         <View style={styles.screen}>
-            <View style={styles.imageContainer}>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q4', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q4', time: time})); navigation.navigate('GameScreenFive')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/4/el-car8.jpg')}/>
-                </TouchableOpacity>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q4', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q4', time: time})); navigation.navigate('GameScreenFive')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/4/el-car2.jpg')}/>
-                </TouchableOpacity>
-            </View>
-            <View style={styles.imageContainer}>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q4', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q4', time: time})); navigation.navigate('GameScreenFive')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/4/el-car3.jpg')}/>
-                </TouchableOpacity>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q4', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q4', time: time})); navigation.navigate('GameScreenFive')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/4/el-car4.jpg')}/>
-                </TouchableOpacity>
-            </View>
-            <View style={styles.imageContainer}>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q4', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q4', time: time})); navigation.navigate('GameScreenFive')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/4/el-car5.jpg')}/>
-                </TouchableOpacity>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q4', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q4', time: time})); navigation.navigate('GameScreenFive')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/4/el-car6.jpg')}/>
-                </TouchableOpacity>
-            </View>
-            <View style={styles.imageContainer}>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q4', answer: 1})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q4', time: time})); navigation.navigate('GameScreenFive')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/4/el-car1-main.jpg')}/>
-                </TouchableOpacity>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q4', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q4', time: time})); navigation.navigate('GameScreenFive')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/4/el-car7.jpg')}/>
-                </TouchableOpacity>
-            </View>
+            <FlatList
+                keyExtractor={(item, data)=>item.id}
+                data={gameData}
+                renderItem={renderImageItem}
+                numColumns={2}
+            />
         </View>
     );
 }

frontend/src/screen/memory/elementry/GameScreenOne.js

@@ -5,6 +5,7 @@ import CountDown from 'react-native-countdown-component';
 import {useDispatch} from 'react-redux';
 import * as memoryActions from '../../../store/actions/memory';
 import Levels from '../../../constants/Levels';
+import Countdown from '../../../constants/Countdown';
 
 const GameScreenOne = ({navigation}) => {
 
@@ -31,7 +32,7 @@ const GameScreenOne = ({navigation}) => {
             <Text style={styles.imageText}>Pencil - පැන්සල</Text>
             <CountDown
                 size={40}
-                until={5}
+                until={Countdown.elementry}
                 // onFinish={() => alert('Finished')}
                 onFinish={() => navigation.navigate('GameScreenOneAll')}
                 digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}

frontend/src/screen/memory/elementry/GameScreenOneAll.js

 import React,{useEffect, useState} from 'react';
-import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
+import {View, Text, StyleSheet, Image, TouchableOpacity, FlatList} from 'react-native';
 import {useSelector, useDispatch} from 'react-redux';
-import * as memoryActions from '../../../store/actions/memory'
+import * as memoryActions from '../../../store/actions/memory';
+import { SCREEN1 } from '../../../memory/data/elementry-level';
 
+let gameData = SCREEN1.sort((item)=>Math.random(item.id)-0.5);
 
 const GameScreenOneAll = ({navigation}) => {
 
+    const shuffle = () => {
+        gameData = SCREEN1.sort((item)=>Math.random(item.id)-0.5);
+    };
+
+    if(gameData.length == 0){
+        shuffle();
+    }
+
     const dispatch = useDispatch();
 
     const [time, setTime] = useState(0);
@@ -26,40 +36,22 @@ const GameScreenOneAll = ({navigation}) => {
     
       },[timerOn]);
 
+      const renderImageItem = (itemData) => {
+        return(
+            <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = [];navigation.navigate('GameScreenTwo')}}>
+                <Image style={styles.image}  source={itemData.item.source}/>
+            </TouchableOpacity>
+        )
+      }
+
     return(
         <View style={styles.screen}>
-            <View style={styles.imageContainer}>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q1', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q1', time: time})); navigation.navigate('GameScreenTwo')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/1/el1.jpg')}/>
-                </TouchableOpacity>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q1', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q1', time: time})); navigation.navigate('GameScreenTwo')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/1/el2.jpg')}/>
-                </TouchableOpacity>
-            </View>
-            <View style={styles.imageContainer}>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q1', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q1', time: time})); navigation.navigate('GameScreenTwo')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/1/el4.jpg')}/>
-                </TouchableOpacity>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q1', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q1', time: time})); navigation.navigate('GameScreenTwo')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/1/el5.jpg')}/>
-                </TouchableOpacity>
-            </View>
-            <View style={styles.imageContainer}>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q1', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q1', time: time})); navigation.navigate('GameScreenTwo')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/1/el6.jpg')}/>
-                </TouchableOpacity>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q1', answer: 1})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q1', time: time})); navigation.navigate('GameScreenTwo')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/1/elmain.jpeg')}/>
-                </TouchableOpacity>
-            </View>
-            <View style={styles.imageContainer}>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q1', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q1', time: time})); navigation.navigate('GameScreenTwo')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/1/el7.jpg')}/>
-                </TouchableOpacity>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q1', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q1', time: time})); navigation.navigate('GameScreenTwo')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/1/el3.jpg')}/>
-                </TouchableOpacity>
-            </View>
+            <FlatList
+                keyExtractor={(item, data)=>item.id}
+                data={gameData}
+                renderItem={renderImageItem}
+                numColumns={2}
+            />
         </View>
     );
 }
@@ -68,7 +60,6 @@ const styles = StyleSheet.create({
     screen: {
         flex: 1,
         padding: 10,
-        alignItems: 'center'
     },
     imageItem: {
         width: '48%',

frontend/src/screen/memory/elementry/GameScreenSix.js

 import React, {useState, useEffect} from 'react';
 import {View, Text, StyleSheet, Image} from 'react-native';
 import CountDown from 'react-native-countdown-component';
+import Countdown from '../../../constants/Countdown';
 
 const GameScreenSix = ({navigation}) => {
     
@@ -16,7 +17,7 @@ const GameScreenSix = ({navigation}) => {
                 <Text style={styles.imageText}>Pencil - පැන්සල</Text>
                 <CountDown
                     size={40}
-                    until={5}
+                    until={Countdown.elementry}
                     // onFinish={() => alert('Finished')}
                     onFinish={() => navigation.navigate('GameScreenSixAll')}
                     digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}

frontend/src/screen/memory/elementry/GameScreenSixAll.js

 import React,{useState,useEffect} from 'react';
-import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
+import {View, Text, StyleSheet, Image, TouchableOpacity, FlatList} from 'react-native';
 import { useDispatch } from 'react-redux';
 import * as memoryActions from '../../../store/actions/memory';
+import { SCREEN6 } from '../../../memory/data/elementry-level';
+
+let gameData = SCREEN6.sort((item)=>Math.random(item.id)-0.5);
 
 const GameScreenSixAll = ({navigation}) => {
 
+    const shuffle = () => {
+        gameData = SCREEN6.sort((item)=>Math.random(item.id)-0.5);
+    };
+
+    if(gameData.length == 0){
+        shuffle();
+    }
+
     const dispatch = useDispatch();
 
     const [time, setTime] = useState(0);
@@ -25,40 +36,22 @@ const GameScreenSixAll = ({navigation}) => {
     
       },[timerOn]);
 
+      const renderImageItem = (itemData) => {
+        return(
+            <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('GameOverScreen')}}>
+                <Image style={styles.image}  source={itemData.item.source}/>
+            </TouchableOpacity>
+        )
+      }
+
     return(
         <View style={styles.screen}>
-            <View style={styles.imageContainer}>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q6', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q6', time: time})); navigation.navigate('GameOverScreen')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/6/el-kite6.jpg')}/>
-                </TouchableOpacity>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q6', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q6', time: time})); navigation.navigate('GameOverScreen')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/6/el-kite2.jpg')}/>
-                </TouchableOpacity>
-            </View>
-            <View style={styles.imageContainer}>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q6', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q6', time: time})); navigation.navigate('GameOverScreen')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/6/el-kite3.jpg')}/>
-                </TouchableOpacity>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q6', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q6', time: time})); navigation.navigate('GameOverScreen')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/6/el-kite4.jpg')}/>
-                </TouchableOpacity>
-            </View>
-            <View style={styles.imageContainer}>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q6', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q6', time: time})); navigation.navigate('GameOverScreen')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/6/el-kite5.jpg')}/>
-                </TouchableOpacity>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q6', answer: 1})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q6', time: time})); navigation.navigate('GameOverScreen')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/6/el-kite1-main.jpg')}/>
-                </TouchableOpacity>
-            </View>
-            <View style={styles.imageContainer}>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q6', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q6', time: time})); navigation.navigate('GameOverScreen')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/6/el-kite7.jpg')}/>
-                </TouchableOpacity>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q6', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q6', time: time})); navigation.navigate('GameOverScreen')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/6/el-kite8.jpg')}/>
-                </TouchableOpacity>
-            </View>
+            <FlatList
+                keyExtractor={(item, data)=>item.id}
+                data={gameData}
+                renderItem={renderImageItem}
+                numColumns={2}
+            />
         </View>
     );
 }

frontend/src/screen/memory/elementry/GameScreenThree.js

 import React, {useState, useEffect} from 'react';
 import {View, Text, StyleSheet, Image} from 'react-native';
 import CountDown from 'react-native-countdown-component';
+import Countdown from '../../../constants/Countdown';
 
 const GameScreenThree = ({navigation}) => {
     
@@ -16,7 +17,7 @@ const GameScreenThree = ({navigation}) => {
                 <Text style={styles.imageText}>Flower - මල</Text>
                 <CountDown
                     size={40}
-                    until={5}
+                    until={Countdown.elementry}
                     // onFinish={() => alert('Finished')}
                     onFinish={() => navigation.navigate('GameScreenThreeAll')}
                     digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}

frontend/src/screen/memory/elementry/GameScreenThreeAll.js

 import React,{useState,useEffect} from 'react';
-import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
+import {View, Text, StyleSheet, Image, TouchableOpacity, FlatList} from 'react-native';
 import { useDispatch } from 'react-redux'; 
 import * as memoryActions from '../../../store/actions/memory';
+import { SCREEN3 } from '../../../memory/data/elementry-level';
+
+let gameData = SCREEN3.sort((item)=>Math.random(item.id)-0.5);
 
 const GameScreenThreeAll = ({navigation}) => {
 
+    const shuffle = () => {
+        gameData = SCREEN3.sort((item)=>Math.random(item.id)-0.5);
+    };
+
+    if(gameData.length == 0){
+        shuffle();
+    }
+
     const dispatch = useDispatch();
 
     const [time, setTime] = useState(0);
@@ -25,40 +36,22 @@ const GameScreenThreeAll = ({navigation}) => {
     
       },[timerOn]);
 
+      const renderImageItem = (itemData) => {
+        return(
+            <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('GameScreenFour')}}>
+                <Image style={styles.image}  source={itemData.item.source}/>
+            </TouchableOpacity>
+        )
+      }
+
     return(
         <View style={styles.screen}>
-            <View style={styles.imageContainer}>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q3', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q3', time: time})); navigation.navigate('GameScreenFour')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/3/el-flo8.jpg')}/>
-                </TouchableOpacity>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q3', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q3', time: time})); navigation.navigate('GameScreenFour')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/3/el-flo2.jpg')}/>
-                </TouchableOpacity>
-            </View>
-            <View style={styles.imageContainer}>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q3', answer: 1})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q3', time: time})); navigation.navigate('GameScreenFour')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/3/el-flo1-main.jpg')}/>
-                </TouchableOpacity>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q3', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q3', time: time})); navigation.navigate('GameScreenFour')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/3/el-flo3.jpg')}/>
-                </TouchableOpacity>
-            </View>
-            <View style={styles.imageContainer}>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q3', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q3', time: time})); navigation.navigate('GameScreenFour')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/3/el-flo4.jpg')}/>
-                </TouchableOpacity>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q3', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q3', time: time})); navigation.navigate('GameScreenFour')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/3/el-flo5.jpg')}/>
-                </TouchableOpacity>
-            </View>
-            <View style={styles.imageContainer}>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q3', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q3', time: time})); navigation.navigate('GameScreenFour')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/3/el-flo6.jpg')}/>
-                </TouchableOpacity>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q3', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q3', time: time})); navigation.navigate('GameScreenFour')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/3/el-flo7.jpg')}/>
-                </TouchableOpacity>
-            </View>
+            <FlatList
+                keyExtractor={(item, data)=>item.id}
+                data={gameData}
+                renderItem={renderImageItem}
+                numColumns={2}
+            />
         </View>
     );
 }

frontend/src/screen/memory/elementry/GameScreenTwo.js

 import React, {useState, useEffect} from 'react';
 import {View, Text, StyleSheet, Image} from 'react-native';
 import CountDown from 'react-native-countdown-component';
+import Countdown from '../../../constants/Countdown';
 
 const GameScreenTwo = ({navigation}) => {
     
@@ -16,7 +17,7 @@ const GameScreenTwo = ({navigation}) => {
                 <Text style={styles.imageText}>Ball - බෝලය</Text>
                 <CountDown
                     size={40}
-                    until={5}
+                    until={Countdown.elementry}
                     // onFinish={() => alert('Finished')}
                     onFinish={() => navigation.navigate('GameScreenTwoAll')}
                     digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}

frontend/src/screen/memory/elementry/GameScreenTwoAll.js

 import { NavigationContainer } from '@react-navigation/native';
 import React, {useState,useEffect} from 'react';
-import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
+import {View, Text, StyleSheet, Image, TouchableOpacity,FlatList} from 'react-native';
 import { useDispatch } from 'react-redux'; 
 import * as memoryActions from '../../../store/actions/memory'
+import { SCREEN2 } from '../../../memory/data/elementry-level';
+
+let gameData = SCREEN2.sort((item)=>Math.random(item.id)-0.5);
 
 const GameScreenTwoAll = ({navigation}) => {
 
+    const shuffle = () => {
+        gameData = SCREEN2.sort((item)=>Math.random(item.id)-0.5);
+    };
+
+    if(gameData.length == 0){
+        shuffle();
+    }
+
     const dispatch = useDispatch();
 
     const [time, setTime] = useState(0);
@@ -26,40 +37,22 @@ const GameScreenTwoAll = ({navigation}) => {
     
       },[timerOn]);
 
+      const renderImageItem = (itemData) => {
+        return(
+            <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('GameScreenThree')}}>
+                <Image style={styles.image}  source={itemData.item.source}/>
+            </TouchableOpacity>
+        )
+      }
+
     return(
         <View style={styles.screen}>
-            <View style={styles.imageContainer}>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q2', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q2', time: time})); navigation.navigate('GameScreenThree')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/2/el-ball8.jpg')}/>
-                </TouchableOpacity>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q2', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q2', time: time})); navigation.navigate('GameScreenThree')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/2/el-ball2.jpg')}/>
-                </TouchableOpacity>
-            </View>
-            <View style={styles.imageContainer}>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q2', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q2', time: time})); navigation.navigate('GameScreenThree')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/2/el-ball3.jpg')}/>
-                </TouchableOpacity>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q2', answer: 1})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q2', time: time})); navigation.navigate('GameScreenThree')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/2/el-ball1-main.jpg')}/>
-                </TouchableOpacity>
-            </View>
-            <View style={styles.imageContainer}>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q2', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q2', time: time})); navigation.navigate('GameScreenThree')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/2/el-ball4.jpg')}/>
-                </TouchableOpacity>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q2', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q2', time: time})); navigation.navigate('GameScreenThree')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/2/el-ball5.jpg')}/>
-                </TouchableOpacity>
-            </View>
-            <View style={styles.imageContainer}>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q2', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q2', time: time})); navigation.navigate('GameScreenThree')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/2/el-ball6.jpg')}/>
-                </TouchableOpacity>
-                <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: 'q2', answer: 0})); setTimeOn(false); dispatch(memoryActions.setTime({question: 'q2', time: time})); navigation.navigate('GameScreenThree')}}>
-                    <Image style={styles.image}  source={require('../../../memory/images/elementry/2/el-ball7.jpg')}/>
-                </TouchableOpacity>
-            </View>
+            <FlatList
+                keyExtractor={(item, data)=>item.id}
+                data={gameData}
+                renderItem={renderImageItem}
+                numColumns={2}
+            />
         </View>
     );
 }