From 86332a267be97c2d3dff89ad6120fee1b1f50ab7 Mon Sep 17 00:00:00 2001 From: davidpborromeo Date: Thu, 24 May 2018 21:18:52 +0900 Subject: [PATCH] #50 Add: Data for list of menu in grammar --- app/config/localization.js | 15 +- app/config/quiz.js | 4 +- app/config/router.js | 2 + app/config/studyList.js | 63 ++++- app/screens/Quiz/quizBeforeList.js | 80 +++++++ app/screens/Quiz/quizFlash.js | 112 ++++----- app/screens/Quiz/quizMain.js | 33 ++- app/screens/Test/testFlash.js | 358 ----------------------------- 8 files changed, 227 insertions(+), 440 deletions(-) create mode 100644 app/screens/Quiz/quizBeforeList.js delete mode 100644 app/screens/Test/testFlash.js diff --git a/app/config/localization.js b/app/config/localization.js index 2a84633..5efa9e3 100644 --- a/app/config/localization.js +++ b/app/config/localization.js @@ -45,7 +45,13 @@ export let strings = new LocalizedStrings({ KANJI_LIST : "KANJI LIST", FLASH_CARD_HIRAGANA: "FLASH CARD HIRAGANA", FLASH_CARD_KATAKANA: "FLASH CARD KATAKANA", - + HIKA_ROMA: "Hiragana/Katakana to Romaji", + ROMA_HIKA: "Romaji to Hiragana/Katakana", + LISTEN: "Listening", + TRANSLATE_SENTENCE: "Translate the sentence", + FLASH_CARD: "Listening\n(Translate)", + FILL_THE_BLANKS: "Fill in the blanks", + REARRANGE: "Rearrange the sentence" }, ja: { loginGuest: "japan", @@ -87,6 +93,13 @@ export let strings = new LocalizedStrings({ KANJI_LIST : "KANJI LIST", FLASH_CARD_HIRAGANA: "FLASH CARD HIRAGANA", FLASH_CARD_KATAKANA: "FLASH CARD KATAKANA", + HIKA_ROMA: "Hiragana/Katakana to Romaji", + ROMA_HIKA: "Romaji to Hiragana/Katakana", + LISTEN: "Listening", + TRANSLATE_SENTENCE: "Translate the sentence", + FLASH_CARD: "Listening\n(Translate)", + FILL_THE_BLANKS: "Fill in the blanks", + REARRANGE: "Rearrange the sentence" } }); \ No newline at end of file diff --git a/app/config/quiz.js b/app/config/quiz.js index c404223..d9334a0 100644 --- a/app/config/quiz.js +++ b/app/config/quiz.js @@ -95,7 +95,7 @@ export const quizItems = { "type":"hiragana", "romaji":"shi", "moji":"し", - "audio":"shi.mp3", + "audio":"si.mp3", "title":"shi", }, { @@ -932,7 +932,7 @@ export const quizItems = { "type":"katakana", "romaji":"shi", "moji":"シ", - "audio":"shi.mp3", + "audio":"si.mp3", "title":"shi", }, { diff --git a/app/config/router.js b/app/config/router.js index b767ec3..cade744 100644 --- a/app/config/router.js +++ b/app/config/router.js @@ -18,6 +18,7 @@ import LearnListScreen from '../screens/Learn/LearnList'; import LearnHiraganaModule from '../screens/Learn/LearnModule'; import QuizMainScreen from '../screens/Quiz/quizMain'; import QuizListScreen from '../screens/Quiz/quizList'; +import QuizBeforeScreen from '../screens/Quiz/quizBeforeList'; import QuizHiraganaListScreen from '../screens/Quiz/quizHiraganaList'; import QuizKatakanaListScreen from '../screens/Quiz/quizKatakanaList'; import HiraganaFlashcardScreen from '../screens/Study/hiraganaFlashcard'; @@ -55,6 +56,7 @@ const StudyStack = StackNavigator({ LearnListScreen: LearnListScreen, QuizMain: QuizMainScreen, QuizList: QuizStack, + QuizBefore: QuizListScreen, LearnHiraganaModule: { screen: LearnHiraganaModule, diff --git a/app/config/studyList.js b/app/config/studyList.js index 40f1abc..4d348ec 100644 --- a/app/config/studyList.js +++ b/app/config/studyList.js @@ -5,7 +5,7 @@ export const StudyList = [{ type : 'Initial', id: 'T001', quizOptions: { - random: true, + random: false, types:['romaji_moji', 'moji_romaji','audio_moji','audio_romaji'], style:'quizSquared' } @@ -17,7 +17,7 @@ export const StudyList = [{ type : 'Initial', id: 'T002', quizOptions: { - random: false, + random: true, types:['moji_english', 'english_moji','audio_english','audio_moji'], withCorrection:true, style:'quizLong' @@ -39,9 +39,27 @@ export const StudyList = [{ { title : 'TOPIC1_TITLE', img : 'me_family', - lock : true, + lock : false, type : 'Topic', - id: 'T004' + id: 'T004', + vocabulary:{ + random:true, + types:['english_moji','english_fill','audio_english','audio_fill'], + withCorrection:true, + style:'quizLong' + }, + grammar:{ + random:true, + types:['english_moji','audio_english','fill','arrange'], + withCorrection:true, + style:'quizLong' + }, + kanji:{ + random:true, + types:['kanji_moji','kanji_fill','kanji_english','audio_kanji','moji_kanji'], + withCorrection:true, + style:'quizLong' + } }, { title : 'TOPIC2_TITLE', @@ -216,4 +234,39 @@ TOPIC1_TITLE_and_kanji : [{ study : '4' }, ], - }; \ No newline at end of file + }; + +export const QuizListData = { + hiragana_katakana :[ + { + title : 'HIKA_ROMA', + type : 'moji_romaji' + }, + { + title : 'ROMA_HIKA', + type : 'romaji_moji' + }, + { + title : 'LISTEN', + type : 'audio_moji' + } + ], + grammar :[ + { + title : 'TRANSLATE_SENTENCE', + type : 'english_moji', + },{ + title : 'FLASH_CARD', + type : 'audio_english', + }, + { + title : 'FILL_THE_BLANKS', + type : 'fill', + }, + { + title : 'REARRANGE', + type : 'arrange', + } + ], + }; + diff --git a/app/screens/Quiz/quizBeforeList.js b/app/screens/Quiz/quizBeforeList.js new file mode 100644 index 0000000..b7d18bb --- /dev/null +++ b/app/screens/Quiz/quizBeforeList.js @@ -0,0 +1,80 @@ +import React, { Component } from 'react'; +import { + ActivityIndicator, + AsyncStorage, + Button, + StatusBar, + StyleSheet, + View, + ToolbarAndroid, + Text, + TouchableOpacity, +} from 'react-native'; + +import { withNavigation } from 'react-navigation'; +import { strings } from '../../config/localization'; +import { QuizListData } from '../../config/studyList'; + +class QuizBeforeScreen extends Component { + + static navigationOptions = ({ navigation }) => { + subtitle = navigation.getParam('typeQuiz', null); + title = navigation.getParam('title', null); + + return{ + title: title, + tabBarVisible:false, + header: props =>
+ } + }; + + constructor(props){ + super(props); + this.list = QuizListData.hiragana_katakana; + this._onSetLanguageTo('en'); + } + + _onSetLanguageTo(value) { + strings.setLanguage(value); + } + + render() { + return ( + + {this.list.map((item, key)=>( + + + {strings[item.title]} + + + ))} + + ); + } + + quiz = (type) => { + const { navigation } = this.props; + + this.props.navigation.navigate('QuizList',( + { + type: navigation.getParam('type',null), + title: navigation.getParam('title',null), + studyType: navigation.getParam('studyType',null), + img: navigation.getParam('img',null), + topicId: navigation.getParam('topicId',null), + typeQuiz: navigation.getParam('typeQuiz',null), + quizOptions: navigation.getParam('quizOptions',null), + oneType: type, + index: navigation.getParam('index',null), + } + )); + }; +} + +const styles = require('../../styles/quizStyle'); + +export default QuizBeforeScreen; diff --git a/app/screens/Quiz/quizFlash.js b/app/screens/Quiz/quizFlash.js index 21c5a63..581a51c 100644 --- a/app/screens/Quiz/quizFlash.js +++ b/app/screens/Quiz/quizFlash.js @@ -18,6 +18,7 @@ import { import Header from '../../component/header'; import { quizItems } from '../../config/quiz'; + import { StudyList } from '../../config/studyList'; /* TODO: @@ -28,27 +29,22 @@ import { static navigationOptions = ({ navigation }) => { subtitle = navigation.getParam('typeQuiz', null); - title = navigation.getParam('title', null); - type = navigation.getParam('type', null); + title = navigation.getParam('title', null); return{ - title: 'Quiz', + title: title, tabBarVisible:false, header: props =>
- //headerStyle:require('../../styles/style').headContainer, - //headerTitle:
} }; constructor(props){ super(props); - - const { navigation } = this.props; - + this.optionsNumber = 4; this.allQuestion = []; this.quizItems = []; @@ -56,8 +52,9 @@ import { this.studyRecord = []; this.startTime = null; this.quizOptions = []; - this.title = navigation.getParam('title', null); + this.title = ''; this.oneType = ''; + this.study = []; this.state = { timesUp: false, @@ -77,7 +74,6 @@ import { title:'', img:'', studyType:'', - quizOptions:'', typeQuiz : '', index : '' } @@ -85,14 +81,7 @@ import { this._onSetLanguageTo('en'); } - componentDidMount() { - const { navigation } = this.props; - this.setState({ - index: navigation.getParam('index', null), - typeQuiz : navigation.getParam('typeQuiz', null), - }); - - } + _onSetLanguageTo(value) { strings.setLanguage(value); } @@ -113,7 +102,7 @@ import { format={ format } img={ this.state.img } style={[styles.col12, styles.quizFlashTop]} - styleFormat={ this.state.quizOptions.style } + styleFormat={ this.quizOptions.style } timesUp={ this.state.timesUp } expression={ this.state.expression } /> @@ -137,7 +126,7 @@ import { answerOptions={ this.state.question.answerOption } onAnswerSelected={ this.stopTimer } format={ this.state.answerFormat } - styleFormat={ this.state.quizOptions.style } + styleFormat={ this.quizOptions.style } timesUp={ this.state.timesUp } isCorrect={ this.addScore } /> @@ -152,38 +141,31 @@ import { componentWillMount() { const { navigation } = this.props; - this.quizOptions = navigation.getParam('quizOptions',null); + this.oneType = navigation.getParam('oneType',null); + idList = navigation.getParam('idList', null); - this.setState({ + const initialParams = { title: navigation.getParam('title', null), img: navigation.getParam('img', null), type: navigation.getParam('type', null), topicId: navigation.getParam('topicId', null), studyType: navigation.getParam('studyType',null), - typeQuiz: navigation.getParam('typeQuiz',null), - quizOptions: this.quizOptions - }); - //console.log(navigation.getParam('quizOptions',null)); - this.quizItems = quizItems[this.title]; - idList = navigation.getParam('idList', null); - - if(idList && idList.length){ - var quizItemsTemp = []; - for(i = 0; i < idList.length; i++){ - currentId = idList[i]; - quizItemsTemp[quizItemsTemp.length] = this.quizItems.find(function (obj) { - return obj.id == currentId; - }); - } - - this.quizItems = quizItemsTemp; + typeQuiz: navigation.getParam('typeQuiz',null), + index: navigation.getParam('index', null) } - let shuffledQuiz = this.shuffleItems(this.quizItems); + this.setState(initialParams); - this.setStartQuiz(); + this.setInitial(); + this.quizItems = quizItems[initialParams.title]; + + this.setDefinedQuestion(idList); + + let shuffledQuiz = this.shuffleItems(this.quizItems); + + this.randomQuizFormat(); this.allQuestion = shuffledQuiz.map((question) => @@ -193,8 +175,36 @@ import { this.setState({ question: this.allQuestion[0] }); + + this.setStartQuiz(); + } + + // set items + setInitial(){ + this.study = StudyList.find(function (obj) { + return obj.title == this.title; + }) + + this.quizOptions = this.study.quizOptions; } + // will change all question based on what you put in 'idList' + setDefinedQuestion(idList){ + if(idList && idList.length){ + var quizItemsTemp = []; + + for(i = 0; i < idList.length; i++){ + currentId = idList[i]; + quizItemsTemp[quizItemsTemp.length] = this.quizItems.find(function (obj) { + return obj.id == currentId; + }); + } + + this.quizItems = quizItemsTemp; + } + } + + // randomized answer options shuffleAnswers(array, allArray) { var allArrayLength = allArray.length, temporaryValue, randomIndex; @@ -223,17 +233,14 @@ import { return array; }; + // randomized question shuffleItems(array) { var currentIndex = array.length, temporaryValue, randomIndex; - // While there remain elements to shuffle... while (0 !== currentIndex) { - - // Pick a remaining element... randomIndex = Math.floor(Math.random() * currentIndex); currentIndex -= 1; - - // And swap it with the current element. + temporaryValue = array[currentIndex]; array[currentIndex] = array[randomIndex]; array[randomIndex] = temporaryValue; @@ -242,15 +249,11 @@ import { return array; }; - randomQuizFormat(){ - //console.log(this.quizOptions); - + randomQuizFormat(){ var quizFormat = this.oneType ? [this.oneType] : this.quizOptions.types; var quizFormatLength = quizFormat.length, randomIndex; - randomIndex = Math.floor(Math.random() * quizFormatLength); - - + randomIndex = Math.floor(Math.random() * quizFormatLength); switch (quizFormat[randomIndex]) { case 'romaji_moji': @@ -313,6 +316,7 @@ import { setNextQuestion() { const counter = this.state.counter + 1; + this.setTakeQuiz(); if(counter < this.allQuestion.length){ @@ -349,8 +353,7 @@ import { this.props.startLearn(this.state.studyType, this.startTime,this.title); //call our action } - setTakeQuiz = () => { - + setTakeQuiz = () => { parseValue = { questionID : this.state.question.id, questionTime : this.state.questionTime, @@ -379,7 +382,6 @@ import { }; onTimesUp = (val) => { - this.setState({ timesUp: true, expression:'sad' diff --git a/app/screens/Quiz/quizMain.js b/app/screens/Quiz/quizMain.js index 10aa602..657bf4f 100644 --- a/app/screens/Quiz/quizMain.js +++ b/app/screens/Quiz/quizMain.js @@ -12,23 +12,8 @@ import { } from 'react-native'; import { withNavigation } from 'react-navigation'; -var quizListArray = [ - { - title : 'Hiragana/Katakana to Romaji', - type : 'moji_romaji' - // action : () => {this.props.navigation.navigate('QuizHiraganaList')}, - }, - { - title : 'Romaji to Hiragana/Katakana', - type : 'romaji_moji' - // action : () => {this.props.navigation.navigate('TimeIn')} - }, - { - title : 'Listening', - type : 'audio_moji' - // action : () => {this.props.navigation.navigate('TimeIn')} - } -] +import { strings } from '../../config/localization'; +import { QuizListData } from '../../config/studyList'; class QuizMainScreen extends Component { @@ -36,14 +21,24 @@ class QuizMainScreen extends Component { // header: null, title: 'QuizList', }; + + constructor(props){ + super(props); + this.list = QuizListData.hiragana_katakana; + this._onSetLanguageTo('en'); + } + + _onSetLanguageTo(value) { + strings.setLanguage(value); + } render() { return ( - {quizListArray.map((item, key)=>( + {this.list.map((item, key)=>( - {item.title} + {strings[item.title]} ))} diff --git a/app/screens/Test/testFlash.js b/app/screens/Test/testFlash.js deleted file mode 100644 index 4c58a16..0000000 --- a/app/screens/Test/testFlash.js +++ /dev/null @@ -1,358 +0,0 @@ -import React, { Component } from 'react'; -import { - ActivityIndicator, - AsyncStorage, - Button, - StatusBar, - StyleSheet, - View, - ImageBackground, - Text, - TouchableHighlight - } from 'react-native'; - import { List, ListItem } from 'react-native-elements'; - import { strings } from '../../config/localization'; - - import { bindActionCreators } from 'redux'; - import { connect } from 'react-redux'; - import * as Actions from '../../actions/study'; - - // Import Components - import CharacterImage from '../../component/character'; - import TimerBar from '../../component/timer'; - import QuestionPanel from '../../component/question'; - import Quiz from '../../component/quiz'; - - import quizItems from '../../config/quiz'; - - /* - TODO: - 1.0 Refine the code - 1.1 Make the quiz flash usable to other section - */ - class QuizFlashScreen extends Component { - - static navigationOptions = { - title: 'Quiz', - tabBarVisible:false - }; - - constructor(props){ - super(props); - - this.optionsNumber = 4; - this.allQuestion = []; - this.timeStops = 0; - - this.state = { - timesUp: false, - expression: 'default', - time:5000, - timerRun:true, - timerRestart:false, - counter: 0, - question: [], - answerOptions: [], - answer: '', - answerFormat:'', - questionFormat:'', - pause: 2000, - score:0, - correct:0 - } - - this.imageSource = require('../../assets/img/topic/1.0-class.jpg'); - - this._onSetLanguageTo('en'); - } - - _onSetLanguageTo(value) { - strings.setLanguage(value); - } - - _renderTimesup(){ - if(this.state.timesUp){ - return( - - { strings.TIMES_UP } - - ); - } - else{ - return null; - } - } - - render() { - let display = this.state.timesUp; - let expression = this.state.expression; - let format = this.state.questionFormat; - let timerRun = this.state.timerRun; - let timerRestart = this.state.timerRestart; - - return ( - - - - - - - - - - - - { this._renderTimesup() } - - - - - - - - - - - - - - - - ); - } - - componentWillMount() { - let shuffledQuiz = this.shuffleItems(quizItems); - - this.randomQuizFormat(); - - this.allQuestion = shuffledQuiz.map((question) => - this.shuffleAnswers(question, shuffledQuiz) - ); - - this.setState({ - question: this.allQuestion[0] - }); - } - - shuffleAnswers(array, allArray) { - var allArrayLength = allArray.length, temporaryValue, randomIndex; - - var randomIndex = Math.floor(Math.random() * this.optionsNumber); - array.answerOption = []; - array.answerOption[randomIndex] = array; - - currentItems = [array.id]; - - for(var i = 0; i < this.optionsNumber; i++){ - if(array.answerOption[i] != undefined) continue; - randomItem = ''; - - - while(!randomItem){ - randomIndex = Math.floor(Math.random() * allArrayLength); - if(currentItems.indexOf(allArray[randomIndex].id) > -1) continue; - - currentItems[currentItems.length] = allArray[randomIndex].id; - randomItem = allArray[randomIndex]; - } - - array.answerOption[i] = randomItem; - } - - return array; - }; - - shuffleItems(array) { - var currentIndex = array.length, temporaryValue, randomIndex; - - // While there remain elements to shuffle... - while (0 !== currentIndex) { - - // Pick a remaining element... - randomIndex = Math.floor(Math.random() * currentIndex); - currentIndex -= 1; - - // And swap it with the current element. - temporaryValue = array[currentIndex]; - array[currentIndex] = array[randomIndex]; - array[randomIndex] = temporaryValue; - } - - return array; - }; - - randomQuizFormat(){ - var quizFormat = ['moji','romaji','audio_moji','audio_romaji']; - var quizFormatLength = quizFormat.length, randomIndex; - - randomIndex = Math.floor(Math.random() * quizFormatLength); - - switch (quizFormat[randomIndex]) { - case 'moji': - this.setState({ - answerFormat: 'moji', - questionFormat: 'romaji' - }); - break; - case 'romaji': - this.setState({ - answerFormat: 'romaji', - questionFormat: 'moji' - }); - break; - - case 'audio_moji': - this.setState({ - answerFormat: 'moji', - questionFormat: 'audio' - }); - break; - - default: - this.setState({ - answerFormat: 'romaji', - questionFormat: 'audio' - }); - break; - - } - } - - setNextQuestion() { - const counter = this.state.counter + 1; - this.setTakeQuiz(); - - if(counter < this.allQuestion.length){ - this.randomQuizFormat(); - - this.timeStops = 0; - - this.setState({ - counter: counter, - //questionId: questionId, - question: this.allQuestion[counter], - answerOptions: this.allQuestion[counter].answerOption, - answer: '', - timerRun:true, - timerRestart:true, - timesUp: false, - expression:'default', - correct: 0 - }); - } - else{ - this.props.navigation.navigate('StudyReduxScreen'); - } - - } - - setTakeQuiz = () => { - - parseValue = { - questionID : this.state.question.id, - questionTime : this.state.questionTime, - answer : this.state.answer, - correct : this.state.correct, - questionTime: this.timeStops - } - this.props.takeQuiz(parseValue); //call our action - }; - - onTimesUp = (val) => { - - this.setState({ - timesUp: true, - expression:'sad' - }); - - setTimeout(() => { - this.setNextQuestion(); - }, this.state.pause); - }; - - setTimeStops = (time) => { - this.timeStops = time; - - }; - - onRestart = () => { - this.setState({ - timerRestart: false - }); - }; - - stopTimer = (answer) => { - this.setState({ - timerRun:false, - answer:answer - }); - - setTimeout(() => { - this.setNextQuestion(); - }, this.state.pause); - }; - - addScore = (isCorrect) => { - - if(isCorrect){ - this.setState({ - score: this.state.score + 1, - correct:1, - expression:'happy' - }); - - } - else{ - this.setState({ - expression:'sad' - }); - } - }; - - } - - const styles = require('../../styles/style'); - -// The function takes data from the app current state, -// and insert/links it into the props of our component. -// This function makes Redux know that this component needs to be passed a piece of the state -function mapStateToProps(state, props) { - return { - StudentID: state.user.user.id, - startTime: state.study.startTime, - endTime: state.study.endTime, - studyType: state.study.studyType, - studyRecord: state.study.studyRecord, - studyID: state.study.studyID, - } -} - -// Doing this merges our actions into the component’s props, -// while wrapping them in dispatch() so that they immediately dispatch an Action. -// Just by doing this, we will have access to the actions defined in out actions file (action/home.js) -function mapDispatchToProps(dispatch) { - return bindActionCreators(Actions, dispatch); -} - -export default connect(mapStateToProps, mapDispatchToProps)(QuizFlashScreen);