teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

コードの追加

2020/09/25 04:27

投稿

takespring
takespring

スコア12

title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,131 @@
1
1
  jsでcodeを書いていて、SpeechSynthesisUtteranceで単語を読ませるようにしています。
2
2
  普通の単語はうまく読んでくれるのですが、アポストロフィーを読んでくれません。
3
3
  例えば、'Let\'s go'(英)、'l\'elefante'(伊)、'l\'éléphant'(仏)などは『Uncaught SyntaxError: missing ) after argument list』というエラーが出ますが、'le zèbre'(仏)はエラーも出ずに正常に動きます。それぞれの文字入力は入力法を切り替えて入力しています。使う言語は 表示言語、音声合成、音声認識、手書きなどインストール済みです。OSはWindowsです。
4
- どのようにすれば改善するでしょうか?
4
+ どのようにすれば改善するでしょうか?
5
+
6
+ ```javascript
7
+ 'use strict';
8
+ //日本語カードの配列
9
+ const doubutsu =
10
+ ['inu', 'usagi', 'ushi', 'uma', 'saru', 'neko', 'nezumi', 'kirin',
11
+ 'shika', 'zou', 'buta', 'raion', 'risu', 'kaba', 'kangaru',
12
+ 'kitsune', 'kuma', 'pannda', 'koara', 'gorira', 'tora', 'hitsuji',
13
+ 'yagi', 'ookami', 'sai', 'shimauma', 'tanuki', 'rakuda', 'kyouryuu',
14
+ 'cinpanji', 'hyou', 'koumori', 'tonakai', 'harinezumi', 'mogura',
15
+ 'roba', 'sukanku', 'doubutsu', 'shippo', 'araiguma', 'musasabi',
16
+ 'inoshishi', 'kamonohashi'];
17
+
18
+ //フランス語の配列
19
+ const Fanimals =
20
+ ['le chien', 'le lapin', 'la vache', 'le cheval', 'le singe', 'le chat',
21
+ 'la souris', 'la girafe', 'le cerf', 'l\'éléphqnt', 'le cochon', 'le lion',
22
+ 'l\'écureil', 'l\'hippopotame', 'les kangourous', 'le renard', 'l\'ours',
23
+ 'le panda', 'le koala', 'le gorille', 'le tigre', 'le mouton', 'la chèvre',
24
+ 'le loup', 'le rhinocéros', 'le zèbre', 'le blaireau', 'les chameaux',
25
+ 'le dinosaure', 'le chimpanzé', 'le léopard', 'la chauve-souris', 'le renne',
26
+ 'le hérisson', 'la taupe', 'l\'âne', 'la mouffette', 'les animaux',
27
+ 'les queues', 'le raton laveur', 'l\'écureuil volant', 'les sangliers',
28
+ 'l\'ornithorynaue'];
29
+
30
+ //イタリア語の配列
31
+ const Ianimals =
32
+ ['il cane', 'il coniglio', 'la vacca', 'il cavallo', 'la scimmia',
33
+ 'il gatto', 'il topo', 'la giraffa', 'il cervo', 'l\'elefante',
34
+ 'il maiale', 'il leone', 'lo scoiattolo', 'l\'ippopotamo', 'i canguri',
35
+ 'la volpe', 'l\'orso', 'il panda', 'il koala', 'il gorilla', 'la tigre',
36
+ 'la pecola', 'la capra', 'il lupo', 'il rinoceronte', 'la zebra',
37
+ 'il cane procione', 'i cammelli', 'il dinosauro', 'il scimpanze',
38
+ 'il leopardo', 'il pipistrello', 'la renna', 'il riccio', 'la talpa',
39
+ 'l\'asino', 'la moffetta', 'gli animali', 'le code', 'il procione',
40
+ 'lo scoiattolo volante', 'i cinghiali', 'l\'ornitorinco'];
41
+
42
+ let matchCards = [];
43
+
44
+ const jCards = doubutsu;
45
+ const wCards = Fanimals;
46
+ const pictures = Array.from(jCards);
47
+ const answers = Array.from(wCards);
48
+
49
+ //日本語カード Yates shuffle
50
+ for(let i = pictures.length - 1; i >= 0; i--){
51
+ let r = Math.floor(Math.random() * ( i + 1));
52
+ const japanese = pictures[r];
53
+ jArea.insertAdjacentHTML('afterbegin', `<img src="image/doubutsu/${japanese}.jpg"
54
+ id="${japanese}" onclick="imgCheck('${japanese}')">`);
55
+ [pictures[i], pictures[r]] = [pictures[r], pictures[i]];
56
+ }
57
+
58
+ //外国語カード Yates shuffle
59
+ for(let i = answers.length - 1; i >= 0; i--){
60
+ let r = Math.floor(Math.random() * (i + 1));
61
+ const words = answers[r];
62
+ wArea.insertAdjacentHTML('afterbegin', `<button id="${words}"
63
+ onclick="wordCheck('${words}')">${words}</button>`);
64
+ [answers[i], answers[r]] = [answers[r], answers[i]];
65
+ }
66
+
67
+ function imgCheck(japanese){
68
+ document.getElementById(japanese).style.opacity = 0.6;
69
+ matchCards.unshift(japanese);
70
+ jArea.style.pointerEvents = "none";
71
+ console.log(matchCards);
72
+ if(matchCards.length === 2){
73
+ check();
74
+ } else {
75
+ return;
76
+ }
77
+ }
78
+
79
+ function wordCheck(words){
80
+ document.getElementById(words).style.opacity = 0.6;
81
+ matchCards.push(words);
82
+ wArea.style.pointerEvents = "none";
83
+ console.log(matchCards);
84
+ if(matchCards.length === 2){
85
+ check();
86
+ } else {
87
+ return;
88
+ }
89
+ }
90
+ //const language = 'it-IT';
91
+ //const language = 'en-US';
92
+ //const language = 'es-ES';
93
+ const language = 'fr-FR';
94
+ //const language = 'de-DE'
95
+
96
+ function disappear(){
97
+ console.log(matchCards);
98
+ document.getElementById(matchCards[0]).style.display = "none";
99
+ document.getElementById(matchCards[1]).style.display = "none";
100
+ matchCards = [];
101
+ }
102
+
103
+ function check(){
104
+ console.log(jCards.indexOf(matchCards[0]));
105
+ console.log(wCards.indexOf(matchCards[1]));
106
+ if(jCards.indexOf(matchCards[0]) === wCards.indexOf(matchCards[1])){
107
+ let voice = new SpeechSynthesisUtterance();
108
+ voice.text = matchCards[1];
109
+ voice.lang = language;
110
+ speechSynthesis.speak(voice);
111
+ jArea.style.pointerEvents = "";
112
+ wArea.style.pointerEvents = "";
113
+ setTimeout(disappear, 1300);
114
+ const pIndex = jCards.indexOf(`${matchCards[0]}.jpg`);
115
+ pictures.splice(pIndex, 1);
116
+ if(pictures.length === 0){
117
+ location.href = 'clear.html';
118
+ }
119
+ } else {
120
+ var voice = new SpeechSynthesisUtterance();
121
+ voice.text = '間違いです';
122
+ voice.lang = 'ja-JP';
123
+ speechSynthesis.speak(voice);
124
+ document.getElementById(matchCards[0]).style.opacity = "initial";
125
+ document.getElementById(matchCards[1]).style.opacity = "initial";
126
+ matchCards = [];
127
+ jArea.style.pointerEvents = "";
128
+ wArea.style.pointerEvents = "";
129
+ }
130
+ }
131
+ ```