https://ieben.net/music/syou-listcard/js/listcard.js

1var i;
2
3/* ----- 一覧のクイズ形式表示 ----- */
4var lfdIdArr = ['lfd_1', 'lfd_2', 'lfd_3', 'lfd_4', 'lfd_5', 'lfd_6', 'lfd_7', 'lfd_8', 'lfd_9', 'lfd_10', 'lfd_11', 'lfd_12', 'lfd_13', 'lfd_14', 'lfd_15', 'lfd_16', 'lfd_17', 'lfd_18', 'lfd_19', 'lfd_20', 'lfd_21', 'lfd_22', 'lfd_23', 'lfd_24', 'lfd_25', 'lfd_26', 'lfd_27', 'lfd_28', 'lfd_29', 'lfd_30', 'lfd_31', 'lfd_32', 'lfd_33', 'lfd_34', 'lfd_35', 'lfd_36', 'lfd_37', 'lfd_38']; //left-boxのfront-displayのidの配列
5var lbdIdArr = ['lbd_1', 'lbd_2', 'lbd_3', 'lbd_4', 'lbd_5', 'lbd_6', 'lbd_7', 'lbd_8', 'lbd_9', 'lbd_10', 'lbd_11', 'lbd_12', 'lbd_13', 'lbd_14', 'lbd_15', 'lbd_16', 'lbd_17', 'lbd_18', 'lbd_19', 'lbd_20', 'lbd_21', 'lbd_22', 'lbd_23', 'lbd_24', 'lbd_25', 'lbd_26', 'lbd_27', 'lbd_28', 'lbd_29', 'lbd_30', 'lbd_31', 'lbd_32', 'lbd_33', 'lbd_34', 'lbd_35', 'lbd_36', 'lbd_37', 'lbd_38']; //left-boxのback-displayのidの配列
6var cfdIdArr = ['cfd_1', 'cfd_2', 'cfd_3', 'cfd_4', 'cfd_5', 'cfd_6', 'cfd_7', 'cfd_8', 'cfd_9', 'cfd_10', 'cfd_11', 'cfd_12', 'cfd_13', 'cfd_14', 'cfd_15', 'cfd_16', 'cfd_17', 'cfd_18', 'cfd_19', 'cfd_20', 'cfd_21', 'cfd_22', 'cfd_23', 'cfd_24', 'cfd_25', 'cfd_26', 'cfd_27', 'cfd_28', 'cfd_29', 'cfd_30', 'cfd_31', 'cfd_32', 'cfd_33', 'cfd_34', 'cfd_35', 'cfd_36', 'cfd_37', 'cfd_38']; //center-boxのfront-displayのidの配列
7var cbdIdArr = ['cbd_1', 'cbd_2', 'cbd_3', 'cbd_4', 'cbd_5', 'cbd_6', 'cbd_7', 'cbd_8', 'cbd_9', 'cbd_10', 'cbd_11', 'cbd_12', 'cbd_13', 'cbd_14', 'cbd_15', 'cbd_16', 'cbd_17', 'cbd_18', 'cbd_19', 'cbd_20', 'cbd_21', 'cbd_22', 'cbd_23', 'cbd_24', 'cbd_25', 'cbd_26', 'cbd_27', 'cbd_28', 'cbd_29', 'cbd_30', 'cbd_31', 'cbd_32', 'cbd_33', 'cbd_34', 'cbd_35', 'cbd_36', 'cbd_37', 'cbd_38']; //center-boxのback-displayのidの配列
8var rfdIdArr = ['rfd_1', 'rfd_2', 'rfd_3', 'rfd_4', 'rfd_5', 'rfd_6', 'rfd_7', 'rfd_8', 'rfd_9', 'rfd_10', 'rfd_11', 'rfd_12', 'rfd_13', 'rfd_14', 'rfd_15', 'rfd_16', 'rfd_17', 'rfd_18', 'rfd_19', 'rfd_20', 'rfd_21', 'rfd_22', 'rfd_23', 'rfd_24', 'rfd_25', 'rfd_26', 'rfd_27', 'rfd_28', 'rfd_29', 'rfd_30', 'rfd_31', 'rfd_32', 'rfd_33', 'rfd_34', 'rfd_35', 'rfd_36', 'rfd_37', 'rfd_38']; //right-boxのfront-displayのidの配列
9var rbdIdArr = ['rbd_1', 'rbd_2', 'rbd_3', 'rbd_4', 'rbd_5', 'rbd_6', 'rbd_7', 'rbd_8', 'rbd_9', 'rbd_10', 'rbd_11', 'rbd_12', 'rbd_13', 'rbd_14', 'rbd_15', 'rbd_16', 'rbd_17', 'rbd_18', 'rbd_19', 'rbd_20', 'rbd_21', 'rbd_22', 'rbd_23', 'rbd_24', 'rbd_25', 'rbd_26', 'rbd_27', 'rbd_28', 'rbd_29', 'rbd_30', 'rbd_31', 'rbd_32', 'rbd_33', 'rbd_34', 'rbd_35', 'rbd_36', 'rbd_37', 'rbd_38']; //right-boxのback-displayのidの配列
10
11
12
13/* ---------- 一覧を一括でクエスチョンにする動作 ----------*/
14function questiondisp(str, num) {
15  'use strict';
16  var arrstart, arrend, FtgId, BtgId, Ftarget, Btarget;
17  switch (num) {
18    case 1:
19      arrstart = 0;
20      arrend = 7;
21      break;
22    case 2:
23      arrstart = 9;
24      arrend = 10;
25      break;
26    case 3:
27      arrstart = 11;
28      arrend = 16;
29      break;
30    case 4:
31      arrstart = 17;
32      arrend = 19;
33      break;
34    case 5:
35      arrstart = 20;
36      arrend = 25;
37      break;
38    case 6:
39      arrstart = 26;
40      arrend = 29;
41      break;
42    case 7:
43      arrstart = 30;
44      arrend = 31;
45      break;
46    case 8:
47      arrstart = 32;
48      arrend = 36;
49      break;
50    case 9:
51      arrstart = 37;
52      arrend = 37;
53      break;
54  }
55
56  if (str === 'l') {
57    for (i = arrstart; i <= arrend; i = i + 1) {
58      FtgId = lfdIdArr[i];
59      BtgId = lbdIdArr[i];
60      Ftarget = document.getElementById(FtgId);
61      Btarget = document.getElementById(BtgId);
62      if (Ftarget.className === 'L_f r_front') {
63        Ftarget.className = 'L_f  r_front_click';
64        Btarget.className = 'L_b r_back_click';
65      }
66    }
67  } else if (str === 'c') {
68    for (i = arrstart; i <= arrend; i = i + 1) {
69      FtgId = cfdIdArr[i];
70      BtgId = cbdIdArr[i];
71      Ftarget = document.getElementById(FtgId);
72      Btarget = document.getElementById(BtgId);
73      if (Ftarget.className === 'C_f r_front') {
74        Ftarget.className = 'C_f  r_front_click';
75        Btarget.className = 'C_b r_back_click';
76      }
77    }
78  } else {
79    for (i = arrstart; i <= arrend; i = i + 1) {
80      FtgId = rfdIdArr[i];
81      BtgId = rbdIdArr[i];
82      Ftarget = document.getElementById(FtgId);
83      Btarget = document.getElementById(BtgId);
84      if (Ftarget.className === 'R_f r_front') {
85        Ftarget.className = 'R_f  r_front_click';
86        Btarget.className = 'R_b r_back_click';
87      }
88    }
89  }
90}
91
92/* ---------- 一覧を一括でテキストにする動作 ----------*/
93function textdisp(str, num) {
94  'use strict';
95  var arrstart, arrend, FtgId, BtgId, Ftarget, Btarget;
96  switch (num) {
97    case 1:
98      arrstart = 0;
99      arrend = 7;
100      break;
101    case 2:
102      arrstart = 9;
103      arrend = 10;
104      break;
105    case 3:
106      arrstart = 11;
107      arrend = 16;
108      break;
109    case 4:
110      arrstart = 17;
111      arrend = 19;
112      break;
113    case 5:
114      arrstart = 20;
115      arrend = 25;
116      break;
117    case 6:
118      arrstart = 26;
119      arrend = 29;
120      break;
121    case 7:
122      arrstart = 30;
123      arrend = 31;
124      break;
125    case 8:
126      arrstart = 32;
127      arrend = 36;
128      break;
129    case 9:
130      arrstart = 37;
131      arrend = 37;
132      break;
133  }
134
135  if (str === 'l') {
136    for (i = arrstart; i <= arrend; i = i + 1) {
137      FtgId = lfdIdArr[i];
138      BtgId = lbdIdArr[i];
139      Ftarget = document.getElementById(FtgId);
140      Btarget = document.getElementById(BtgId);
141      if (Ftarget.className !== 'L_f r_front') {
142        Ftarget.className = 'L_f r_front';
143        Btarget.className = 'L_b r_back';
144      }
145    }
146  } else if (str === 'c') {
147    for (i = arrstart; i <= arrend; i = i + 1) {
148      FtgId = cfdIdArr[i];
149      BtgId = cbdIdArr[i];
150      Ftarget = document.getElementById(FtgId);
151      Btarget = document.getElementById(BtgId);
152      if (Ftarget.className !== 'C_f r_front') {
153        Ftarget.className = 'C_f r_front';
154        Btarget.className = 'C_b r_back';
155      }
156    }
157  } else {
158    for (i = arrstart; i <= arrend; i = i + 1) {
159      FtgId = rfdIdArr[i];
160      BtgId = rbdIdArr[i];
161      Ftarget = document.getElementById(FtgId);
162      Btarget = document.getElementById(BtgId);
163      if (Ftarget.className !== 'R_f r_front') {
164        Ftarget.className = 'R_f r_front';
165        Btarget.className = 'R_b r_back';
166      }
167    }
168  }
169}
170
171
172/* ---------- 各カードをめくる動作 ----------*/
173//left-boxのクリック動作
174function lb_click(num) {
175  'use strict';
176  var FtgId, BtgId, Ftarget, Btarget;
177
178  FtgId = lfdIdArr[num - 1];
179  BtgId = lbdIdArr[num - 1];
180  Ftarget = document.getElementById(FtgId);
181  Btarget = document.getElementById(BtgId);
182  if (Ftarget.className === 'L_f r_front') {
183    Ftarget.className = 'L_f  r_front_click';
184    Btarget.className = 'L_b r_back_click';
185  } else {
186    Ftarget.className = 'L_f r_front';
187    Btarget.className = 'L_b r_back';
188  }
189}
190
191//center-boxのクリック動作
192function cb_click(num) {
193  'use strict';
194  var FtgId, BtgId, Ftarget, Btarget;
195
196  FtgId = cfdIdArr[num - 1];
197  BtgId = cbdIdArr[num - 1];
198  Ftarget = document.getElementById(FtgId);
199  Btarget = document.getElementById(BtgId);
200  if (Ftarget.className === 'C_f r_front') {
201    Ftarget.className = 'C_f  r_front_click';
202    Btarget.className = 'C_b r_back_click';
203  } else {
204    Ftarget.className = 'C_f r_front';
205    Btarget.className = 'C_b r_back';
206  }
207}
208
209//right-boxのクリック動作
210function rb_click(num) {
211  'use strict';
212  var FtgId, BtgId, Ftarget, Btarget;
213
214  FtgId = rfdIdArr[num - 1];
215  BtgId = rbdIdArr[num - 1];
216  Ftarget = document.getElementById(FtgId);
217  Btarget = document.getElementById(BtgId);
218  if (Ftarget.className === 'R_f r_front') {
219    Ftarget.className = 'R_f  r_front_click';
220    Btarget.className = 'R_b r_back_click';
221  } else {
222    Ftarget.className = 'R_f r_front';
223    Btarget.className = 'R_b r_back';
224  }
225}
226
227/* ---------- 詳しい説明のクリック動作 ---------- */
228var imgIdArr = ['explanation1', 'explanation2', 'explanation3', 'explanation4', 'explanation5', 'explanation6', 'explanation7', 'explanation8', 'explanation9'];
229var expIdArr = ['exp1-svg', 'exp2-svg', 'exp3-svg', 'exp4-svg', 'exp5-svg', 'exp6-svg', 'exp7-svg', 'exp8-svg', 'exp9-svg'];
230var expIdcloseStr = ['音符・休符の長さ をくわしく<i class="fas fa-plus-square"></i>', '音符をつなげてかく をくわしく<i class="fas fa-plus-square"></i>', 'ト音記号 ヘ音記号 をくわしく<i class="fas fa-plus-square"></i>', '五線と加線 をくわしく<i class="fas fa-plus-square"></i>', 'シャープ・フラット をくわしく<i class="fas fa-plus-square"></i>', 'ナチュラル をくわしく<i class="fas fa-plus-square"></i>', '拍子記号 をくわしく<i class="fas fa-plus-square"></i>', 'リピート をくわしく<i class="fas fa-plus-square"></i>', '１番／２番かっこ をくわしく<i class="fas fa-plus-square"></i>'];
231var expIdopenStr = ['音符・休符の長さ をくわしく<i class="fas fa-minus-square"></i>', '音符をつなげてかく をくわしく<i class="fas fa-minus-square"></i>', 'ト音記号 ヘ音記号 をくわしく<i class="fas fa-minus-square"></i>', '五線と加線 をくわしく<i class="fas fa-minus-square"></i>', 'シャープ・フラット をくわしく<i class="fas fa-minus-square"></i>', 'ナチュラル をくわしく<i class="fas fa-minus-square"></i>', '拍子記号 をくわしく<i class="fas fa-minus-square"></i>', 'リピート をくわしく<i class="fas fa-minus-square"></i>', '１番／２番かっこ をくわしく<i class="fas fa-minus-square"></i>'];
232
233function exp_opcl(num, Exp_target) {
234  'use strict';
235  var imgId = Exp_target.id,
236    expId = expIdArr[num - 1];
237
238  if (document.getElementById(expId).className === 'exp-none') {
239    document.getElementById(expId).className = 'exp-disp';
240    Exp_target.innerHTML = expIdopenStr[num - 1];
241    Exp_target.style.color = '#FFFFFF';
242    Exp_target.style.backgroundColor = '#07A9CB';
243    Exp_target.style.borderBottom = '1px solid #07A9CB';
244
245  } else {
246    document.getElementById(expId).className = 'exp-none';
247    Exp_target.innerHTML = expIdcloseStr[num - 1];
248    Exp_target.style.color = '#ec4d26';
249    Exp_target.style.backgroundColor = 'rgba(255, 255, 255, 0.7)';
250    Exp_target.style.borderBottom = '1px solid #ec4d26';
251  }
252}