Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
21_22-J 38
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
21_22-J 38
21_22-J 38
Commits
f9617c5e
Commit
f9617c5e
authored
May 03, 2022
by
Lihinikaduwa D.N.R.
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'it18257632' into 'master'
It18257632 See merge request
!195
parents
d9baf31b
fc57ce6d
Changes
8
Hide whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
836 additions
and
311 deletions
+836
-311
frontend/src/component/reading/ReadModal.js
frontend/src/component/reading/ReadModal.js
+9
-73
frontend/src/component/reading/ReadModalFailed.js
frontend/src/component/reading/ReadModalFailed.js
+10
-74
frontend/src/screen/reading/advanced/ReadActivityBird.js
frontend/src/screen/reading/advanced/ReadActivityBird.js
+135
-27
frontend/src/screen/reading/advanced/ReadActivityDog.js
frontend/src/screen/reading/advanced/ReadActivityDog.js
+138
-27
frontend/src/screen/reading/advanced/ReadActivityFish.js
frontend/src/screen/reading/advanced/ReadActivityFish.js
+140
-27
frontend/src/screen/reading/basic/ReadActivityGo.js
frontend/src/screen/reading/basic/ReadActivityGo.js
+111
-28
frontend/src/screen/reading/basic/ReadActivityHe.js
frontend/src/screen/reading/basic/ReadActivityHe.js
+140
-29
frontend/src/screen/reading/basic/ReadActivityNo.js
frontend/src/screen/reading/basic/ReadActivityNo.js
+153
-26
No files found.
frontend/src/component/reading/ReadModal.js
View file @
f9617c5e
...
@@ -34,7 +34,7 @@ export default function ReadModal(props) {
...
@@ -34,7 +34,7 @@ export default function ReadModal(props) {
>
>
<
View
style
=
{
styles
.
centeredView2
}
>
<
View
style
=
{
styles
.
centeredView2
}
>
<
View
style
=
{
styles
.
modalView2
}
>
<
View
style
=
{
styles
.
modalView2
}
>
<
Image
style
=
{
styles
.
alert2
}
source
=
{
ImagePaths
.
bird1
}
><
/Image
>
<
Image
style
=
{
styles
.
alert2
}
source
=
{
imagePath
}
><
/Image
>
<
Text
style
=
{
styles
.
headStyle2
}
>
{
caption
}
<
/Text
>
<
Text
style
=
{
styles
.
headStyle2
}
>
{
caption
}
<
/Text
>
<
Text
style
=
{
styles
.
head2Style2
}
>
{
validity
}
<
/Text
>
<
Text
style
=
{
styles
.
head2Style2
}
>
{
validity
}
<
/Text
>
...
@@ -76,7 +76,7 @@ const styles = StyleSheet.create({
...
@@ -76,7 +76,7 @@ const styles = StyleSheet.create({
textBody
:
{
textBody
:
{
marginTop
:
150
,
marginTop
:
150
,
marginLeft
:
95
,
marginLeft
:
95
,
backgroundColor
:
'
#1DCE92
'
,
//
backgroundColor: '#1DCE92',
width
:
200
,
width
:
200
,
borderRadius
:
50
,
borderRadius
:
50
,
padding
:
5
,
padding
:
5
,
...
@@ -128,13 +128,13 @@ const styles = StyleSheet.create({
...
@@ -128,13 +128,13 @@ const styles = StyleSheet.create({
borderRadius
:
20
,
borderRadius
:
20
,
padding
:
35
,
padding
:
35
,
borderWidth
:
5
,
borderWidth
:
5
,
borderColor
:
'
#red
'
,
//
borderColor: '#red',
alignItems
:
'
center
'
,
alignItems
:
'
center
'
,
shadowColor
:
'
red
'
,
//
shadowColor: 'red',
shadowOffset
:
{
//
shadowOffset: {
width
:
0
,
//
width: 0,
height
:
2
,
//
height: 2,
},
//
},
shadowOpacity
:
0.25
,
shadowOpacity
:
0.25
,
shadowRadius
:
4
,
shadowRadius
:
4
,
elevation
:
5
,
elevation
:
5
,
...
@@ -182,69 +182,5 @@ const styles = StyleSheet.create({
...
@@ -182,69 +182,5 @@ const styles = StyleSheet.create({
marginTop
:
-
80
,
marginTop
:
-
80
,
},
},
centeredView3
:
{
flex
:
1
,
justifyContent
:
'
center
'
,
alignItems
:
'
center
'
,
marginTop
:
-
20
,
},
modalView3
:
{
margin
:
20
,
backgroundColor
:
'
#FFFFFF
'
,
borderRadius
:
20
,
padding
:
20
,
borderWidth
:
5
,
borderColor
:
'
#1DCE92
'
,
alignItems
:
'
center
'
,
shadowColor
:
'
red
'
,
shadowOffset
:
{
width
:
0
,
height
:
2
,
},
shadowOpacity
:
0.25
,
shadowRadius
:
4
,
elevation
:
5
,
},
button3
:
{
borderRadius
:
20
,
padding
:
10
,
elevation
:
2
,
},
buttonOpen3
:
{
backgroundColor
:
'
#F194FF
'
,
},
buttonClose3
:
{
backgroundColor
:
'
#1DCE92
'
,
},
textStyle3
:
{
color
:
'
white
'
,
fontWeight
:
'
bold
'
,
textAlign
:
'
center
'
,
},
headStyle3
:
{
color
:
'
black
'
,
fontWeight
:
'
bold
'
,
textAlign
:
'
center
'
,
fontSize
:
30
,
marginBottom
:
5
,
},
head2Style3
:
{
color
:
'
black
'
,
fontWeight
:
'
bold
'
,
textAlign
:
'
center
'
,
fontSize
:
30
,
marginBottom
:
20
,
},
modalText3
:
{
marginBottom
:
15
,
textAlign
:
'
center
'
,
},
alert3
:
{
backgroundColor
:
'
white
'
,
borderRadius
:
50
,
width
:
100
,
height
:
100
,
marginBottom
:
20
,
marginTop
:
-
65
,
},
});
});
frontend/src/component/reading/ReadModalFailed.js
View file @
f9617c5e
...
@@ -15,7 +15,7 @@ import {useNavigation} from '@react-navigation/native';
...
@@ -15,7 +15,7 @@ import {useNavigation} from '@react-navigation/native';
import
{
ImagePaths
}
from
'
../../assets/read/data/ReadData
'
;
import
{
ImagePaths
}
from
'
../../assets/read/data/ReadData
'
;
export
default
function
ReadModalFailed
(
props
)
{
export
default
function
ReadModalFailed
(
props
)
{
const
{
caption
,
validity
,
visibility
,
p
ath
}
=
props
;
const
{
caption
,
validity
,
visibility
,
imageP
ath
}
=
props
;
const
navigation
=
useNavigation
();
const
navigation
=
useNavigation
();
const
[
modalVisible
,
setModalVisible
]
=
useState
(
visibility
);
const
[
modalVisible
,
setModalVisible
]
=
useState
(
visibility
);
...
@@ -32,7 +32,9 @@ export default function ReadModalFailed(props) {
...
@@ -32,7 +32,9 @@ export default function ReadModalFailed(props) {
>
>
<
View
style
=
{
styles
.
centeredView3
}
>
<
View
style
=
{
styles
.
centeredView3
}
>
<
View
style
=
{
styles
.
modalView3
}
>
<
View
style
=
{
styles
.
modalView3
}
>
<
Image
style
=
{
styles
.
alert3
}
source
=
{
ImagePaths
.
robot1
}
><
/Image
>
<
Image
style
=
{
styles
.
alert3
}
source
=
{
imagePath
}
><
/Image
>
<
Text
style
=
{
styles
.
headStyle3
}
>
Your
answer
is
<
/Text
>
<
Text
style
=
{
styles
.
headStyle3
}
>
Your
answer
is
<
/Text
>
<
Text
style
=
{
styles
.
head2Style3
}
>
Incorect
.
<
/Text
>
<
Text
style
=
{
styles
.
head2Style3
}
>
Incorect
.
<
/Text
>
...
@@ -111,72 +113,6 @@ const styles = StyleSheet.create({
...
@@ -111,72 +113,6 @@ const styles = StyleSheet.create({
elevation
:
2
,
elevation
:
2
,
},
},
centeredView2
:
{
flex
:
1
,
justifyContent
:
'
center
'
,
alignItems
:
'
center
'
,
marginTop
:
22
,
},
modalView2
:
{
marginTop
:
-
10
,
margin
:
20
,
backgroundColor
:
'
#FFFFFFEF
'
,
borderRadius
:
20
,
padding
:
35
,
borderWidth
:
5
,
borderColor
:
'
#red
'
,
alignItems
:
'
center
'
,
shadowColor
:
'
red
'
,
shadowOffset
:
{
width
:
0
,
height
:
2
,
},
shadowOpacity
:
0.25
,
shadowRadius
:
4
,
elevation
:
5
,
},
button2
:
{
borderRadius
:
20
,
padding
:
10
,
elevation
:
2
,
},
buttonOpen2
:
{
backgroundColor
:
'
#F194FF
'
,
},
buttonClose2
:
{
// backgroundColor: "#1DCE92",
},
textStyle2
:
{
color
:
'
white
'
,
fontWeight
:
'
bold
'
,
textAlign
:
'
center
'
,
},
modalText2
:
{
marginBottom
:
15
,
textAlign
:
'
center
'
,
},
headStyle2
:
{
color
:
'
black
'
,
fontWeight
:
'
bold
'
,
textAlign
:
'
center
'
,
fontSize
:
30
,
marginBottom
:
5
,
},
head2Style2
:
{
color
:
'
black
'
,
fontWeight
:
'
bold
'
,
textAlign
:
'
center
'
,
fontSize
:
30
,
marginBottom
:
20
,
},
alert2
:
{
backgroundColor
:
'
white
'
,
borderRadius
:
50
,
width
:
100
,
height
:
100
,
marginBottom
:
20
,
marginTop
:
-
80
,
},
centeredView3
:
{
centeredView3
:
{
flex
:
1
,
flex
:
1
,
...
@@ -190,13 +126,13 @@ const styles = StyleSheet.create({
...
@@ -190,13 +126,13 @@ const styles = StyleSheet.create({
borderRadius
:
20
,
borderRadius
:
20
,
padding
:
20
,
padding
:
20
,
borderWidth
:
5
,
borderWidth
:
5
,
borderColor
:
'
#1DCE92
'
,
//
borderColor: '#1DCE92',
alignItems
:
'
center
'
,
alignItems
:
'
center
'
,
shadowColor
:
'
red
'
,
//
shadowColor: 'red',
shadowOffset
:
{
//
shadowOffset: {
width
:
0
,
//
width: 0,
height
:
2
,
//
height: 2,
},
//
},
shadowOpacity
:
0.25
,
shadowOpacity
:
0.25
,
shadowRadius
:
4
,
shadowRadius
:
4
,
elevation
:
5
,
elevation
:
5
,
...
...
frontend/src/screen/reading/advanced/ReadActivityBird.js
View file @
f9617c5e
...
@@ -9,7 +9,7 @@ import {
...
@@ -9,7 +9,7 @@ import {
ImageButton
,
ImageButton
,
SafeAreaView
,
SafeAreaView
,
ImageBackground
,
ImageBackground
,
Button
,
Modal
,
Image
,
Image
,
TouchableHighlight
,
TouchableHighlight
,
}
from
'
react-native
'
;
}
from
'
react-native
'
;
...
@@ -29,6 +29,19 @@ export default function ReadActivityBird() {
...
@@ -29,6 +29,19 @@ export default function ReadActivityBird() {
const
[
modalVisible2
,
setModalVisible2
]
=
useState
(
false
);
const
[
modalVisible2
,
setModalVisible2
]
=
useState
(
false
);
const
[
modalVisible3
,
setModalVisible3
]
=
useState
(
false
);
const
[
modalVisible3
,
setModalVisible3
]
=
useState
(
false
);
React
.
useEffect
(()
=>
{
// StatusBar.setHidden(true);
//
setModalVisible
(
true
);
const
unsubscribe
=
navigation
.
addListener
(
'
focus
'
,
()
=>
{
Orientation
.
unlockAllOrientations
();
Orientation
.
lockToPortrait
();
});
return
unsubscribe
;
},
[
navigation
]);
useEffect
(()
=>
{
useEffect
(()
=>
{
Voice
.
destroy
().
then
(
Voice
.
removeAllListeners
);
Voice
.
destroy
().
then
(
Voice
.
removeAllListeners
);
},
[]);
},
[]);
...
@@ -64,6 +77,7 @@ export default function ReadActivityBird() {
...
@@ -64,6 +77,7 @@ export default function ReadActivityBird() {
};
};
const
onSpeechResultsHandler
=
e
=>
{
const
onSpeechResultsHandler
=
e
=>
{
setCount
(
count
+
1
);
const
result
=
e
.
value
;
const
result
=
e
.
value
;
if
(
result
.
includes
(
'
bird
'
))
{
if
(
result
.
includes
(
'
bird
'
))
{
AsyncStorage
.
getItem
(
'
userId
'
)
AsyncStorage
.
getItem
(
'
userId
'
)
...
@@ -71,7 +85,7 @@ export default function ReadActivityBird() {
...
@@ -71,7 +85,7 @@ export default function ReadActivityBird() {
const
data
=
{
const
data
=
{
word
:
'
Bird
'
,
word
:
'
Bird
'
,
userId
:
userId
,
userId
:
userId
,
level
:
'
Advance
'
,
level
:
'
Advance
d
'
,
triedCount
:
count
,
triedCount
:
count
,
};
};
getToken
(
data
);
getToken
(
data
);
...
@@ -80,36 +94,34 @@ export default function ReadActivityBird() {
...
@@ -80,36 +94,34 @@ export default function ReadActivityBird() {
console
.
log
(
error
);
console
.
log
(
error
);
});
});
}
else
{
}
else
{
setCount
(
count
+
1
);
setModalVisible3
(
true
);
setModalVisible3
(
true
);
startRecording
();
}
}
};
};
const
onSpeechError
=
e
=>
{
const
onSpeechError
=
e
=>
{
console
.
log
(
'
onSpeechError:
'
,
e
);
// console.log('onSpeechError: ', e);
const
result
=
DummyReadResult
.
value
;
// const result = DummyReadResult.value;
if
(
result
.
includes
(
'
hello
'
))
{
// if (result.includes('hello')) {
AsyncStorage
.
getItem
(
'
userId
'
)
// AsyncStorage.getItem('userId')
.
then
(
userId
=>
{
// .then(userId => {
const
data
=
{
// const data = {
word
:
'
bird
'
,
// word: 'bird',
userId
:
userId
,
// userId: userId,
level
:
1
,
// level: 1,
triedCount
:
count
,
// triedCount: count,
};
// };
getToken
(
data
);
// getToken(data);
})
// })
.
catch
(
error
=>
{
// .catch(error => {
console
.
log
(
error
);
// console.log(error);
});
// });
}
else
{
// } else {
setCount
(
count
+
1
);
// setCount(count + 1);
Voice
.
start
(
'
en-US
'
);
// }
}
// console.log('count', count);
console
.
log
(
'
count
'
,
count
);
console
.
log
(
'
count
'
,
count
);
//
console.log('count', count);
};
};
const
getToken
=
data
=>
{
const
getToken
=
data
=>
{
...
@@ -142,7 +154,36 @@ export default function ReadActivityBird() {
...
@@ -142,7 +154,36 @@ export default function ReadActivityBird() {
/
>
/
>
)}
)}
{
modalVisible3
&&
<
ReadModalFailed
visible
=
"
true
"
/>
}
{
modalVisible3
&&
(
<
ReadModalFailed
visible
=
"
true
"
imagePath
=
{
ImagePaths
.
bird1
}
/
>
)}
{
modalVisible
&&
(
<
Modal
animationType
=
"
fade
"
transparent
=
{
true
}
hidden
=
{
true
}
visible
=
{
true
}
// onRequestClose={() => {
// setModalVisible2(!modalVisible2);
// }}
>
<
View
style
=
{
styles
.
centeredView2
}
>
<
View
style
=
{
styles
.
modalView2
}
>
<
Text
style
=
{
styles
.
headStyle2
}
>
Press
The
Button
<
/Text
>
<
Text
style
=
{
styles
.
head2Style2
}
>
And
Pronounce
<
/Text
>
<
TouchableOpacity
style
=
{[
styles
.
buttonClose2
]}
onPress
=
{()
=>
setModalVisible
(
false
)}
>
<
Image
source
=
{
ImagePaths
.
correct
}
resizeMode
=
"
contain
"
style
=
{{
width
:
100
,
height
:
70
,
marginBottom
:
-
10
}}
/
>
<
/TouchableOpacity
>
<
/View
>
<
/View
>
<
/Modal
>
)}
<
View
style
=
{{
flexDirection
:
'
column
'
}}
>
<
View
style
=
{{
flexDirection
:
'
column
'
}}
>
<
ImageBackground
<
ImageBackground
style
=
{
styles
.
image
}
style
=
{
styles
.
image
}
...
@@ -250,4 +291,71 @@ const styles = StyleSheet.create({
...
@@ -250,4 +291,71 @@ const styles = StyleSheet.create({
marginLeft
:
135
,
marginLeft
:
135
,
padding
:
0
,
padding
:
0
,
},
},
centeredView2
:
{
flex
:
1
,
justifyContent
:
'
center
'
,
alignItems
:
'
center
'
,
marginTop
:
22
,
},
modalView2
:
{
marginTop
:
-
10
,
margin
:
20
,
backgroundColor
:
'
#FFFFFFEF
'
,
borderRadius
:
20
,
padding
:
35
,
borderWidth
:
5
,
// borderColor: '#red',
alignItems
:
'
center
'
,
// shadowColor: 'red',
// shadowOffset: {
// width: 0,
// height: 2,
// },
shadowOpacity
:
0.25
,
shadowRadius
:
4
,
elevation
:
5
,
},
button2
:
{
borderRadius
:
20
,
padding
:
10
,
elevation
:
2
,
},
buttonOpen2
:
{
backgroundColor
:
'
#F194FF
'
,
},
buttonClose2
:
{
// backgroundColor: "#1DCE92",
},
textStyle2
:
{
color
:
'
white
'
,
fontWeight
:
'
bold
'
,
textAlign
:
'
center
'
,
},
modalText2
:
{
marginBottom
:
15
,
textAlign
:
'
center
'
,
},
headStyle2
:
{
color
:
'
black
'
,
fontWeight
:
'
bold
'
,
textAlign
:
'
center
'
,
fontSize
:
30
,
marginBottom
:
5
,
},
head2Style2
:
{
color
:
'
black
'
,
fontWeight
:
'
bold
'
,
textAlign
:
'
center
'
,
fontSize
:
30
,
marginBottom
:
20
,
},
alert2
:
{
// backgroundColor: 'rgba(0, 181, 0, 0.45)',
borderRadius
:
50
,
width
:
100
,
height
:
100
,
marginBottom
:
20
,
marginTop
:
-
80
,
},
});
});
frontend/src/screen/reading/advanced/ReadActivityDog.js
View file @
f9617c5e
...
@@ -9,7 +9,7 @@ import {
...
@@ -9,7 +9,7 @@ import {
ImageButton
,
ImageButton
,
SafeAreaView
,
SafeAreaView
,
ImageBackground
,
ImageBackground
,
Button
,
Modal
,
Image
,
Image
,
TouchableHighlight
,
TouchableHighlight
,
}
from
'
react-native
'
;
}
from
'
react-native
'
;
...
@@ -29,6 +29,19 @@ export default function ReadActivityDog() {
...
@@ -29,6 +29,19 @@ export default function ReadActivityDog() {
const
[
modalVisible2
,
setModalVisible2
]
=
useState
(
false
);
const
[
modalVisible2
,
setModalVisible2
]
=
useState
(
false
);
const
[
modalVisible3
,
setModalVisible3
]
=
useState
(
false
);
const
[
modalVisible3
,
setModalVisible3
]
=
useState
(
false
);
React
.
useEffect
(()
=>
{
// StatusBar.setHidden(true);
//
setModalVisible
(
true
);
const
unsubscribe
=
navigation
.
addListener
(
'
focus
'
,
()
=>
{
Orientation
.
unlockAllOrientations
();
Orientation
.
lockToPortrait
();
});
return
unsubscribe
;
},
[
navigation
]);
useEffect
(()
=>
{
useEffect
(()
=>
{
Voice
.
destroy
().
then
(
Voice
.
removeAllListeners
);
Voice
.
destroy
().
then
(
Voice
.
removeAllListeners
);
},
[]);
},
[]);
...
@@ -64,6 +77,7 @@ export default function ReadActivityDog() {
...
@@ -64,6 +77,7 @@ export default function ReadActivityDog() {
};
};
const
onSpeechResultsHandler
=
e
=>
{
const
onSpeechResultsHandler
=
e
=>
{
setCount
(
count
+
1
);
const
result
=
e
.
value
;
const
result
=
e
.
value
;
if
(
result
.
includes
(
'
dog
'
))
{
if
(
result
.
includes
(
'
dog
'
))
{
AsyncStorage
.
getItem
(
'
userId
'
)
AsyncStorage
.
getItem
(
'
userId
'
)
...
@@ -71,7 +85,7 @@ export default function ReadActivityDog() {
...
@@ -71,7 +85,7 @@ export default function ReadActivityDog() {
const
data
=
{
const
data
=
{
word
:
'
Dog
'
,
word
:
'
Dog
'
,
userId
:
userId
,
userId
:
userId
,
level
:
'
Advance
'
,
level
:
'
Advance
d
'
,
triedCount
:
count
,
triedCount
:
count
,
};
};
getToken
(
data
);
getToken
(
data
);
...
@@ -80,36 +94,35 @@ export default function ReadActivityDog() {
...
@@ -80,36 +94,35 @@ export default function ReadActivityDog() {
console
.
log
(
error
);
console
.
log
(
error
);
});
});
}
else
{
}
else
{
setCount
(
count
+
1
);
setModalVisible3
(
true
);
setModalVisible3
(
true
);
startRecording
();
}
}
};
};
const
onSpeechError
=
e
=>
{
const
onSpeechError
=
e
=>
{
console
.
log
(
'
onSpeechError:
'
,
e
);
//
console.log('onSpeechError: ', e);
const
result
=
DummyReadResult
.
value
;
//
const result = DummyReadResult.value;
if
(
result
.
includes
(
'
hello
'
))
{
//
if (result.includes('hello')) {
AsyncStorage
.
getItem
(
'
userId
'
)
//
AsyncStorage.getItem('userId')
.
then
(
userId
=>
{
//
.then(userId => {
const
data
=
{
//
const data = {
word
:
'
dog
'
,
//
word: 'dog',
userId
:
userId
,
//
userId: userId,
level
:
1
,
//
level: 1,
triedCount
:
count
,
//
triedCount: count,
};
//
};
getToken
(
data
);
//
getToken(data);
})
//
})
.
catch
(
error
=>
{
//
.catch(error => {
console
.
log
(
error
);
//
console.log(error);
});
//
});
}
else
{
//
} else {
setCount
(
count
+
1
);
//
setCount(count + 1);
Voice
.
start
(
'
en-US
'
);
//
Voice.start('en-US');
}
//
}
console
.
log
(
'
count
'
,
count
);
//
console.log('count', count);
console
.
log
(
'
count
'
,
count
);
//
console.log('count', count);
};
};
const
getToken
=
data
=>
{
const
getToken
=
data
=>
{
...
@@ -142,7 +155,38 @@ export default function ReadActivityDog() {
...
@@ -142,7 +155,38 @@ export default function ReadActivityDog() {
/
>
/
>
)}
)}
{
modalVisible3
&&
<
ReadModalFailed
visible
=
"
true
"
/>
}
{
modalVisible3
&&
(
<
ReadModalFailed
visible
=
"
true
"
imagePath
=
{
ImagePaths
.
bird1
}
/
>
)}
{
modalVisible
&&
(
<
Modal
animationType
=
"
fade
"
transparent
=
{
true
}
hidden
=
{
true
}
visible
=
{
true
}
// onRequestClose={() => {
// setModalVisible2(!modalVisible2);
// }}
>
<
View
style
=
{
styles
.
centeredView2
}
>
<
View
style
=
{
styles
.
modalView2
}
>
<
Text
style
=
{
styles
.
headStyle2
}
>
Press
The
Button
<
/Text
>
<
Text
style
=
{
styles
.
head2Style2
}
>
And
Pronounce
<
/Text
>
<
TouchableOpacity
style
=
{[
styles
.
buttonClose2
]}
onPress
=
{()
=>
setModalVisible
(
false
)}
>
<
Image
source
=
{
ImagePaths
.
correct
}
resizeMode
=
"
contain
"
style
=
{{
width
:
100
,
height
:
70
,
marginBottom
:
-
10
}}
/
>
<
/TouchableOpacity
>
<
/View
>
<
/View
>
<
/Modal
>
)}
<
View
style
=
{{
flexDirection
:
'
column
'
}}
>
<
View
style
=
{{
flexDirection
:
'
column
'
}}
>
<
ImageBackground
<
ImageBackground
style
=
{
styles
.
image
}
style
=
{
styles
.
image
}
...
@@ -250,4 +294,71 @@ const styles = StyleSheet.create({
...
@@ -250,4 +294,71 @@ const styles = StyleSheet.create({
marginLeft
:
135
,
marginLeft
:
135
,
padding
:
0
,
padding
:
0
,
},
},
centeredView2
:
{
flex
:
1
,
justifyContent
:
'
center
'
,
alignItems
:
'
center
'
,
marginTop
:
22
,
},
modalView2
:
{
marginTop
:
-
10
,
margin
:
20
,
backgroundColor
:
'
#FFFFFFEF
'
,
borderRadius
:
20
,
padding
:
35
,
borderWidth
:
5
,
// borderColor: '#red',
alignItems
:
'
center
'
,
// shadowColor: 'red',
// shadowOffset: {
// width: 0,
// height: 2,
// },
shadowOpacity
:
0.25
,
shadowRadius
:
4
,
elevation
:
5
,
},
button2
:
{
borderRadius
:
20
,
padding
:
10
,
elevation
:
2
,
},
buttonOpen2
:
{
backgroundColor
:
'
#F194FF
'
,
},
buttonClose2
:
{
// backgroundColor: "#1DCE92",
},
textStyle2
:
{
color
:
'
white
'
,
fontWeight
:
'
bold
'
,
textAlign
:
'
center
'
,
},
modalText2
:
{
marginBottom
:
15
,
textAlign
:
'
center
'
,
},
headStyle2
:
{
color
:
'
black
'
,
fontWeight
:
'
bold
'
,
textAlign
:
'
center
'
,
fontSize
:
30
,
marginBottom
:
5
,
},
head2Style2
:
{
color
:
'
black
'
,
fontWeight
:
'
bold
'
,
textAlign
:
'
center
'
,
fontSize
:
30
,
marginBottom
:
20
,
},
alert2
:
{
// backgroundColor: 'rgba(0, 181, 0, 0.45)',
borderRadius
:
50
,
width
:
100
,
height
:
100
,
marginBottom
:
20
,
marginTop
:
-
80
,
},
});
});
frontend/src/screen/reading/advanced/ReadActivityFish.js
View file @
f9617c5e
...
@@ -9,7 +9,7 @@ import {
...
@@ -9,7 +9,7 @@ import {
ImageButton
,
ImageButton
,
SafeAreaView
,
SafeAreaView
,
ImageBackground
,
ImageBackground
,
Button
,
Modal
,
Image
,
Image
,
TouchableHighlight
,
TouchableHighlight
,
}
from
'
react-native
'
;
}
from
'
react-native
'
;
...
@@ -29,6 +29,19 @@ export default function ReadActivityFish() {
...
@@ -29,6 +29,19 @@ export default function ReadActivityFish() {
const
[
modalVisible2
,
setModalVisible2
]
=
useState
(
false
);
const
[
modalVisible2
,
setModalVisible2
]
=
useState
(
false
);
const
[
modalVisible3
,
setModalVisible3
]
=
useState
(
false
);
const
[
modalVisible3
,
setModalVisible3
]
=
useState
(
false
);
React
.
useEffect
(()
=>
{
// StatusBar.setHidden(true);
//
setModalVisible
(
true
);
const
unsubscribe
=
navigation
.
addListener
(
'
focus
'
,
()
=>
{
Orientation
.
unlockAllOrientations
();
Orientation
.
lockToPortrait
();
});
return
unsubscribe
;
},
[
navigation
]);
useEffect
(()
=>
{
useEffect
(()
=>
{
Voice
.
destroy
().
then
(
Voice
.
removeAllListeners
);
Voice
.
destroy
().
then
(
Voice
.
removeAllListeners
);
},
[]);
},
[]);
...
@@ -77,6 +90,7 @@ export default function ReadActivityFish() {
...
@@ -77,6 +90,7 @@ export default function ReadActivityFish() {
};
};
const
onSpeechStartHandler
=
e
=>
{
const
onSpeechStartHandler
=
e
=>
{
setCount
(
count
+
1
);
const
result
=
e
.
value
;
const
result
=
e
.
value
;
if
(
result
.
includes
(
'
fish
'
))
{
if
(
result
.
includes
(
'
fish
'
))
{
AsyncStorage
.
getItem
(
'
userId
'
)
AsyncStorage
.
getItem
(
'
userId
'
)
...
@@ -84,7 +98,7 @@ export default function ReadActivityFish() {
...
@@ -84,7 +98,7 @@ export default function ReadActivityFish() {
const
data
=
{
const
data
=
{
word
:
'
Fish
'
,
word
:
'
Fish
'
,
userId
:
userId
,
userId
:
userId
,
level
:
'
Advance
'
,
level
:
'
Advance
d
'
,
triedCount
:
count
,
triedCount
:
count
,
};
};
getToken
(
data
);
getToken
(
data
);
...
@@ -93,9 +107,7 @@ export default function ReadActivityFish() {
...
@@ -93,9 +107,7 @@ export default function ReadActivityFish() {
console
.
log
(
error
);
console
.
log
(
error
);
});
});
}
else
{
}
else
{
setCount
(
count
+
1
);
setModalVisible3
(
true
);
setModalVisible3
(
true
);
startRecording
();
}
}
};
};
...
@@ -104,29 +116,29 @@ export default function ReadActivityFish() {
...
@@ -104,29 +116,29 @@ export default function ReadActivityFish() {
};
};
const
onSpeechError
=
e
=>
{
const
onSpeechError
=
e
=>
{
console
.
log
(
'
onSpeechError:
'
,
e
);
//
console.log('onSpeechError: ', e);
const
result
=
DummyReadResult
.
value
;
//
const result = DummyReadResult.value;
if
(
result
.
includes
(
'
hello
'
))
{
//
if (result.includes('hello')) {
AsyncStorage
.
getItem
(
'
userId
'
)
//
AsyncStorage.getItem('userId')
.
then
(
userId
=>
{
//
.then(userId => {
const
data
=
{
//
const data = {
word
:
'
fish
'
,
//
word: 'fish',
userId
:
userId
,
//
userId: userId,
level
:
1
,
//
level: 1,
triedCount
:
count
,
//
triedCount: count,
};
//
};
getToken
(
data
);
//
getToken(data);
})
//
})
.
catch
(
error
=>
{
//
.catch(error => {
console
.
log
(
error
);
//
console.log(error);
});
//
});
}
else
{
//
} else {
setCount
(
count
+
1
);
//
setCount(count + 1);
Voice
.
start
(
'
en-US
'
);
//
Voice.start('en-US');
}
//
}
console
.
log
(
'
count
'
,
count
);
//
console.log('count', count);
console
.
log
(
'
count
'
,
count
);
//
console.log('count', count);
};
};
const
getToken
=
data
=>
{
const
getToken
=
data
=>
{
...
@@ -159,7 +171,37 @@ export default function ReadActivityFish() {
...
@@ -159,7 +171,37 @@ export default function ReadActivityFish() {
/
>
/
>
)}
)}
{
modalVisible3
&&
<
ReadModalFailed
visible
=
"
true
"
/>
}
{
modalVisible3
&&
(
<
ReadModalFailed
visible
=
"
true
"
imagePath
=
{
ImagePaths
.
bird1
}
/
>
)}
{
modalVisible
&&
(
<
Modal
animationType
=
"
fade
"
transparent
=
{
true
}
hidden
=
{
true
}
visible
=
{
true
}
// onRequestClose={() => {
// setModalVisible2(!modalVisible2);
// }}
>
<
View
style
=
{
styles
.
centeredView2
}
>
<
View
style
=
{
styles
.
modalView2
}
>
<
Text
style
=
{
styles
.
headStyle2
}
>
Press
The
Button
<
/Text
>
<
Text
style
=
{
styles
.
head2Style2
}
>
And
Pronounce
<
/Text
>
<
TouchableOpacity
style
=
{[
styles
.
buttonClose2
]}
onPress
=
{()
=>
setModalVisible
(
false
)}
>
<
Image
source
=
{
ImagePaths
.
correct
}
resizeMode
=
"
contain
"
style
=
{{
width
:
100
,
height
:
70
,
marginBottom
:
-
10
}}
/
>
<
/TouchableOpacity
>
<
/View
>
<
/View
>
<
/Modal
>
)}
<
View
style
=
{{
flexDirection
:
'
column
'
}}
>
<
View
style
=
{{
flexDirection
:
'
column
'
}}
>
<
ImageBackground
<
ImageBackground
style
=
{
styles
.
image
}
style
=
{
styles
.
image
}
...
@@ -267,4 +309,75 @@ const styles = StyleSheet.create({
...
@@ -267,4 +309,75 @@ const styles = StyleSheet.create({
marginLeft
:
135
,
marginLeft
:
135
,
padding
:
0
,
padding
:
0
,
},
},
//////////
centeredView2
:
{
flex
:
1
,
justifyContent
:
'
center
'
,
alignItems
:
'
center
'
,
marginTop
:
22
,
},
modalView2
:
{
marginTop
:
-
10
,
margin
:
20
,
backgroundColor
:
'
#FFFFFFEF
'
,
borderRadius
:
20
,
padding
:
35
,
borderWidth
:
5
,
// borderColor: '#red',
alignItems
:
'
center
'
,
// shadowColor: 'red',
// shadowOffset: {
// width: 0,
// height: 2,
// },
shadowOpacity
:
0.25
,
shadowRadius
:
4
,
elevation
:
5
,
},
button2
:
{
borderRadius
:
20
,
padding
:
10
,
elevation
:
2
,
},
buttonOpen2
:
{
backgroundColor
:
'
#F194FF
'
,
},
buttonClose2
:
{
// backgroundColor: "#1DCE92",
},
textStyle2
:
{
color
:
'
white
'
,
fontWeight
:
'
bold
'
,
textAlign
:
'
center
'
,
},
modalText2
:
{
marginBottom
:
15
,
textAlign
:
'
center
'
,
},
headStyle2
:
{
color
:
'
black
'
,
fontWeight
:
'
bold
'
,
textAlign
:
'
center
'
,
fontSize
:
30
,
marginBottom
:
5
,
},
head2Style2
:
{
color
:
'
black
'
,
fontWeight
:
'
bold
'
,
textAlign
:
'
center
'
,
fontSize
:
30
,
marginBottom
:
20
,
},
alert2
:
{
// backgroundColor: 'rgba(0, 181, 0, 0.45)',
borderRadius
:
50
,
width
:
100
,
height
:
100
,
marginBottom
:
20
,
marginTop
:
-
80
,
},
});
});
frontend/src/screen/reading/basic/ReadActivityGo.js
View file @
f9617c5e
...
@@ -9,7 +9,7 @@ import {
...
@@ -9,7 +9,7 @@ import {
ImageButton
,
ImageButton
,
SafeAreaView
,
SafeAreaView
,
ImageBackground
,
ImageBackground
,
Button
,
Modal
,
Image
,
Image
,
TouchableHighlight
,
TouchableHighlight
,
}
from
'
react-native
'
;
}
from
'
react-native
'
;
...
@@ -24,11 +24,24 @@ import ReadModalFailed from '../../../component/reading/ReadModalFailed';
...
@@ -24,11 +24,24 @@ import ReadModalFailed from '../../../component/reading/ReadModalFailed';
export
default
function
ReadActivityGo
()
{
export
default
function
ReadActivityGo
()
{
const
navigation
=
useNavigation
();
const
navigation
=
useNavigation
();
const
[
count
,
setCount
]
=
useState
(
1
);
const
[
count
,
setCount
]
=
useState
(
0
);
const
[
modalVisible
,
setModalVisible
]
=
useState
(
false
);
const
[
modalVisible
,
setModalVisible
]
=
useState
(
false
);
const
[
modalVisible2
,
setModalVisible2
]
=
useState
(
false
);
const
[
modalVisible2
,
setModalVisible2
]
=
useState
(
false
);
const
[
modalVisible3
,
setModalVisible3
]
=
useState
(
false
);
const
[
modalVisible3
,
setModalVisible3
]
=
useState
(
false
);
React
.
useEffect
(()
=>
{
// StatusBar.setHidden(true);
//
setModalVisible
(
true
);
const
unsubscribe
=
navigation
.
addListener
(
'
focus
'
,
()
=>
{
Orientation
.
unlockAllOrientations
();
Orientation
.
lockToPortrait
();
});
return
unsubscribe
;
},
[
navigation
]);
useEffect
(()
=>
{
useEffect
(()
=>
{
Voice
.
destroy
().
then
(
Voice
.
removeAllListeners
);
Voice
.
destroy
().
then
(
Voice
.
removeAllListeners
);
},
[]);
},
[]);
...
@@ -64,6 +77,7 @@ export default function ReadActivityGo() {
...
@@ -64,6 +77,7 @@ export default function ReadActivityGo() {
};
};
const
onSpeechResultsHandler
=
e
=>
{
const
onSpeechResultsHandler
=
e
=>
{
setCount
(
count
+
1
);
const
result
=
e
.
value
;
const
result
=
e
.
value
;
if
(
result
.
includes
(
'
go
'
))
{
if
(
result
.
includes
(
'
go
'
))
{
AsyncStorage
.
getItem
(
'
userId
'
)
AsyncStorage
.
getItem
(
'
userId
'
)
...
@@ -80,36 +94,35 @@ export default function ReadActivityGo() {
...
@@ -80,36 +94,35 @@ export default function ReadActivityGo() {
console
.
log
(
error
);
console
.
log
(
error
);
});
});
}
else
{
}
else
{
setCount
(
count
+
1
);
setModalVisible3
(
true
);
setModalVisible3
(
true
);
startRecording
();
}
}
};
};
const
onSpeechError
=
e
=>
{
const
onSpeechError
=
e
=>
{
console
.
log
(
'
onSpeechError:
'
,
e
);
//
console.log('onSpeechError: ', e);
const
result
=
DummyReadResult
.
value
;
//
const result = DummyReadResult.value;
if
(
result
.
includes
(
'
hello
'
))
{
//
if (result.includes('hello')) {
AsyncStorage
.
getItem
(
'
userId
'
)
//
AsyncStorage.getItem('userId')
.
then
(
userId
=>
{
//
.then(userId => {
const
data
=
{
//
const data = {
word
:
'
go
'
,
//
word: 'go',
userId
:
userId
,
//
userId: userId,
level
:
1
,
//
level: 1,
triedCount
:
count
,
//
triedCount: count,
};
//
};
getToken
(
data
);
//
getToken(data);
})
//
})
.
catch
(
error
=>
{
//
.catch(error => {
console
.
log
(
error
);
//
console.log(error);
});
//
});
}
else
{
//
} else {
setCount
(
count
+
1
);
//
setCount(count + 1);
Voice
.
start
(
'
en-US
'
);
//
Voice.start('en-US');
}
//
}
console
.
log
(
'
count
'
,
count
);
//
console.log('count', count);
console
.
log
(
'
count
'
,
count
);
//
console.log('count', count);
};
};
const
getToken
=
data
=>
{
const
getToken
=
data
=>
{
...
@@ -138,10 +151,13 @@ export default function ReadActivityGo() {
...
@@ -138,10 +151,13 @@ export default function ReadActivityGo() {
validity
=
"
Pronunciation.
"
validity
=
"
Pronunciation.
"
visible
=
"
true
"
visible
=
"
true
"
path
=
"
ReadActivityHe
"
path
=
"
ReadActivityHe
"
imagePath
=
{
ImagePaths
.
robot1
}
/
>
/
>
)}
)}
{
modalVisible3
&&
<
ReadModalFailed
visible
=
"
true
"
/>
}
{
modalVisible3
&&
(
<
ReadModalFailed
visible
=
"
true
"
imagePath
=
{
ImagePaths
.
robot1
}
/
>
)}
<
View
style
=
{{
flexDirection
:
'
column
'
}}
>
<
View
style
=
{{
flexDirection
:
'
column
'
}}
>
<
ImageBackground
<
ImageBackground
style
=
{
styles
.
image
}
style
=
{
styles
.
image
}
...
@@ -153,7 +169,7 @@ export default function ReadActivityGo() {
...
@@ -153,7 +169,7 @@ export default function ReadActivityGo() {
<
/View
>
<
/View
>
<
/View
>
<
/View
>
<
View
style
=
{
styles
.
textBody
}
>
<
View
style
=
{
styles
.
textBody
}
>
<
Text
style
=
{
styles
.
text
}
>
Pronounce
t
his
Word
!<
/Text
>
<
Text
style
=
{
styles
.
text
}
>
Pronounce
T
his
Word
!<
/Text
>
<
/View
>
<
/View
>
<
/View
>
<
/View
>
...
@@ -250,4 +266,71 @@ const styles = StyleSheet.create({
...
@@ -250,4 +266,71 @@ const styles = StyleSheet.create({
marginLeft
:
50
,
marginLeft
:
50
,
padding
:
7
,
padding
:
7
,
},
},
centeredView2
:
{
flex
:
1
,
justifyContent
:
'
center
'
,
alignItems
:
'
center
'
,
marginTop
:
22
,
},
modalView2
:
{
marginTop
:
-
10
,
margin
:
20
,
backgroundColor
:
'
#FFFFFFEF
'
,
borderRadius
:
20
,
padding
:
35
,
borderWidth
:
5
,
// borderColor: '#red',
alignItems
:
'
center
'
,
// shadowColor: 'red',
// shadowOffset: {
// width: 0,
// height: 2,
// },
shadowOpacity
:
0.25
,
shadowRadius
:
4
,
elevation
:
5
,
},
button2
:
{
borderRadius
:
20
,
padding
:
10
,
elevation
:
2
,
},
buttonOpen2
:
{
backgroundColor
:
'
#F194FF
'
,
},
buttonClose2
:
{
// backgroundColor: "#1DCE92",
},
textStyle2
:
{
color
:
'
white
'
,
fontWeight
:
'
bold
'
,
textAlign
:
'
center
'
,
},
modalText2
:
{
marginBottom
:
15
,
textAlign
:
'
center
'
,
},
headStyle2
:
{
color
:
'
black
'
,
fontWeight
:
'
bold
'
,
textAlign
:
'
center
'
,
fontSize
:
30
,
marginBottom
:
5
,
},
head2Style2
:
{
color
:
'
black
'
,
fontWeight
:
'
bold
'
,
textAlign
:
'
center
'
,
fontSize
:
30
,
marginBottom
:
20
,
},
alert2
:
{
// backgroundColor: 'rgba(0, 181, 0, 0.45)',
borderRadius
:
50
,
width
:
100
,
height
:
100
,
marginBottom
:
20
,
marginTop
:
-
80
,
},
});
});
frontend/src/screen/reading/basic/ReadActivityHe.js
View file @
f9617c5e
...
@@ -9,7 +9,7 @@ import {
...
@@ -9,7 +9,7 @@ import {
ImageButton
,
ImageButton
,
SafeAreaView
,
SafeAreaView
,
ImageBackground
,
ImageBackground
,
Button
,
Modal
,
Image
,
Image
,
TouchableHighlight
,
TouchableHighlight
,
}
from
'
react-native
'
;
}
from
'
react-native
'
;
...
@@ -24,11 +24,24 @@ import ReadModalFailed from '../../../component/reading/ReadModalFailed';
...
@@ -24,11 +24,24 @@ import ReadModalFailed from '../../../component/reading/ReadModalFailed';
export
default
function
ReadActivityHe
()
{
export
default
function
ReadActivityHe
()
{
const
navigation
=
useNavigation
();
const
navigation
=
useNavigation
();
const
[
count
,
setCount
]
=
useState
(
1
);
const
[
count
,
setCount
]
=
useState
(
0
);
const
[
modalVisible
,
setModalVisible
]
=
useState
(
false
);
const
[
modalVisible
,
setModalVisible
]
=
useState
(
false
);
const
[
modalVisible2
,
setModalVisible2
]
=
useState
(
false
);
const
[
modalVisible2
,
setModalVisible2
]
=
useState
(
false
);
const
[
modalVisible3
,
setModalVisible3
]
=
useState
(
false
);
const
[
modalVisible3
,
setModalVisible3
]
=
useState
(
false
);
React
.
useEffect
(()
=>
{
// StatusBar.setHidden(true);
//
setModalVisible
(
true
);
const
unsubscribe
=
navigation
.
addListener
(
'
focus
'
,
()
=>
{
Orientation
.
unlockAllOrientations
();
Orientation
.
lockToPortrait
();
});
return
unsubscribe
;
},
[
navigation
]);
useEffect
(()
=>
{
useEffect
(()
=>
{
Voice
.
destroy
().
then
(
Voice
.
removeAllListeners
);
Voice
.
destroy
().
then
(
Voice
.
removeAllListeners
);
},
[]);
},
[]);
...
@@ -82,6 +95,7 @@ export default function ReadActivityHe() {
...
@@ -82,6 +95,7 @@ export default function ReadActivityHe() {
};
};
const
onSpeechResultsHandler
=
e
=>
{
const
onSpeechResultsHandler
=
e
=>
{
setCount
(
count
+
1
);
const
result
=
e
.
value
;
const
result
=
e
.
value
;
if
(
result
.
includes
(
'
He
'
))
{
if
(
result
.
includes
(
'
He
'
))
{
AsyncStorage
.
getItem
(
'
userId
'
)
AsyncStorage
.
getItem
(
'
userId
'
)
...
@@ -98,36 +112,35 @@ export default function ReadActivityHe() {
...
@@ -98,36 +112,35 @@ export default function ReadActivityHe() {
console
.
log
(
error
);
console
.
log
(
error
);
});
});
}
else
{
}
else
{
setCount
(
count
+
1
);
setModalVisible3
(
true
);
setModalVisible3
(
true
);
startRecording
();
}
}
};
};
const
onSpeechError
=
e
=>
{
const
onSpeechError
=
e
=>
{
console
.
log
(
'
onSpeechError:
'
,
e
);
//
console.log('onSpeechError: ', e);
const
result
=
DummyReadResult
.
value
;
//
const result = DummyReadResult.value;
if
(
result
.
includes
(
'
hello
'
))
{
//
if (result.includes('hello')) {
AsyncStorage
.
getItem
(
'
userId
'
)
//
AsyncStorage.getItem('userId')
.
then
(
userId
=>
{
//
.then(userId => {
const
data
=
{
//
const data = {
word
:
'
he
'
,
//
word: 'he',
userId
:
userId
,
//
userId: userId,
level
:
1
,
//
level: 1,
triedCount
:
count
,
//
triedCount: count,
};
//
};
getToken
(
data
);
//
getToken(data);
})
//
})
.
catch
(
error
=>
{
//
.catch(error => {
console
.
log
(
error
);
//
console.log(error);
});
//
});
}
else
{
//
} else {
setCount
(
count
+
1
);
//
setCount(count + 1);
Voice
.
start
(
'
en-US
'
);
//
Voice.start('en-US');
}
//
}
console
.
log
(
'
count
'
,
count
);
//
console.log('count', count);
console
.
log
(
'
count
'
,
count
);
//
console.log('count', count);
};
};
const
getToken
=
data
=>
{
const
getToken
=
data
=>
{
...
@@ -152,14 +165,45 @@ export default function ReadActivityHe() {
...
@@ -152,14 +165,45 @@ export default function ReadActivityHe() {
<
SafeAreaView
>
<
SafeAreaView
>
{
modalVisible2
&&
(
{
modalVisible2
&&
(
<
ReadModal
<
ReadModal
caption
=
"
Basic
"
caption
=
"
Basic
Level
"
validity
=
"
Level
Completed.
"
validity
=
"
Completed.
"
visible
=
"
true
"
visible
=
"
true
"
path
=
"
Read
"
path
=
"
Read
"
imagePath
=
{
ImagePaths
.
robot1
}
/
>
/
>
)}
)}
{
modalVisible3
&&
<
ReadModalFailed
visible
=
"
true
"
/>
}
{
modalVisible3
&&
(
<
ReadModalFailed
visible
=
"
true
"
imagePath
=
{
ImagePaths
.
robot1
}
/
>
)}
{
modalVisible
&&
(
<
Modal
animationType
=
"
fade
"
transparent
=
{
true
}
hidden
=
{
true
}
visible
=
{
true
}
// onRequestClose={() => {
// setModalVisible2(!modalVisible2);
// }}
>
<
View
style
=
{
styles
.
centeredView2
}
>
<
View
style
=
{
styles
.
modalView2
}
>
<
Text
style
=
{
styles
.
headStyle2
}
>
Press
The
Button
<
/Text
>
<
Text
style
=
{
styles
.
head2Style2
}
>
And
Pronounce
<
/Text
>
<
TouchableOpacity
style
=
{[
styles
.
buttonClose2
]}
onPress
=
{()
=>
setModalVisible
(
false
)}
>
<
Image
source
=
{
ImagePaths
.
correct
}
resizeMode
=
"
contain
"
style
=
{{
width
:
100
,
height
:
70
,
marginBottom
:
-
10
}}
/
>
<
/TouchableOpacity
>
<
/View
>
<
/View
>
<
/Modal
>
)}
<
View
style
=
{{
flexDirection
:
'
column
'
}}
>
<
View
style
=
{{
flexDirection
:
'
column
'
}}
>
<
ImageBackground
<
ImageBackground
style
=
{
styles
.
image
}
style
=
{
styles
.
image
}
...
@@ -268,4 +312,71 @@ const styles = StyleSheet.create({
...
@@ -268,4 +312,71 @@ const styles = StyleSheet.create({
marginLeft
:
50
,
marginLeft
:
50
,
padding
:
7
,
padding
:
7
,
},
},
centeredView2
:
{
flex
:
1
,
justifyContent
:
'
center
'
,
alignItems
:
'
center
'
,
marginTop
:
22
,
},
modalView2
:
{
marginTop
:
-
10
,
margin
:
20
,
backgroundColor
:
'
#FFFFFFEF
'
,
borderRadius
:
20
,
padding
:
35
,
borderWidth
:
5
,
// borderColor: '#red',
alignItems
:
'
center
'
,
// shadowColor: 'red',
// shadowOffset: {
// width: 0,
// height: 2,
// },
shadowOpacity
:
0.25
,
shadowRadius
:
4
,
elevation
:
5
,
},
button2
:
{
borderRadius
:
20
,
padding
:
10
,
elevation
:
2
,
},
buttonOpen2
:
{
backgroundColor
:
'
#F194FF
'
,
},
buttonClose2
:
{
// backgroundColor: "#1DCE92",
},
textStyle2
:
{
color
:
'
white
'
,
fontWeight
:
'
bold
'
,
textAlign
:
'
center
'
,
},
modalText2
:
{
marginBottom
:
15
,
textAlign
:
'
center
'
,
},
headStyle2
:
{
color
:
'
black
'
,
fontWeight
:
'
bold
'
,
textAlign
:
'
center
'
,
fontSize
:
30
,
marginBottom
:
5
,
},
head2Style2
:
{
color
:
'
black
'
,
fontWeight
:
'
bold
'
,
textAlign
:
'
center
'
,
fontSize
:
30
,
marginBottom
:
20
,
},
alert2
:
{
// backgroundColor: 'rgba(0, 181, 0, 0.45)',
borderRadius
:
50
,
width
:
100
,
height
:
100
,
marginBottom
:
20
,
marginTop
:
-
80
,
},
});
});
frontend/src/screen/reading/basic/ReadActivityNo.js
View file @
f9617c5e
...
@@ -26,7 +26,7 @@ import ReadModalFailed from '../../../component/reading/ReadModalFailed';
...
@@ -26,7 +26,7 @@ import ReadModalFailed from '../../../component/reading/ReadModalFailed';
export
default
function
ReadActivityNo
()
{
export
default
function
ReadActivityNo
()
{
const
navigation
=
useNavigation
();
const
navigation
=
useNavigation
();
const
[
count
,
setCount
]
=
useState
(
1
);
const
[
count
,
setCount
]
=
useState
(
0
);
const
[
modalVisible
,
setModalVisible
]
=
useState
(
false
);
const
[
modalVisible
,
setModalVisible
]
=
useState
(
false
);
const
[
modalVisible2
,
setModalVisible2
]
=
useState
(
false
);
const
[
modalVisible2
,
setModalVisible2
]
=
useState
(
false
);
const
[
modalVisible3
,
setModalVisible3
]
=
useState
(
false
);
const
[
modalVisible3
,
setModalVisible3
]
=
useState
(
false
);
...
@@ -34,6 +34,7 @@ export default function ReadActivityNo() {
...
@@ -34,6 +34,7 @@ export default function ReadActivityNo() {
React
.
useEffect
(()
=>
{
React
.
useEffect
(()
=>
{
// StatusBar.setHidden(true);
// StatusBar.setHidden(true);
//
//
setModalVisible
(
true
);
audioInit
();
audioInit
();
const
unsubscribe
=
navigation
.
addListener
(
'
focus
'
,
()
=>
{
const
unsubscribe
=
navigation
.
addListener
(
'
focus
'
,
()
=>
{
...
@@ -162,6 +163,7 @@ export default function ReadActivityNo() {
...
@@ -162,6 +163,7 @@ export default function ReadActivityNo() {
};
};
const
onSpeechResultsHandler
=
e
=>
{
const
onSpeechResultsHandler
=
e
=>
{
setCount
(
count
+
1
);
const
result
=
e
.
value
;
const
result
=
e
.
value
;
if
(
result
.
includes
(
'
no
'
))
{
if
(
result
.
includes
(
'
no
'
))
{
AsyncStorage
.
getItem
(
'
userId
'
)
AsyncStorage
.
getItem
(
'
userId
'
)
...
@@ -178,36 +180,36 @@ export default function ReadActivityNo() {
...
@@ -178,36 +180,36 @@ export default function ReadActivityNo() {
console
.
log
(
error
);
console
.
log
(
error
);
});
});
}
else
{
}
else
{
setCount
(
count
+
1
);
setModalVisible3
(
true
);
setModalVisible3
(
true
);
startRecording
();
}
}
console
.
log
(
'
count
'
,
count
);
console
.
log
(
'
count
'
,
count
);
};
};
const
onSpeechError
=
e
=>
{
const
onSpeechError
=
e
=>
{
console
.
log
(
'
onSpeechError:
'
,
e
);
// setCount(count + 1);
const
result
=
DummyReadResult
.
value
;
// console.log('onSpeechError: ', e);
if
(
result
.
includes
(
'
helloddd
'
))
{
// const result = DummyReadResult.value;
AsyncStorage
.
getItem
(
'
userId
'
)
// if (result.includes('hello')) {
.
then
(
userId
=>
{
// AsyncStorage.getItem('userId')
const
data
=
{
// .then(userId => {
word
:
'
no
'
,
// const data = {
userId
:
userId
,
// word: 'no',
level
:
1
,
// userId: userId,
triedCount
:
count
,
// level: 1,
};
// triedCount: count,
getToken
(
data
);
// };
})
// getToken(data);
.
catch
(
error
=>
{
// })
console
.
log
(
error
);
// .catch(error => {
});
// console.log(error);
}
else
{
// });
setCount
(
count
+
1
);
// } else {
setModalVisible3
(
true
);
console
.
log
(
count
);
// setModalVisible3(true);
startRecording
();
// console.log(count);
}
// }
};
};
const
getToken
=
data
=>
{
const
getToken
=
data
=>
{
...
@@ -236,10 +238,69 @@ export default function ReadActivityNo() {
...
@@ -236,10 +238,69 @@ export default function ReadActivityNo() {
validity
=
"
Pronunciation.
"
validity
=
"
Pronunciation.
"
visible
=
"
true
"
visible
=
"
true
"
path
=
"
ReadActivityGo
"
path
=
"
ReadActivityGo
"
imagePath
=
{
ImagePaths
.
robot1
}
/
>
/
>
)}
)}
{
modalVisible3
&&
<
ReadModalFailed
visible
=
"
true
"
/>
}
{
modalVisible3
&&
(
<
ReadModalFailed
visible
=
"
true
"
imagePath
=
{
ImagePaths
.
robot1
}
/
>
)}
{
modalVisible
&&
(
<
Modal
animationType
=
"
fade
"
transparent
=
{
true
}
hidden
=
{
true
}
visible
=
{
true
}
// onRequestClose={() => {
// setModalVisible2(!modalVisible2);
// }}
>
<
View
style
=
{
styles
.
centeredView2
}
>
<
View
style
=
{
styles
.
modalView2
}
>
<
Text
style
=
{
styles
.
headStyle2
}
>
Press
The
Button
<
/Text
>
<
Text
style
=
{
styles
.
head2Style2
}
>
And
Pronounce
<
/Text
>
<
TouchableOpacity
style
=
{[
styles
.
buttonClose2
]}
onPress
=
{()
=>
setModalVisible
(
false
)}
>
<
Image
source
=
{
ImagePaths
.
correct
}
resizeMode
=
"
contain
"
style
=
{{
width
:
100
,
height
:
70
,
marginBottom
:
-
10
}}
/
>
<
/TouchableOpacity
>
<
/View
>
<
/View
>
<
/Modal
>
)}
{
modalVisible
&&
(
<
Modal
animationType
=
"
fade
"
transparent
=
{
true
}
hidden
=
{
true
}
visible
=
{
true
}
// onRequestClose={() => {
// setModalVisible2(!modalVisible2);
// }}
>
<
View
style
=
{
styles
.
centeredView2
}
>
<
View
style
=
{
styles
.
modalView2
}
>
<
Text
style
=
{
styles
.
headStyle2
}
>
Press
The
Button
<
/Text
>
<
Text
style
=
{
styles
.
head2Style2
}
>
And
Pronounce
<
/Text
>
<
TouchableOpacity
style
=
{[
styles
.
buttonClose2
]}
onPress
=
{()
=>
setModalVisible
(
false
)}
>
<
Image
source
=
{
ImagePaths
.
correct
}
resizeMode
=
"
contain
"
style
=
{{
width
:
100
,
height
:
70
,
marginBottom
:
-
10
}}
/
>
<
/TouchableOpacity
>
<
/View
>
<
/View
>
<
/Modal
>
)}
<
View
style
=
{{
flexDirection
:
'
column
'
}}
>
<
View
style
=
{{
flexDirection
:
'
column
'
}}
>
<
ImageBackground
<
ImageBackground
...
@@ -350,4 +411,70 @@ const styles = StyleSheet.create({
...
@@ -350,4 +411,70 @@ const styles = StyleSheet.create({
padding
:
7
,
padding
:
7
,
},
},
centeredView2
:
{
flex
:
1
,
justifyContent
:
'
center
'
,
alignItems
:
'
center
'
,
marginTop
:
22
,
},
modalView2
:
{
marginTop
:
-
10
,
margin
:
20
,
backgroundColor
:
'
#FFFFFFEF
'
,
borderRadius
:
20
,
padding
:
35
,
borderWidth
:
5
,
// borderColor: '#red',
alignItems
:
'
center
'
,
// shadowColor: 'red',
// shadowOffset: {
// width: 0,
// height: 2,
// },
shadowOpacity
:
0.25
,
shadowRadius
:
4
,
elevation
:
5
,
},
button2
:
{
borderRadius
:
20
,
padding
:
10
,
elevation
:
2
,
},
buttonOpen2
:
{
backgroundColor
:
'
#F194FF
'
,
},
buttonClose2
:
{
// backgroundColor: "#1DCE92",
},
textStyle2
:
{
color
:
'
white
'
,
fontWeight
:
'
bold
'
,
textAlign
:
'
center
'
,
},
modalText2
:
{
marginBottom
:
15
,
textAlign
:
'
center
'
,
},
headStyle2
:
{
color
:
'
black
'
,
fontWeight
:
'
bold
'
,
textAlign
:
'
center
'
,
fontSize
:
30
,
marginBottom
:
5
,
},
head2Style2
:
{
color
:
'
black
'
,
fontWeight
:
'
bold
'
,
textAlign
:
'
center
'
,
fontSize
:
30
,
marginBottom
:
20
,
},
alert2
:
{
// backgroundColor: 'rgba(0, 181, 0, 0.45)',
borderRadius
:
50
,
width
:
100
,
height
:
100
,
marginBottom
:
20
,
marginTop
:
-
80
,
},
});
});
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment