Skip to content

sora / sanitary-net

Go to a project
Commit c6722140 by o.kimura
Options

巧水スタイルJSON調整

parent 377b85ac
Inline Side-by-side
Showing with 2258 additions and 1391 deletions
shared/images/mv_pc.png
shared/images/mv_pc.png

43.1 KB | W: | H:

shared/images/mv_pc.png

30.3 KB | W: | H:

shared/images/mv_pc.png
shared/images/mv_pc.png
shared/images/mv_pc.png
shared/images/mv_pc.png
  • 2-up
  • Swipe
  • Onion skin
shared/images/mv_sp.png
shared/images/mv_sp.png

80.6 KB | W: | H:

shared/images/mv_sp.png

59.6 KB | W: | H:

shared/images/mv_sp.png
shared/images/mv_sp.png
shared/images/mv_sp.png
shared/images/mv_sp.png
  • 2-up
  • Swipe
  • Onion skin
takumi-style/css/main_ie.css
@charset "UTF-8"; @charset "UTF-8";
html,body{ html,
margin: 0; body {
padding: 0; margin: 0;
user-select: none;/*文字選択の禁止*/ padding: 0;
-webkit-user-select: none;/*文字選択の禁止*/ user-select: none;
touch-callout:none;/*長押しメニューの禁止*/ /*文字選択の禁止*/
-webkit-touch-callout:none;/*長押しメニューの禁止*/ -webkit-user-select: none;
/*文字選択の禁止*/
-webkit-tap-highlight-color:rgba(0,0,0,0); touch-callout: none;
/*長押しメニューの禁止*/
/*Pull-to-Refreshの禁止*/ -webkit-touch-callout: none;
/*overscroll-behavior-y: none;/*https://blog.tanakamidnight.com/2018/09/android-chrome-pull-to-refresh/*/ /*長押しメニューの禁止*/
sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
width: 100%;
height: 100%; /*Pull-to-Refreshの禁止*/
} /*overscroll-behavior-y: none;/*https://blog.tanakamidnight.com/2018/09/android-chrome-pull-to-refresh/*/
#container{ sans-serif;
position: relative; width: 100%;
overflow: hidden; height: 100%;
background-color: #f0faf8; }
display: flex;
justify-content: center; #container {
align-items: center; position: relative;
background: url('../images/common/back.jpg') 0 0 no-repeat; overflow: hidden;
background-size: cover; background-color: #f0faf8;
width: 100vw; display: flex;
height: 66.7vw; justify-content: center;
} align-items: center;
img{ background: url('../images/common/back.jpg') 0 0 no-repeat;
user-select: none;/*文字選択の禁止*/ background-size: cover;
-webkit-user-select: none;/*文字選択の禁止*/ width: 100vw;
touch-callout:none;/*長押しメニューの禁止-画像は長押しするとメニューがでてしまう-*/ height: 66.7vw;
-webkit-touch-callout:none;/*長押しメニューの禁止-画像は長押しするとメニューがでてしまう-*/ }
}
small{ img {
font-size: 80%;/*相対指定：クイズ文の補足などに利用する*/ user-select: none;
} /*文字選択の禁止*/
strong{ -webkit-user-select: none;
font-weight: normal; /*文字選択の禁止*/
/*color: #f15a24;*/ touch-callout: none;
color:#f12424; /*長押しメニューの禁止-画像は長押しするとメニューがでてしまう-*/
} -webkit-touch-callout: none;
sub{ /*長押しメニューの禁止-画像は長押しするとメニューがでてしまう-*/
font-size: 76%; }
vertical-align: bottom;
position: relative; small {
top: 0.1em; font-size: 80%;
} /*相対指定：クイズ文の補足などに利用する*/
sup{ }
font-size: 76%;
vertical-align: top; strong {
position: relative; font-weight: normal;
top: -0.1em; /*color: #f15a24;*/
color: #f12424;
}
sub {
font-size: 76%;
vertical-align: bottom;
position: relative;
top: 0.1em;
}
sup {
font-size: 76%;
vertical-align: top;
position: relative;
top: -0.1em;
} }
/*---------------------------------------------------------------------------------------------- common -----*/ /*---------------------------------------------------------------------------------------------- common -----*/
.vanish{ .vanish {
display: none!important;/*noneはflexに負けるため*/ display: none !important;
/*noneはflexに負けるため*/
} }
.imgBase{
position: relative; .imgBase {
width: 100%; position: relative;
height: auto; width: 100%;
height: auto;
} }
.fontSize16{
font-size: 1.6vw; .fontSize16 {
font-size: 1.6vw;
} }
.fontSize18{
font-size: 1.8vw; .fontSize18 {
font-size: 1.8vw;
} }
.fontSize20{
font-size: 2.0vw; .fontSize20 {
font-size: 2.0vw;
} }
.fontSize22{
font-size: 2.2vw; .fontSize22 {
font-size: 2.2vw;
} }
.fontSize24{
font-size: 2.4vw; .fontSize24 {
font-size: 2.4vw;
} }
.fontSize26{
font-size: 2.6vw; .fontSize26 {
font-size: 2.6vw;
} }
.fontSize28{
font-size: 2.8vw; .fontSize28 {
font-size: 2.8vw;
} }
.fontSize30{
font-size: 3.0vw; .fontSize30 {
font-size: 3.0vw;
} }
/*---------------------------------------------------------------------------------------------- init plate -----*/ /*---------------------------------------------------------------------------------------------- init plate -----*/
#init_plate{ #init_plate {
box-sizing: border-box; box-sizing: border-box;
width: 40vw; width: 40vw;
height: 20vw; height: 20vw;
background-color: #ffffff; background-color: #ffffff;
border-radius: 1vw; border-radius: 1vw;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
display: flex; display: flex;
flex-direction:column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 3vw; font-size: 3vw;
color:#7d0000; color: #7d0000;
margin-top: 4vw; margin-top: 4vw;
} }
#init_plate_start{
cursor: pointer; #init_plate_start {
box-sizing: border-box; cursor: pointer;
font-size: 2vw; box-sizing: border-box;
border-radius: 1vw; font-size: 2vw;
padding: 1vw 5vw; border-radius: 1vw;
color: #ffffff; padding: 1vw 5vw;
background-color: #7d0000; color: #ffffff;
margin-top: 2vw; background-color: #7d0000;
} margin-top: 2vw;
#init_plate_start:active{ }
background-color: #eb6100;
#init_plate_start:active {
background-color: #eb6100;
} }
/*---------------------------------------------------------------------------------------------- top anime -----*/ /*---------------------------------------------------------------------------------------------- top anime -----*/
#top_anime{ #top_anime {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: url('../images/top/topBack.jpg') 0 0 no-repeat; background: url('../images/top/topBack.jpg') 0 0 no-repeat;
background-size: cover; background-size: cover;
} }
#top_checkPoint_1{
position: absolute; #top_checkPoint_1 {
width:11vw; position: absolute;
height: auto; width: 11vw;
left:22vw; height: auto;
top:8vw; left: 22vw;
transform-origin:50% 80%; top: 8vw;
} transform-origin: 50% 80%;
#top_checkPoint_2{ }
position: absolute;
width:21vw; #top_checkPoint_2 {
height: auto; position: absolute;
right:1vw; width: 21vw;
top:20vw; height: auto;
transform-origin:50% 80%; right: 1vw;
} top: 20vw;
#top_checkPoint_3{ transform-origin: 50% 80%;
position: absolute; }
width:12vw;
height: auto; #top_checkPoint_3 {
left:51.5vw; position: absolute;
top:44vw; width: 12vw;
} height: auto;
#top_takumi{ left: 51.5vw;
position: absolute; top: 44vw;
width:15vw; }
height: auto;
left:3vw; #top_takumi {
top:41vw; position: absolute;
transform-origin:50% 80%; width: 15vw;
} height: auto;
#top_boy{ left: 3vw;
position: absolute; top: 41vw;
width:12vw; transform-origin: 50% 80%;
height: auto; }
right:26vw;
top:49vw; #top_boy {
} position: absolute;
#top_girl{ width: 12vw;
position: absolute; height: auto;
width:12vw; right: 26vw;
height: auto; top: 49vw;
right:12vw; }
top:43vw;
} #top_girl {
#top_fuki_1{ position: absolute;
position: absolute; width: 12vw;
width:45vw; height: auto;
height: auto; right: 12vw;
left:33vw; top: 43vw;
top:1vw; }
}
#top_fuki_2{ #top_fuki_1 {
position: absolute; position: absolute;
width:50vw; width: 45vw;
height: auto; height: auto;
left:30vw; left: 33vw;
top:11vw; top: 1vw;
} }
#top_fuki_3{
position: absolute; #top_fuki_2 {
width:50vw; position: absolute;
height: auto; width: 50vw;
left:30vw; height: auto;
top:18vw; left: 30vw;
} top: 11vw;
#top_fuki_4{ }
position: absolute;
width:50vw; #top_fuki_3 {
height: auto; position: absolute;
left:16vw; width: 50vw;
top:35vw; height: auto;
} left: 30vw;
#top_water{ top: 18vw;
position: absolute; }
width:12vw;
height: auto; #top_fuki_4 {
left:62vw; position: absolute;
top:5vw; width: 50vw;
} height: auto;
#top_water_image{ left: 16vw;
margin-left: 50%; top: 35vw;
width: 0%; }
height: auto;
} #top_water {
#top_start_button,#top_start_button_blink{ position: absolute;
position: absolute; width: 12vw;
width: 25vw; height: auto;
height:10vw;/*calc(25 * 0.4vw);/*start_btn.pngのアスペクト比*/ left: 62vw;
background: url('../images/common/start_btn.png') 0 0 no-repeat; top: 5vw;
background-size: 100%; }
right: 5vw;
bottom: 2vw; #top_water_image {
} margin-left: 50%;
#top_start_button:active{ width: 0%;
background-position:0 100%; height: auto;
}
#top_start_button,
#top_start_button_blink {
position: absolute;
width: 25vw;
height: 10vw;
/*calc(25 * 0.4vw);/*start_btn.pngのアスペクト比*/
background: url('../images/common/start_btn.png') 0 0 no-repeat;
background-size: 100%;
right: 5vw;
bottom: 2vw;
}
#top_start_button:active {
background-position: 0 100%;
} }
/*---------------------------------------------------------------------------------------------- level select -----*/ /*---------------------------------------------------------------------------------------------- level select -----*/
#select_plate{ #select_plate {
box-sizing: border-box; box-sizing: border-box;
margin-top: -10%; margin-top: -10%;
width: 70vw; width: 70vw;
height: 38vw; height: 38vw;
background-color: #ffffff; background-color: #ffffff;
border: 3px #fff solid; border: 3px #fff solid;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.select_content{
width: 100%;
height: 100%;
display: none;
border-radius: 7px;
}
.select_content.selected{
display: flex;
flex-direction:column;
align-items:center;
background: url('../images/common/tile_red.png') 0 0;
background-size: 5%;
}
.select_title{
margin-top: -4%;
width: 69vw;
height:6vw;/*calc(69 * 0.087vw);/*0.086はtitle_base.pngのアスペクト比*/
background: url('../images/quiz/title_base.png') 0 0 no-repeat;
background-size: contain;
}
.select_title img{
width: 32%;/* x */
margin: 0 34%;/* (100 - x)/2*/
margin-top: 1%;
} }
.select_return_button{ .select_content {
width: 20vw; width: 100%;
height:8vw;/*calc(25 * 0.4vw);/*return_btn.pngのアスペクト比*/ height: 100%;
background: url('../images/common/return_btn.png') 0 0 no-repeat; display: none;
background-size: 100%; border-radius: 7px;
} }
.select_return_button:active{
background-position:0 100%; .select_content.selected {
display: flex;
flex-direction: column;
align-items: center;
background: url('../images/common/tile_red.png') 0 0;
background-size: 5%;
} }
#button_return{ .select_title {
position: absolute; margin-top: -4%;
bottom:2.5vw; width: 69vw;
right:15vw; height: 6vw;
width: 20vw; /*calc(69 * 0.087vw);/*0.086はtitle_base.pngのアスペクト比*/
height:8vw;/*calc(25 * 0.4vw);/*return_btn.pngのアスペクト比*/ background: url('../images/quiz/title_base.png') 0 0 no-repeat;
background: url('../images/common/return_btn.png') 0 0 no-repeat; background-size: contain;
background-size: 100%;
} }
#button_return:active{
background-position:0 100%; .select_title img {
width: 32%;
/* x */
margin: 0 34%;
/* (100 - x)/2*/
margin-top: 1%;
} }
.select_return_button {
width: 20vw;
height: 8vw;
/*calc(25 * 0.4vw);/*return_btn.pngのアスペクト比*/
background: url('../images/common/return_btn.png') 0 0 no-repeat;
background-size: 100%;
}
.select_content_button_area_top{ .select_return_button:active {
display: flex; background-position: 0 100%;
align-items:center;
justify-content: space-between;
width: 90%;
height: 90%;
} }
.select_content_button_area{
display: flex; #button_return {
align-items:center; position: absolute;
justify-content: space-between; bottom: 2.5vw;
margin-top: 3%; right: 15vw;
width: 90%; width: 20vw;
height: 60%; height: 8vw;
/*calc(25 * 0.4vw);/*return_btn.pngのアスペクト比*/
background: url('../images/common/return_btn.png') 0 0 no-repeat;
background-size: 100%;
}
#button_return:active {
background-position: 0 100%;
}
.select_content_button_area_top {
display: flex;
align-items: center;
justify-content: space-between;
width: 90%;
height: 90%;
} }
.select_level_button{ .select_content_button_area {
overflow: hidden; display: flex;
cursor: pointer; align-items: center;
box-sizing: border-box; justify-content: space-between;
display: flex; margin-top: 3%;
align-items: center; width: 90%;
width: 22%; height: 60%;
height: 80%;
background-color: #fff;
border-radius: 10px;
border: 3px #fff solid;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
} }
.select_level_button:active{
border: 3px #f19149 solid; .select_level_button {
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
display: flex;
align-items: center;
width: 22%;
height: 80%;
background-color: #fff;
border-radius: 10px;
border: 3px #fff solid;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.select_level_button:active {
border: 3px #f19149 solid;
} }
.level_button_img{ .level_button_img {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content:center; justify-content: center;
width: 100%; width: 100%;
height: 20vw; height: 20vw;
} }
.level_button_img img{
width: 100%; .level_button_img img {
width: 100%;
}
.select_content_button {
overflow: hidden;
cursor: pointer;
width: 15vw;
height: 15vw;
} }
#select_content-3 .select_content_button,
#select_content-4 .select_content_button {
width: 12vw;
height: 12vw;
}
.select_content_button{ .red_button {
overflow: hidden; background: url('../images/level_menu/box_red.png') 0 0 no-repeat;
cursor: pointer; background-size: 100%;
width: 15vw;
height: 15vw;
} }
.red_button{
background: url('../images/level_menu/box_red.png') 0 0 no-repeat; .blue_button {
background-size: 100%; background: url('../images/level_menu/box_blue.png') 0 0 no-repeat;
background-size: 100%;
} }
.blue_button{
background: url('../images/level_menu/box_blue.png') 0 0 no-repeat; .yellow_button {
background-size: 100%; background: url('../images/level_menu/box_yellow.png') 0 0 no-repeat;
background-size: 100%;
} }
.yellow_button{
background: url('../images/level_menu/box_yellow.png') 0 0 no-repeat; .green_button {
background-size: 100%; background: url('../images/level_menu/box_green.png') 0 0 no-repeat;
background-size: 100%;
} }
.green_button{
background: url('../images/level_menu/box_green.png') 0 0 no-repeat; .purple_button {
background-size: 100%; background: url('../images/level_menu/box_purple.png') 0 0 no-repeat;
background-size: 100%;
} }
.select_content_button:active{
background-position:0 100%; .select_content_button:active {
background-position: 0 100%;
} }
/*---------------------------------------------------------------------------------------------- quiz -----*/ /*---------------------------------------------------------------------------------------------- quiz -----*/
#quiz_plate{ #quiz_plate {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-top: -5%; margin-top: -5%;
width: 90%; width: 90%;
height: 80%; height: 80%;
overflow:visible; overflow: visible;
background: url('../images/common/tile_red.png') 0 0; background: url('../images/common/tile_red.png') 0 0;
background-size: 5%; background-size: 5%;
border: 3px #fff solid; border: 3px #fff solid;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
} }
#quiz_title, #ans_title{
margin-top: -4vw; #quiz_title,
width: 86vw; #ans_title {
/*height:7.45vw;calc(86 * 0.087vw); -- 0.086はtitle_base.pngのアスペクト比*/ margin-top: -4vw;
height:8vw;/*calc(86 * 0.087vw);/*0.086はtitle_base.pngのアスペクト比*/ width: 86vw;
background: url('../images/quiz/title_base.png') 0 0 no-repeat; /*height:7.45vw;calc(86 * 0.087vw); -- 0.086はtitle_base.pngのアスペクト比*/
background-size: contain; height: 8vw;
} /*calc(86 * 0.087vw);/*0.086はtitle_base.pngのアスペクト比*/
#quiz_title img, #ans_title img{ background: url('../images/quiz/title_base.png') 0 0 no-repeat;
width: 32%;/* x */ background-size: contain;
margin: 0 34%;/* (100 - x)/2*/ }
margin-top: 1%;
} #quiz_title img,
#quiz_board{ #ans_title img {
width: 84vw; width: 32%;
/*height:14.92vw;calc(84 * 0.178vw); -- quiz_board.pngのアスペクト比*/ /* x */
height:15vw;/*少数点があるとアニメ時に揺らいでしまうので*/ margin: 0 34%;
margin-top: -0.5vw; /* (100 - x)/2*/
background: url('../images/quiz/quiz_board.png') 0 0 no-repeat; margin-top: 1%;
background-size: contain; }
display: flex;
align-items:center; #quiz_board {
} width: 84vw;
#quiz_board_no{ /*height:14.92vw;calc(84 * 0.178vw); -- quiz_board.pngのアスペクト比*/
width: 3vw; height: 15vw;
margin-top: 2vw; /*少数点があるとアニメ時に揺らいでしまうので*/
margin-left: 4.5vw; margin-top: -0.5vw;
margin-right: 5.5vw; background: url('../images/quiz/quiz_board.png') 0 0 no-repeat;
} background-size: contain;
#quiz_board_text{ display: flex;
width: 70vw; align-items: center;
margin-right: 2vw; }
padding-right: 1vw;
line-height: 180%; #quiz_board_no {
color: #eef3f1; width: 3vw;
/*font-size: 2.4vw;*/ margin-top: 2vw;
} margin-left: 4.5vw;
#quiz_board_text strong{ margin-right: 5.5vw;
/*color:#f8b551;*/ }
color:#f12424;
#quiz_board_text {
width: 70vw;
margin-right: 2vw;
padding-right: 1vw;
line-height: 180%;
color: #eef3f1;
/*font-size: 2.4vw;*/
}
#quiz_board_text strong {
/*color:#f8b551;*/
color: #f12424;
} }
/*-------------------------------------------- layout : 3 figs -----*/ /*-------------------------------------------- layout : 3 figs -----*/
#answer_area{ #answer_area {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 2vw; margin-top: 2vw;
width: 70vw; width: 70vw;
height: 27vw; height: 27vw;
} }
.answer_button{
cursor: pointer; .answer_button {
box-sizing: border-box; cursor: pointer;
display: flex; box-sizing: border-box;
flex-direction: column; display: flex;
align-items: center; flex-direction: column;
width: 30%; align-items: center;
height: 100%; width: 30%;
background-color: #fff; height: 100%;
border-radius: 10px; background-color: #fff;
border: 3px #fff solid; border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2); border: 3px #fff solid;
} box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
.answer_button:active{ }
border: 3px #f19149 solid;
} .answer_button:active {
.answer_button_img{ border: 3px #f19149 solid;
display: flex; }
align-items: center;
justify-content:center; .answer_button_img {
width: 100%; display: flex;
height: 27vw; align-items: center;
} justify-content: center;
.answer_button_img img{ width: 100%;
width: 90%; height: 27vw;
}
.answer_button_img img {
width: 90%;
} }
/*-------------------------------------------- layout : 3 lines -----*/ /*-------------------------------------------- layout : 3 lines -----*/
#answer_area2{ #answer_area2 {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 2vw; margin-top: 2vw;
width: 76vw; width: 76vw;
height: 26.5vw; height: 26.5vw;
} }
#answer_area2_fig{
display: flex; #answer_area2_fig {
align-items:center; display: flex;
align-content:center; align-items: center;
width: 40%; align-content: center;
height: 100%; width: 40%;
background-color: #fff; height: 100%;
border-radius: 10px; background-color: #fff;
overflow: hidden; border-radius: 10px;
} overflow: hidden;
#answer_area2_text_area{ }
display: flex;
flex-direction: column; #answer_area2_text_area {
justify-content:space-between; display: flex;
width: 55%; flex-direction: column;
height: 100%; justify-content: space-between;
} width: 55%;
.answer_button2{ height: 100%;
box-sizing: border-box; }
display: flex;
align-items: center; .answer_button2 {
cursor: pointer; box-sizing: border-box;
color: #00a0e9; display: flex;
height: 30%; align-items: center;
padding: 0.6vw; cursor: pointer;
padding-left: 9vw; color: #00a0e9;
border-radius: 10px; height: 30%;
border: 3px #ffffff solid; padding: 0.6vw;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2); padding-left: 9vw;
vertical-align:bottom; border-radius: 10px;
/*font-size: 1.8vw;*/ border: 3px #ffffff solid;
} box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
.answer_button2:active{ vertical-align: bottom;
border: 3px #f19149 solid; /*font-size: 1.8vw;*/
} }
#a2_1{ .answer_button2:active {
background: url('../images/quiz/ans_1.png') 0 0 no-repeat; border: 3px #f19149 solid;
background-size: contain; }
background-color: #fff;
} #a2_1 {
#a2_2{ background: url('../images/quiz/ans_1.png') 0 0 no-repeat;
background: url('../images/quiz/ans_2.png') 0 0 no-repeat; background-size: contain;
background-size: contain; background-color: #fff;
background-color: #fff; }
}
#a2_3{ #a2_2 {
background: url('../images/quiz/ans_3.png') 0 0 no-repeat; background: url('../images/quiz/ans_2.png') 0 0 no-repeat;
background-size: contain; background-size: contain;
background-color: #fff; background-color: #fff;
}
#a2_3 {
background: url('../images/quiz/ans_3.png') 0 0 no-repeat;
background-size: contain;
background-color: #fff;
} }
/*---------------------------------------------------------------------------------------------- answer -----*/ /*---------------------------------------------------------------------------------------------- answer -----*/
#ans_plate{ #ans_plate {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-top: -5%; margin-top: -5%;
width: 90%; width: 90%;
height: 80%; height: 80%;
overflow:visible; overflow: visible;
background: url('../images/common/tile_blue.png') 0 0; background: url('../images/common/tile_blue.png') 0 0;
background-size: 5%; background-size: 5%;
border: 3px #fff solid; border: 3px #fff solid;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
} }
#ans_board{
width: 84vw; #ans_board {
/*height:14.92vw;calc(84 * 0.178vw);/*quiz_board.pngのアスペクト比*/ width: 84vw;
height:15vw;/*少数点があるとアニメ時に揺らいでしまうので*/ /*height:14.92vw;calc(84 * 0.178vw);/*quiz_board.pngのアスペクト比*/
margin-top: -0.5vw; height: 15vw;
background: url('../images/quiz/ans_board.png') 0 0 no-repeat; /*少数点があるとアニメ時に揺らいでしまうので*/
background-size: contain; margin-top: -0.5vw;
display: flex; background: url('../images/quiz/ans_board.png') 0 0 no-repeat;
align-items:center; background-size: contain;
} display: flex;
#ans_board_text{ align-items: center;
color: #362e2b; }
/*font-size: 2vw;*/
margin-left: 12vw; #ans_board_text {
padding-right: 1vw; color: #362e2b;
line-height: 180%; /*font-size: 2vw;*/
} margin-left: 12vw;
#explain_area{ padding-right: 1vw;
display: flex; line-height: 180%;
justify-content: space-between; }
margin-top: 2vw;
width: 76vw; #explain_area {
height: 26.5vw; display: flex;
} justify-content: space-between;
#explain_fig{ margin-top: 2vw;
display: flex; width: 76vw;
align-items:center; height: 26.5vw;
align-content:center; }
width: 40%;
height: 100%; #explain_fig {
background-color: #fff; display: flex;
border-radius: 10px; align-items: center;
overflow: hidden; align-content: center;
} width: 40%;
#explain_text{ height: 100%;
box-sizing: border-box; background-color: #fff;
padding: 1vw; border-radius: 10px;
padding-top: 1.5vw; overflow: hidden;
width: 55%; }
height: 100%;
border-radius: 10px; #explain_text {
color:#362e2b; box-sizing: border-box;
border: solid 0.8vw #fefbf7; padding: 1vw;
background: url('../images/common/tile_note.png') 0 0; padding-top: 1.5vw;
background-size: 16.0vw; width: 55%;
font-size: 2.0vw; height: 100%;
line-height: 200%; border-radius: 10px;
color: #362e2b;
border: solid 0.8vw #fefbf7;
background: url('../images/common/tile_note.png') 0 0;
background-size: 16.0vw;
font-size: 2.0vw;
line-height: 200%;
} }
/*---------------------------------------------------------------------------------------------- quiz ui -----*/ /*---------------------------------------------------------------------------------------------- quiz ui -----*/
#button_next{ #button_next {
position: absolute; position: absolute;
width: 20vw; width: 20vw;
height:8vw;/*calc(20 * 0.4vw);/*quiz_board.pngのアスペクト比*/ height: 8vw;
background: url('../images/common/next_btn.png') 0 0 no-repeat; /*calc(20 * 0.4vw);/*quiz_board.pngのアスペクト比*/
background-size: 100%; background: url('../images/common/next_btn.png') 0 0 no-repeat;
right: 15vw; background-size: 100%;
bottom: 2.5vw; right: 15vw;
bottom: 2.5vw;
} }
#button_next:active{
background-position:0 100%; #button_next:active {
background-position: 0 100%;
} }
...@@ -601,145 +703,155 @@ sup{ ...@@ -601,145 +703,155 @@ sup{
/*---------------------------------------------------------------------------------------------- result plate -----*/ /*---------------------------------------------------------------------------------------------- result plate -----*/
#drum_text{ #drum_text {
position: absolute; position: absolute;
width: 50vw; width: 50vw;
}
#drum_text_img{
width: 100%;
}
#result_plate{
display: flex;
flex-direction: column;
align-items: center;
width: 85vw;
height:50.60vw;/*calc(85 * 0.595vw);/*base.jpgのアスペクト比*/
background: url('../images/result/base.png') 0 0 no-repeat;
background-size: cover;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
margin-bottom: 5%;
}
#result_plate.goldPrize{
background: url('../images/result/base.jpg') 0 0 no-repeat;
background-size: cover;
}
#result_title{
width: 50vw;
line-height: 0;
margin-top: 11vw;
}
#result_title img{
width:100%;
height: auto;
}
#result_area{
margin-top: 0;
width: 55vw;
height:28vw;
}
#result_area img{
width:100%;
height: auto;
}
#result_top_button{
position: absolute;
width: 20vw;
height:8vw;/*calc(20 * 0.4vw);/*top_btn.pngのアスペクト比*/
background: url('../images/common/top_btn.png') 0 0 no-repeat;
background-size: 100%;
left: 25vw;
bottom: 0;
}
#result_top_button:active{
background-position:0 100%;
}
#result_select_button{
position: absolute;
width: 22vw;
height:8vw;/*calc(22 * 0.3636vw);/*select_btn.pngのアスペクト比*/
background: url('../images/common/select_btn.png') 0 0 no-repeat;
background-size: 100%;
right: 25vw;
bottom: 0;
}
#result_select_button:active{
background-position:0 100%;
} }
#drum_text_img {
width: 100%;
}
/*---------------------------------------------------------------------------------------------- doctor -----*/ #result_plate {
#doctor{ display: flex;
position: absolute; flex-direction: column;
width: 20vw; align-items: center;
line-height: 0; width: 85vw;
left: 0; height: 50.60vw;
bottom: 0; /*calc(85 * 0.595vw);/*base.jpgのアスペクト比*/
} background: url('../images/result/base.png') 0 0 no-repeat;
#doctor_fuki{ background-size: cover;
position: absolute; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
width: 48vw; margin-bottom: 5%;
height:16.06vw;/*calc(48 * 0.335vw);/*fuki_base_select.pngのアスペクト比*/
background: url('../images/doctor/fuki_base_select.png') 0 0 no-repeat;
background-size: contain;
line-height: 0;
display: flex;
align-items: center;
justify-content:center;
left: 14vw;
bottom: 0.5vw;
transform-origin:0% 50%;
}
#doctor_fuki.small{
width: 50vw;
height:11.135vw;/*calc(50 * 0.223vw);/*fuki_base_quiz.pngのアスペクト比*/
background: url('../images/doctor/fuki_base_quiz.png') 0 0 no-repeat;
background-size: contain;
left: 10vw;
bottom: 0vw;
}
#doctor_fuki .fuki_text{
width: 60%;
}
#doctor_fuki.small .fuki_text{
width: 88%;
} }
/*---------------------------------------------------------------------------------------------- takumi -----*/ #result_plate.goldPrize {
#takumi{ background: url('../images/result/base.jpg') 0 0 no-repeat;
position: absolute; background-size: cover;
width: 13vw;
line-height: 0;
right: 0;
bottom: 0;
} }
#takumi_fuki{
position: absolute; #result_title {
width: 48vw; width: 50vw;
height:16.06vw;/*calc(48 * 0.335vw);/*fuki_base_rev.pngのアスペクト比*/ line-height: 0;
background: url('../images/takumi/fuki_base.png') 0 0 no-repeat; margin-top: 11vw;
background-size: contain;
line-height: 0;
display: flex;
align-items: center;
justify-content:center;
right: 12vw;
bottom:0vw;
transform-origin:100% 50%;
} }
#takumi_fuki .fuki_text{
width: 55%; #result_title img {
width: 100%;
height: auto;
} }
#result_area {
margin-top: 0;
width: 55vw;
height: 28vw;
}
#result_area img {
width: 100%;
height: auto;
}
#result_top_button {
position: absolute;
width: 20vw;
height: 8vw;
/*calc(20 * 0.4vw);/*top_btn.pngのアスペクト比*/
background: url('../images/common/top_btn.png') 0 0 no-repeat;
background-size: 100%;
left: 25vw;
bottom: 0;
}
#result_top_button:active {
background-position: 0 100%;
}
#result_select_button {
position: absolute;
width: 22vw;
height: 8vw;
/*calc(22 * 0.3636vw);/*select_btn.pngのアスペクト比*/
background: url('../images/common/select_btn.png') 0 0 no-repeat;
background-size: 100%;
right: 25vw;
bottom: 0;
}
#result_select_button:active {
background-position: 0 100%;
}
/*---------------------------------------------------------------------------------------------- doctor -----*/
#doctor {
position: absolute;
width: 20vw;
line-height: 0;
left: 0;
bottom: 0;
}
#doctor_fuki {
position: absolute;
width: 48vw;
height: 16.06vw;
/*calc(48 * 0.335vw);/*fuki_base_select.pngのアスペクト比*/
background: url('../images/doctor/fuki_base_select.png') 0 0 no-repeat;
background-size: contain;
line-height: 0;
display: flex;
align-items: center;
justify-content: center;
left: 14vw;
bottom: 0.5vw;
transform-origin: 0% 50%;
}
#doctor_fuki.small {
width: 50vw;
height: 11.135vw;
/*calc(50 * 0.223vw);/*fuki_base_quiz.pngのアスペクト比*/
background: url('../images/doctor/fuki_base_quiz.png') 0 0 no-repeat;
background-size: contain;
left: 10vw;
bottom: 0vw;
}
#doctor_fuki .fuki_text {
width: 60%;
}
#doctor_fuki.small .fuki_text {
width: 88%;
}
/*---------------------------------------------------------------------------------------------- takumi -----*/
#takumi {
position: absolute;
width: 13vw;
line-height: 0;
right: 0;
bottom: 0;
}
#takumi_fuki {
position: absolute;
width: 48vw;
height: 16.06vw;
/*calc(48 * 0.335vw);/*fuki_base_rev.pngのアスペクト比*/
background: url('../images/takumi/fuki_base.png') 0 0 no-repeat;
background-size: contain;
line-height: 0;
display: flex;
align-items: center;
justify-content: center;
right: 12vw;
bottom: 0vw;
transform-origin: 100% 50%;
}
#takumi_fuki .fuki_text {
width: 55%;
}
takumi-style/iframe.html
...@@ -2,44 +2,44 @@ ...@@ -2,44 +2,44 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>viewport test - iframe parent</title> <title>viewport test - iframe parent</title>
<style> <style>
html, html,
body { body {
background-color: #ffffff; background-color: #ffffff;
height: 100%; height: 100%;
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
#container { #container {
height: 100%; height: 100%;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
iframe { iframe {
border: none; border: none;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="container"> <div id="container">
<!-- <!--
動作確認済みのブラウザ 動作確認済みのブラウザ
Mac　-　chrome Mac　-　chrome
PC用にフォントを設定 PC用にフォントを設定
部分的にプルプルするのを何とかする（問題の選択肢） 部分的にプルプルするのを何とかする（問題の選択肢）
--> -->
<iframe src="index_ie.html" width="990" height="660" scrolling="no"> <iframe src="index_ie.html" width="990" height="660" scrolling="no">
</div> </div>
</iframe> </iframe>
</body> </body>
</html> </html>
takumi-style/index_ie.html
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>巧水検定</title> <title>巧水検定</title>
<!-- web app for Android --> <!-- web app for Android -->
<meta name="mobile-web-app-capable" content="yes" /> <meta name="mobile-web-app-capable" content="yes" />
<script src="js/anime.min.js"></script> <script src="js/anime.min.js"></script>
<script src="js/json.js"></script> <script src="js/json.js"></script>
<script src="js/topAnime.js"></script> <script src="js/topAnime.js"></script>
<script src="js/doctor.js"></script> <script src="js/doctor.js"></script>
<script src="js/takumi.js"></script> <script src="js/takumi.js"></script>
<script src="js/levelMenu_ie.js"></script> <script src="js/levelMenu_ie.js"></script>
<script src="js/quizMaster.js"></script> <script src="js/quizMaster.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>
<link rel="stylesheet" type="text/css" href="css/main_ie.css"> <link rel="stylesheet" type="text/css" href="css/main_ie.css">
<!-- preload : common --> <!-- preload : common -->
<link rel="preload" href="images/common/back.jpg" as="image"> <link rel="preload" href="images/common/back.jpg" as="image">
<link rel="preload" href="images/common/next_btn.png" as="image"> <link rel="preload" href="images/common/next_btn.png" as="image">
<link rel="preload" href="images/common/return_btn.png" as="image"> <link rel="preload" href="images/common/return_btn.png" as="image">
<link rel="preload" href="images/common/select_btn.png" as="image"> <link rel="preload" href="images/common/select_btn.png" as="image">
<link rel="preload" href="images/common/start_btn.png" as="image"> <link rel="preload" href="images/common/start_btn.png" as="image">
<link rel="preload" href="images/common/tile_blue.png" as="image"> <link rel="preload" href="images/common/tile_blue.png" as="image">
<link rel="preload" href="images/common/tile_note.png" as="image"> <link rel="preload" href="images/common/tile_note.png" as="image">
<link rel="preload" href="images/common/tile_red.png" as="image"> <link rel="preload" href="images/common/tile_red.png" as="image">
<link rel="preload" href="images/common/top_btn.png" as="image"> <link rel="preload" href="images/common/top_btn.png" as="image">
<!-- preload : top --> <!-- preload : top -->
<link rel="preload" href="images/top/bath.png" as="image"> <link rel="preload" href="images/top/bath.png" as="image">
<link rel="preload" href="images/top/boy.png" as="image"> <link rel="preload" href="images/top/boy.png" as="image">
<link rel="preload" href="images/top/fuki_1.png" as="image"> <link rel="preload" href="images/top/fuki_1.png" as="image">
<link rel="preload" href="images/top/fuki_2.png" as="image"> <link rel="preload" href="images/top/fuki_2.png" as="image">
<link rel="preload" href="images/top/fuki_3.png" as="image"> <link rel="preload" href="images/top/fuki_3.png" as="image">
<link rel="preload" href="images/top/fuki_4.png" as="image"> <link rel="preload" href="images/top/fuki_4.png" as="image">
<link rel="preload" href="images/top/girl.png" as="image"> <link rel="preload" href="images/top/girl.png" as="image">
<link rel="preload" href="images/top/takumi.png" as="image"> <link rel="preload" href="images/top/takumi.png" as="image">
<link rel="preload" href="images/top/toilet.png" as="image"> <link rel="preload" href="images/top/toilet.png" as="image">
<link rel="preload" href="images/top/topBack.jpg" as="image"> <link rel="preload" href="images/top/topBack.jpg" as="image">
<link rel="preload" href="images/top/waterBall_2.png" as="image"> <link rel="preload" href="images/top/waterBall_2.png" as="image">
<link rel="preload" href="images/top/waterBall.png" as="image"> <link rel="preload" href="images/top/waterBall.png" as="image">
<link rel="preload" href="images/top/wheel.png" as="image"> <link rel="preload" href="images/top/wheel.png" as="image">
<!-- preload : level_menu --> <!-- preload : level_menu -->
<link rel="preload" href="images/level_menu/box_blue.png" as="image"> <link rel="preload" href="images/level_menu/box_blue.png" as="image">
<link rel="preload" href="images/level_menu/box_green.png" as="image"> <link rel="preload" href="images/level_menu/box_green.png" as="image">
<link rel="preload" href="images/level_menu/box_red.png" as="image"> <link rel="preload" href="images/level_menu/box_red.png" as="image">
<link rel="preload" href="images/level_menu/box_yellow.png" as="image"> <link rel="preload" href="images/level_menu/box_yellow.png" as="image">
<link rel="preload" href="images/level_menu/lev_1.jpg" as="image"> <link rel="preload" href="images/level_menu/lev_1.jpg" as="image">
<link rel="preload" href="images/level_menu/lev_2.jpg" as="image"> <link rel="preload" href="images/level_menu/lev_2.jpg" as="image">
<link rel="preload" href="images/level_menu/lev_3.jpg" as="image"> <link rel="preload" href="images/level_menu/lev_3.jpg" as="image">
<link rel="preload" href="images/level_menu/lev_4.jpg" as="image"> <link rel="preload" href="images/level_menu/lev_4.jpg" as="image">
<link rel="preload" href="images/level_menu/text_lev_0.png" as="image"> <link rel="preload" href="images/level_menu/text_lev_0.png" as="image">
<link rel="preload" href="images/level_menu/text_lev_1.png" as="image"> <link rel="preload" href="images/level_menu/text_lev_1.png" as="image">
<link rel="preload" href="images/level_menu/text_lev_2.png" as="image"> <link rel="preload" href="images/level_menu/text_lev_2.png" as="image">
<link rel="preload" href="images/level_menu/text_lev_3.png" as="image"> <link rel="preload" href="images/level_menu/text_lev_3.png" as="image">
<link rel="preload" href="images/level_menu/text_lev_4.png" as="image"> <link rel="preload" href="images/level_menu/text_lev_4.png" as="image">
<!-- preload : doctor --> <!-- preload : doctor -->
<link rel="preload" href="images/doctor/doctor_disgust.png" as="image"> <link rel="preload" href="images/doctor/doctor_disgust.png" as="image">
<link rel="preload" href="images/doctor/doctor_smile.png" as="image"> <link rel="preload" href="images/doctor/doctor_smile.png" as="image">
<link rel="preload" href="images/doctor/fuki_base_quiz.png" as="image"> <link rel="preload" href="images/doctor/fuki_base_quiz.png" as="image">
<link rel="preload" href="images/doctor/fuki_base_select.png" as="image"> <link rel="preload" href="images/doctor/fuki_base_select.png" as="image">
<link rel="preload" href="images/doctor/fuki_text_ng.png" as="image"> <link rel="preload" href="images/doctor/fuki_text_ng.png" as="image">
<link rel="preload" href="images/doctor/fuki_text_ok.png" as="image"> <link rel="preload" href="images/doctor/fuki_text_ok.png" as="image">
<link rel="preload" href="images/doctor/fuki_text_ques.png" as="image"> <link rel="preload" href="images/doctor/fuki_text_ques.png" as="image">
<link rel="preload" href="images/doctor/fuki_text_select.png" as="image"> <link rel="preload" href="images/doctor/fuki_text_select.png" as="image">
<!-- preload : takumi --> <!-- preload : takumi -->
<link rel="preload" href="images/takumi/fuki_base.png" as="image"> <link rel="preload" href="images/takumi/fuki_base.png" as="image">
<link rel="preload" href="images/takumi/fuki_text_start.png" as="image"> <link rel="preload" href="images/takumi/fuki_text_start.png" as="image">
<link rel="preload" href="images/takumi/takumi_smile.png" as="image"> <link rel="preload" href="images/takumi/takumi_smile.png" as="image">
<!-- preload : quiz --> <!-- preload : quiz -->
<link rel="preload" href="images/quiz/ans_1.png" as="image"> <link rel="preload" href="images/quiz/ans_1.png" as="image">
<link rel="preload" href="images/quiz/ans_2.png" as="image"> <link rel="preload" href="images/quiz/ans_2.png" as="image">
<link rel="preload" href="images/quiz/ans_3.png" as="image"> <link rel="preload" href="images/quiz/ans_3.png" as="image">
<link rel="preload" href="images/quiz/ans_board.png" as="image"> <link rel="preload" href="images/quiz/ans_board.png" as="image">
<link rel="preload" href="images/quiz/no_1.png" as="image"> <link rel="preload" href="images/quiz/no_1.png" as="image">
<link rel="preload" href="images/quiz/no_2.png" as="image"> <link rel="preload" href="images/quiz/no_2.png" as="image">
<link rel="preload" href="images/quiz/no_3.png" as="image"> <link rel="preload" href="images/quiz/no_3.png" as="image">
<link rel="preload" href="images/quiz/quiz_board.png" as="image"> <link rel="preload" href="images/quiz/quiz_board.png" as="image">
<link rel="preload" href="images/quiz/title_base.png" as="image"> <link rel="preload" href="images/quiz/title_base.png" as="image">
<link rel="preload" href="images/quiz/title_takumi.png" as="image"> <link rel="preload" href="images/quiz/title_takumi.png" as="image">
<!-- preload : result --> <!-- preload : result -->
<link rel="preload" href="images/result/base.jpg" as="image"> <link rel="preload" href="images/result/base.jpg" as="image">
<link rel="preload" href="images/result/base.png" as="image"> <link rel="preload" href="images/result/base.png" as="image">
<link rel="preload" href="images/result/main_1_1.png" as="image"> <link rel="preload" href="images/result/main_1_1.png" as="image">
<link rel="preload" href="images/result/main_1_2.png" as="image"> <link rel="preload" href="images/result/main_1_2.png" as="image">
<link rel="preload" href="images/result/main_1_3.png" as="image"> <link rel="preload" href="images/result/main_1_3.png" as="image">
<link rel="preload" href="images/result/main_1_4.png" as="image"> <link rel="preload" href="images/result/main_1_4.png" as="image">
<link rel="preload" href="images/result/main_2.png" as="image"> <link rel="preload" href="images/result/main_2.png" as="image">
<link rel="preload" href="images/result/main_3.png" as="image"> <link rel="preload" href="images/result/main_3.png" as="image">
<link rel="preload" href="images/result/ribbon_1_1.png" as="image"> <link rel="preload" href="images/result/ribbon_1_1.png" as="image">
<link rel="preload" href="images/result/ribbon_1_2.png" as="image"> <link rel="preload" href="images/result/ribbon_1_2.png" as="image">
<link rel="preload" href="images/result/ribbon_1_3.png" as="image"> <link rel="preload" href="images/result/ribbon_1_3.png" as="image">
<link rel="preload" href="images/result/ribbon_1_4.png" as="image"> <link rel="preload" href="images/result/ribbon_1_4.png" as="image">
<link rel="preload" href="images/result/ribbon_2_1.png" as="image"> <link rel="preload" href="images/result/ribbon_2_1.png" as="image">
<link rel="preload" href="images/result/ribbon_2_2.png" as="image"> <link rel="preload" href="images/result/ribbon_2_2.png" as="image">
<link rel="preload" href="images/result/ribbon_2_3.png" as="image"> <link rel="preload" href="images/result/ribbon_2_3.png" as="image">
<link rel="preload" href="images/result/ribbon_2_4.png" as="image"> <link rel="preload" href="images/result/ribbon_2_4.png" as="image">
<link rel="preload" href="images/result/ribbon_3.png" as="image"> <link rel="preload" href="images/result/ribbon_3.png" as="image">
<!-- preload : illust --> <!-- preload : illust -->
</head> </head>
<body> <body>
<div id="container"> <div id="container">
<div id="init_plate"><!------------------------------------------------------------------------------------------ begin : init_plate --> <div id="init_plate">
<div>巧水検定 - ver 1.6</div> <!------------------------------------------------------------------------------------------ begin : init_plate -->
<div id="init_plate_start">START</div> <div>巧水検定 - ver 1.6</div>
</div><!-------------------------------------------------------------------------------------------------------- end : init_plate --> <div id="init_plate_start">START</div>
</div>
<div id="top_anime" class="vanish"><!------------------------------------------------------------------------------------------ begin : top_anime --> <!-------------------------------------------------------------------------------------------------------- end : init_plate -->
<img id="top_checkPoint_1" src="images/top/toilet.png">
<img id="top_checkPoint_2" src="images/top/bath.png"> <div id="top_anime" class="vanish">
<img id="top_checkPoint_3" src="images/top/wheel.png"> <!------------------------------------------------------------------------------------------ begin : top_anime -->
<img id="top_takumi" src="images/top/takumi.png"> <img id="top_checkPoint_1" src="images/top/toilet.png">
<img id="top_boy" src="images/top/boy.png"> <img id="top_checkPoint_2" src="images/top/bath.png">
<img id="top_girl" src="images/top/girl.png"> <img id="top_checkPoint_3" src="images/top/wheel.png">
<img id="top_takumi" src="images/top/takumi.png">
<img id="top_fuki_1" class="vanish" src="images/top/fuki_1.png"> <img id="top_boy" src="images/top/boy.png">
<img id="top_fuki_2" class="vanish" src="images/top/fuki_2.png"> <img id="top_girl" src="images/top/girl.png">
<img id="top_fuki_3" class="vanish" src="images/top/fuki_3.png">
<img id="top_fuki_4" class="vanish" src="images/top/fuki_4.png"> <img id="top_fuki_1" class="vanish" src="images/top/fuki_1.png">
<img id="top_fuki_2" class="vanish" src="images/top/fuki_2.png">
<div id="top_water"><img id="top_water_image" src="images/top/waterBall.png"></div> <img id="top_fuki_3" class="vanish" src="images/top/fuki_3.png">
<img id="top_fuki_4" class="vanish" src="images/top/fuki_4.png">
<div id="top_start_button" class="vanish"></div>
<div id="top_start_button_blink" class="vanish"></div> <div id="top_water"><img id="top_water_image" src="images/top/waterBall.png"></div>
</div><!-------------------------------------------------------------------------------------------------------- end : top_anime -->
<div id="top_start_button" class="vanish"></div>
<div id="select_plate" class="vanish"><!----------------------------------------------------------------------- begin : select_plate --> <div id="top_start_button_blink" class="vanish"></div>
<div id="select_content-0" class="lev0 select_content selected"><!--レベル選択のコンテンツ--> </div>
<div class="select_title"><img src="images/level_menu/text_lev_0.png" /></div> <!-------------------------------------------------------------------------------------------------------- end : top_anime -->
<div class="select_content_button_area_top">
<div id="lv_1" class="select_level_button"> <div id="select_plate" class="vanish">
<div class="level_button_img"><img src="images/level_menu/lev_1.jpg" /></div> <!----------------------------------------------------------------------- begin : select_plate -->
</div> <div id="select_content-0" class="lev0 select_content selected">
<div id="lv_2" class="select_level_button"> <!--レベル選択のコンテンツ-->
<div class="level_button_img"><img src="images/level_menu/lev_2.jpg" /></div> <div class="select_title"><img src="images/level_menu/text_lev_0.png" /></div>
</div> <div class="select_content_button_area_top">
<div id="lv_3" class="select_level_button"> <div id="lv_1" class="select_level_button">
<div class="level_button_img"><img src="images/level_menu/lev_3.jpg" /></div> <div class="level_button_img"><img src="images/level_menu/lev_1.jpg" /></div>
</div> </div>
<div id="lv_4" class="select_level_button"> <div id="lv_2" class="select_level_button">
<div class="level_button_img"><img src="images/level_menu/lev_4.jpg" /></div> <div class="level_button_img"><img src="images/level_menu/lev_2.jpg" /></div>
</div> </div>
</div> <div id="lv_3" class="select_level_button">
</div> <div class="level_button_img"><img src="images/level_menu/lev_3.jpg" /></div>
<div id="select_content-1" class="select_content"><!--初級のコンテンツ--> </div>
<div class="select_title"><img src="images/level_menu/text_lev_1.png" /></div> <div id="lv_4" class="select_level_button">
<div class="select_content_button_area"> <div class="level_button_img"><img src="images/level_menu/lev_4.jpg" /></div>
<div id="lv_1_1" class="select_content_button red_button"></div> </div>
<div id="lv_1_2" class="select_content_button green_button"></div> </div>
<div id="lv_1_3" class="select_content_button blue_button"></div> </div>
</div> <div id="select_content-1" class="select_content">
<div class="select_return_button"></div> <!--初級のコンテンツ-->
</div> <div class="select_title"><img src="images/level_menu/text_lev_1.png" /></div>
<div class="select_content_button_area">
<div id="select_content-2" class="select_content"><!--中級のコンテンツ--> <div id="lv_1_1" class="select_content_button red_button"></div>
<div class="select_title"><img src="images/level_menu/text_lev_2.png" /></div> <div id="lv_1_2" class="select_content_button green_button"></div>
<div class="select_content_button_area"> <div id="lv_1_3" class="select_content_button blue_button"></div>
<div id="lv_2_1" class="select_content_button red_button"></div> </div>
<div id="lv_2_2" class="select_content_button blue_button"></div> <div class="select_return_button"></div>
<div id="lv_2_3" class="select_content_button yellow_button"></div> </div>
</div>
<div class="select_return_button"></div> <div id="select_content-2" class="select_content">
</div> <!--中級のコンテンツ-->
<div class="select_title"><img src="images/level_menu/text_lev_2.png" /></div>
<div id="select_content-3" class="select_content"><!--上級のコンテンツ--> <div class="select_content_button_area">
<div class="select_title"><img src="images/level_menu/text_lev_3.png" /></div> <div id="lv_2_1" class="select_content_button red_button"></div>
<div class="select_content_button_area"> <div id="lv_2_2" class="select_content_button blue_button"></div>
<div id="lv_3_1" class="select_content_button yellow_button"></div> <div id="lv_2_3" class="select_content_button yellow_button"></div>
<div id="lv_3_2" class="select_content_button red_button"></div> </div>
<div id="lv_3_3" class="select_content_button green_button"></div> <div class="select_return_button"></div>
<div id="lv_3_4" class="select_content_button blue_button"></div> </div>
</div>
<div class="select_return_button"></div> <div id="select_content-3" class="select_content">
</div> <!--上級のコンテンツ-->
<div class="select_title"><img src="images/level_menu/text_lev_3.png" /></div>
<div id="select_content-4" class="select_content"><!--博士のコンテンツ--> <div class="select_content_button_area">
<div class="select_title"><img src="images/level_menu/text_lev_4.png" /></div> <div id="lv_3_1" class="select_content_button yellow_button"></div>
<div class="select_content_button_area"> <div id="lv_3_2" class="select_content_button red_button"></div>
<div id="lv_4_1" class="select_content_button green_button"></div> <div id="lv_3_3" class="select_content_button green_button"></div>
<div id="lv_4_2" class="select_content_button yellow_button"></div> <div id="lv_3_4" class="select_content_button blue_button"></div>
<div id="lv_4_3" class="select_content_button blue_button"></div> <div id="lv_3_5" class="select_content_button purple_button"></div>
<div id="lv_4_4" class="select_content_button red_button"></div> </div>
</div> <div class="select_return_button"></div>
<div class="select_return_button"></div> </div>
</div>
</div><!--------------------------------------------------------------------------------------------------- end : select_plate --> <div id="select_content-4" class="select_content">
<!--博士のコンテンツ-->
<div class="select_title"><img src="images/level_menu/text_lev_4.png" /></div>
<div class="select_content_button_area">
<div id="quiz_plate" class="vanish"><!------------------------------------------------------------------------------------ begin : quiz_plate --> <div id="lv_4_1" class="select_content_button green_button"></div>
<div id="quiz_title"><img src="images/level_menu/text_lev_1.png" /></div> <div id="lv_4_2" class="select_content_button yellow_button"></div>
<div id="quiz_board"> <div id="lv_4_3" class="select_content_button blue_button"></div>
<img id="quiz_board_no" src="images/quiz/no_1.png" /> <div id="lv_4_4" class="select_content_button red_button"></div>
<div id="quiz_board_text"> <div id="lv_4_5" class="select_content_button purple_button"></div>
トイレは現在１回あたり「６Ｌ以下」で流す「節水トイレ」が主流ですが、２０１６年度において、日本中に設置されているトイレのうち、この節水トイレの普及率はどの程度になっているでしょうか？ </div>
<small>（日本レストルーム工業会推計）</small> <div class="select_return_button"></div>
</div> </div>
</div> </div>
<div id="answer_area" class="vanish"><!--------------------------------------------------- layout : 3 figs --> <!--------------------------------------------------------------------------------------------------- end : select_plate -->
<div id="a_1" class="answer_button">
<div class="answer_button_img"><img src="images/illust/1_1_1.jpg" /></div>
</div>
<div id="a_2" class="answer_button"> <div id="quiz_plate" class="vanish">
<div class="answer_button_img"><img src="images/illust/1_1_2.jpg" /></div> <!------------------------------------------------------------------------------------ begin : quiz_plate -->
</div> <div id="quiz_title"><img src="images/level_menu/text_lev_1.png" /></div>
<div id="a_3" class="answer_button"> <div id="quiz_board">
<div class="answer_button_img"><img src="images/illust/1_1_3.jpg" /></div> <img id="quiz_board_no" src="images/quiz/no_1.png" />
</div> <div id="quiz_board_text">
</div> トイレは現在１回あたり「６Ｌ以下」で流す「節水トイレ」が主流ですが、２０１６年度において、日本中に設置されているトイレのうち、この節水トイレの普及率はどの程度になっているでしょうか？
<div id="answer_area2"><!--------------------------------------------------- layout : 3 lines --> <small>（日本レストルーム工業会推計）</small>
<div id="answer_area2_fig"><img class="imgBase" src="images/illust/r_1_1_1.jpg" /></div> </div>
<div id="answer_area2_text_area"> </div>
<div id="a2_1" class="answer_button2"><span>基本料金のみでいくら使っても同じ料金。</span></div> <div id="answer_area" class="vanish">
<div id="a2_2" class="answer_button2"><span>使用量に応じた料金で、使わないと料金は０円。</span></div> <!--------------------------------------------------- layout : 3 figs -->
<div id="a2_3" class="answer_button2"><span>基本料金とそれに使用水量に応じた分を加えた料金。</span></div> <div id="a_1" class="answer_button">
</div> <div class="answer_button_img"><img src="images/illust/1_1_1.jpg" /></div>
</div> </div>
</div><!--------------------------------------------------------------------------------------------------- end : quiz_plate --> <div id="a_2" class="answer_button">
<div class="answer_button_img"><img src="images/illust/1_1_2.jpg" /></div>
</div>
<div id="a_3" class="answer_button">
<div id="ans_plate" class="vanish"><!------------------------------------------------------------------------------------ begin : ans_plate --> <div class="answer_button_img"><img src="images/illust/1_1_3.jpg" /></div>
<div id="ans_title"><img src="images/level_menu/text_lev_1.png" /></div> </div>
<div id="ans_board"> </div>
<div id="ans_board_text"> <div id="answer_area2">
残念。正解は「お風呂」。<br>トイレは２番目に多く、およそ２２％を占めます。<br><small>（平成24年度東京都水道局調べ）</small> <!--------------------------------------------------- layout : 3 lines -->
</div> <div id="answer_area2_fig"><img class="imgBase" src="images/illust/r_1_1_1.jpg" /></div>
</div> <div id="answer_area2_text_area">
<div id="explain_area"> <div id="a2_1" class="answer_button2"><span>基本料金のみでいくら使っても同じ料金。</span></div>
<div id="explain_fig"><img class="imgBase" src="images/illust/r_1_1_1.jpg" /></div> <div id="a2_2" class="answer_button2"><span>使用量に応じた料金で、使わないと料金は０円。</span></div>
<div id="explain_text"> <div id="a2_3" class="answer_button2"><span>基本料金とそれに使用水量に応じた分を加えた料金。</span></div>
基本使用量を超えると、使用するほどに段階的に料金が上がるようになっています。したがって、たくさん使うほうが単価が高くなるのです。 </div>
水は必需品ですから、「生活に必要不可欠な分については単価を低く設定する」という考えがベースになっているためです。 </div>
</div> </div>
</div> <!--------------------------------------------------------------------------------------------------- end : quiz_plate -->
</div><!--------------------------------------------------------------------------------------------------- end : ans_plate -->
<div id="drum_text" class="vanish"><!------------------------------------------------------------------------------------------ begin : drum_text --> <div id="ans_plate" class="vanish">
<img id="drum_text_img" src="images/result/drum_text.png" /> <!------------------------------------------------------------------------------------ begin : ans_plate -->
</div><!------------------------------------------------------------------------------------------------------------------------ end : drum_text --> <div id="ans_title"><img src="images/level_menu/text_lev_1.png" /></div>
<div id="ans_board">
<div id="ans_board_text">
残念。正解は「お風呂」。<br>トイレは２番目に多く、およそ２２％を占めます。<br><small>（平成24年度東京都水道局調べ）</small>
<div id="result_plate" class="vanish"><!------------------------------------------------------------------------------------ begin : ans_plate --> </div>
<div id="result_title"><img src="images/result/ribbon_2_4.png" /></div> </div>
<div id="result_area"> <div id="explain_area">
<img id="result_main" src="images/result/main_2.png" /> <div id="explain_fig"><img class="imgBase" src="images/illust/r_1_1_1.jpg" /></div>
</div> <div id="explain_text">
</div><!--------------------------------------------------------------------------------------------------- end : ans_plate --> 基本使用量を超えると、使用するほどに段階的に料金が上がるようになっています。したがって、たくさん使うほうが単価が高くなるのです。
水は必需品ですから、「生活に必要不可欠な分については単価を低く設定する」という考えがベースになっているためです。
</div>
</div>
</div>
<div id="doctor" class="vanish"> <!--------------------------------------------------------------------------------------------------- end : ans_plate -->
<img class="imgBase" src="images/doctor/doctor_smile.png"/>
</div>
<div id="doctor_fuki" class="vanish"> <div id="drum_text" class="vanish">
<img class="fuki_text" src="images/doctor/fuki_text_select.png"/> <!------------------------------------------------------------------------------------------ begin : drum_text -->
</div> <img id="drum_text_img" src="images/result/drum_text.png" />
<div id="takumi" class="vanish"> </div>
<img class="imgBase" src="images/takumi/takumi_smile.png"/> <!------------------------------------------------------------------------------------------------------------------------ end : drum_text -->
</div>
<div id="takumi_fuki" class="vanish">
<img class="fuki_text" src="images/takumi/fuki_text_start.png"/>
</div> <div id="result_plate" class="vanish">
<!------------------------------------------------------------------------------------ begin : ans_plate -->
<div id="result_title"><img src="images/result/ribbon_2_4.png" /></div>
<div id="result_area">
<img id="result_main" src="images/result/main_2.png" />
<!-- buttons in select scene --> </div>
<div id="button_return" class="vanish"></div> </div>
<!--------------------------------------------------------------------------------------------------- end : ans_plate -->
<!-- buttons in result scene -->
<div id="button_next" class="vanish"></div>
<div id="result_top_button" class="vanish"></div>
<div id="result_select_button" class="vanish"></div>
<div id="doctor" class="vanish">
<img class="imgBase" src="images/doctor/doctor_smile.png" />
</div><!-- end : container --> </div>
<div id="doctor_fuki" class="vanish">
<img class="fuki_text" src="images/doctor/fuki_text_select.png" />
</div>
<div id="takumi" class="vanish">
<img class="imgBase" src="images/takumi/takumi_smile.png" />
</div>
<div id="takumi_fuki" class="vanish">
<img class="fuki_text" src="images/takumi/fuki_text_start.png" />
</div>
<!-- buttons in select scene -->
<div id="button_return" class="vanish"></div>
<!-- buttons in result scene -->
<div id="button_next" class="vanish"></div>
<div id="result_top_button" class="vanish"></div>
<div id="result_select_button" class="vanish"></div>
</div><!-- end : container -->
</body> </body>
</html> </html>
takumi-style/js/json.js
...@@ -390,9 +390,40 @@ jsonData = { ...@@ -390,9 +390,40 @@ jsonData = {
"answer_fig": "r_3_4_3.jpg" "answer_fig": "r_3_4_3.jpg"
}, },
"comment_3_5": "------------------------------------------------------------------------ 上級：ID = 5 --------------------------------------------------------------------------",
"3_5_1": {
"qText": [3, "日本では、水の日が制定されていますが、<br>それはいつでしょうか？"],
"answerID": "2",
"layoutType": "line",
"fig": "3_4_1.jpg",
"a_1": [3, "残念。<strong>４月１日はエイプリルフール</strong>ですね。<br>正解は②<strong>８月１日</strong>でした。", 3, "４月１日"],
"a_2": [3, "正解！ <strong>８月１日が水の日</strong>です。", 3, "８月１日"],
"a_3": [3, "残念。<strong>９月１日は防災の日</strong>ですね。<br>正解は②<strong>８月１日</strong>でした。", 3, "９月１日"],
"answer_text": "水の重要性について国民の関心を高め、理解を深めるため、毎年８月１日を<strong>水の日</strong>としています。また、この日を初日とする１週間が<strong>水の週間</strong>とされています。",
"answer_fig": "r_3_4_1.jpg"
},
"3_5_2": {
"qText": [3, "家庭から出る排水のうち、もっとも水を汚す原因になっているものはどこからの排水でしょうか?"],
"answerID": "3",
"layoutType": "line",
"fig": "3_4_2.jpg",
"a_1": [3, "残念。正解は③<strong>台所からの排水</strong>でした。<br><small>（環境省「生活排水読本」より）</small>", 3, "トイレからの排水"],
"a_2": [3, "残念。正解は③<strong>台所からの排水</strong>でした。<br><small>（環境省「生活排水読本」より）</small>", 3, "風呂・洗濯からの排水"],
"a_3": [2, "正解。<strong>台所からの排水が水質汚濁原因の１番</strong>とされています。<br><small>（環境省「生活排水読本」より）</small>", 3, "台所からの排水"],
"answer_text": "台所から食べ残しや飲み残し、残った油等をできるだけ流さないように心掛けましょう。",
"answer_fig": "r_3_4_2.jpg"
},
"3_5_3": {
"qText": [3, "シャワーを３分間出したままにすると、どれくらいの水を使うでしょうか?"],
"answerID": "3",
"layoutType": "line",
"fig": "3_4_3.jpg",
"a_1": [3, "残念。正解は③<strong>約30リットル</strong>も流れます。<br><small>（TOTO「お客様向け環境コミュニケーションサイト」より）</small>", 3, "約10リットル<br><small>（大きなバケツに1杯くらい）</small>"],
"a_2": [3, "残念。正解は③<strong>約30リットル</strong>も流れます。<br><small>（TOTO「お客様向け環境コミュニケーションサイト」より）</small>", 3, "約20リットル<br><small>（大きなバケツに2杯くらい）</small>"],
"a_3": [3, "正解。<strong>約30リットルも流れる</strong>んですね。<br><small>（TOTO「お客様向け環境コミュニケーションサイト」より）</small>", 3, "約30リットル<br><small>（大きなバケツに3杯くらい）</small>"],
"answer_text": "最新の節水シャワーに取り換えると２/３くらいまで節水できます。こまめにシャワーを止めたり、節水シャワーに交換するなどして、節水を心掛けましょう。",
"answer_fig": "r_3_4_3.jpg"
},
"comment_4_1": "------------------------------------------------------------------------博士級：ID = 1 --------------------------------------------------------------------------", "comment_4_1": "------------------------------------------------------------------------博士級：ID = 1 --------------------------------------------------------------------------",
"4_1_1": { "4_1_1": {
...@@ -532,6 +563,41 @@ jsonData = { ...@@ -532,6 +563,41 @@ jsonData = {
"a_3": [3, "残念。正解は②<strong>およそ２割</strong>でした。<br><small>（国土交通省 平成28年度版 日本の水資源の現況より）</small>", 3, "およそ７割"], "a_3": [3, "残念。正解は②<strong>およそ２割</strong>でした。<br><small>（国土交通省 平成28年度版 日本の水資源の現況より）</small>", 3, "およそ７割"],
"answer_text": "国土交通省の平成２８年度調査結果公表によると、７割近くは<strong>農業用水</strong>、家庭内や外出先などで使用する<strong>生活用水</strong>は、およそ２割を占め、残りが<strong>工業用水</strong>として利用されているそうです。", "answer_text": "国土交通省の平成２８年度調査結果公表によると、７割近くは<strong>農業用水</strong>、家庭内や外出先などで使用する<strong>生活用水</strong>は、およそ２割を占め、残りが<strong>工業用水</strong>として利用されているそうです。",
"answer_fig": "r_4_4_3.jpg" "answer_fig": "r_4_4_3.jpg"
},
"comment_4_5": "TODO------------------------------------------------------------------------博士級：ID = 5 --------------------------------------------------------------------------",
"4_5_1": {
"qText": [1, "洗濯機で注水すすぎをせず、ためすすぎをすると、1ヶ月でどれだけ節水になるでしょうか？<br><small>※縦型全自動洗濯機８ｋｇで２回すすぎの場合で、毎日１回洗濯機を回すとして計算</small>"],
"answerID": "3",
"layoutType": "line",
"fig": "4_4_1.jpg",
"a_1": [3, "残念。正解は③<strong>１ヵ月で約1,800リットル</strong>でした。", 3, "約300リットル<br><small>（おふろ約1.5杯分）</small>"],
"a_2": [3, "残念。正解は③<strong>１ヵ月で約1,800リットル</strong>でした。", 3, "約900リットル<br><small>（おふろ約4.5杯分）</small>"],
"a_3": [3, "正解。注水すすぎは<strong>１ヵ月で約1,800リットル</strong>もの水を使うんですね。", 3, "約1,800リットル<br><small>（おふろ約９杯分）</small>"],
"answer_text": "注水すすぎは溜めすすぎにくらべて多くの水を使います。アレルギーの問題がなければ節水のために、ためすすぎをお勧めします。",
"answer_fig": "r_4_4_1.jpg"
},
"4_5_2": {
"qText": [1, "１回あたり6リットル以下で流す節水トイレが販売されていますが、日本中に設置されているトイレのうち、この節水トイレの占める割合はどのくらいになっているでしょうか？<small>（日本レストルーム工業会推計）</small>"],
"answerID": "2",
"layoutType": "line",
"fig": "4_2_1.jpg",
"a_1": [3, "残念。正解は②<strong>約44%</strong>でした。<br><small>（2016年度 日本レストルーム工業会推計）</small>", 3, "約22%"],
"a_2": [3, "正解！まだ<strong>全体の44%程度しか</strong>設置されていません。<br><small>（2016年度 日本レストルーム工業会推計）</small>", 3, "約44%"],
"a_3": [3, "残念。正解は②<strong>約44%</strong>でした。まだまだ少ないですね。<br><small>（2016年度 日本レストルーム工業会推計）</small>", 3, "約66%"],
"answer_text": "まだまだ多くの水量を流している便器があります。大切な水を節約するためにも、こうした節水トイレがもっと増えるといいですね。",
"answer_fig": "r_4_2_1.jpg"
},
"4_5_3": {
"qText": [3, "日本の水使用において、家庭内や外出先などで使用されている水量はどれくらいを占めているでしょうか？"],
"answerID": "2",
"layoutType": "line",
"fig": "4_4_3.jpg",
"a_1": [3, "残念。正解は②<strong>およそ２割</strong>でした。<br><small>（国土交通省 平成28年度版 日本の水資源の現況より）</small>", 3, "およそ１割"],
"a_2": [3, "正解！<strong>およそ２割はわたしたちの生活に使用</strong>しています。<br><small>（国土交通省 平成28年度版 日本の水資源の現況より）</small>", 3, "およそ２割"],
"a_3": [3, "残念。正解は②<strong>およそ２割</strong>でした。<br><small>（国土交通省 平成28年度版 日本の水資源の現況より）</small>", 3, "およそ７割"],
"answer_text": "国土交通省の平成２８年度調査結果公表によると、７割近くは<strong>農業用水</strong>、家庭内や外出先などで使用する<strong>生活用水</strong>は、およそ２割を占め、残りが<strong>工業用水</strong>として利用されているそうです。",
"answer_fig": "r_4_4_3.jpg"
} }
......
takumi-style/js/json_0723.js 0 → 100644
jsonData = {
"comment_1_1": "------------------------------------------------------------------------ 初級：ID = 1 --------------------------------------------------------------------------",
"1_1_1": {
"qText": [3, "トイレでじょうずに<ruby>水<rt>みず</rt></ruby>を<ruby>節約<rt>せつやく</rt></ruby>する<ruby>方法<rt>ほうほう</rt></ruby>はどれでしょうか？"],
"answerID": "3",
"layoutType": "line",
"fig": "1_1_1.jpg",
"a_1": [2, "ざんねん！<ruby>正解<rt>せいかい</rt></ruby>は③<strong>「<ruby>大<rt>だい</rt>洗浄<rt>せんじょう</rt></ruby>」「<ruby>小<rt>しょう</rt>洗浄<rt>せんじょう</rt></ruby>」の<ruby>機能<rt>きのう</rt></ruby>を<ruby>使<rt>つか</rt></ruby>い<ruby>分<rt>わけ</rt></ruby>ける</strong>でした。トイレは<ruby>使<rt>つか</rt></ruby>うたびに<ruby>流<rt>なが</rt></ruby>しましょう。", 2,
"<ruby>水<rt>みず</rt></ruby>を<ruby>何度<rt>なんど</rt></ruby>かに１<ruby>回<rt>かい</rt></ruby>だけ<ruby>流<rt>なが</rt>す</ruby>"],
"a_2": [2, "ざんねん！<ruby>正解<rt>せいかい</rt></ruby>は③<strong>「<ruby>大<rt>だい</rt>洗浄<rt>せんじょう</rt></ruby>」「<ruby>小<rt>しょう</rt>洗浄<rt>せんじょう</rt></ruby>」の<ruby>機能<rt>きのう</rt></ruby>を<ruby>使<rt>つか</rt></ruby>い<ruby>分<rt>わけ</rt></ruby>ける</strong>でした。トイレは<ruby>使<rt>つか</rt></ruby>うたびに<ruby>流<rt>なが</rt></ruby>しましょう。", 2,
"トイレは<ruby>外出先<rt>がいしゅつさき</rt></ruby>や<ruby>学校<rt>がっこう</rt></ruby>などですませる"],
"a_3": [3, "<ruby>正解<rt>せいかい</rt></ruby>！<ruby>大<rt>だい</rt></ruby><ruby>洗浄<rt>せんじょう</rt></ruby>より<strong><ruby>小<rt>しょう</rt></ruby><ruby>洗浄<rt>せんじょう</rt></ruby>のほうが<br><ruby>流<rt>なが</rt></ruby>す<ruby>水量<rt>すいりょう</rt></ruby>は<ruby>節約<rt>せつやく</rt></ruby></strong>できます。", 2,
"トイレの「<ruby>大洗浄<rt>だいせんじょう</rt></ruby>」、「<ruby>小洗浄<rt>しょうせんじょう</rt></ruby>」の<ruby>機能<rt>きのう</rt></ruby>を使い分ける"],
"answer_text": "<ruby>大<rt>だい</rt></ruby>・<ruby>小<rt>しょう</rt></ruby>の<ruby>切り替え<rt>き　か　</rt></ruby>を<ruby>上手<rt>じょうず</rt></ruby>に<ruby>使<rt>つか</rt></ruby>って<ruby>節水<rt>せっすい</rt></ruby>しましょう。また、<ruby>節水<rt>せっすい</rt></ruby>するには、<ruby>最新<rt>さいしん</rt></ruby>の<ruby>節水<rt>せっすい</rt></ruby>トイレに<ruby>取<rt>と</rt></ruby>り<ruby>替<rt>か</rt></ruby>えるのもオススメです。",
"answer_fig": "r_1_1_1.jpg"
},
"1_1_2": {
"qText": [3, "<ruby>歯<rt>は</rt></ruby>みがきするときに<ruby>水<rt>みず</rt></ruby>を<ruby>節約<rt>せつやく</rt></ruby>するくふうとして<ruby>正<rt>ただ</rt></ruby>しいのはどれでしょうか？"],
"answerID": "2",
"layoutType": "line",
"fig": "1_1_2.jpg",
"a_1": [3, "ざんねん。<ruby>正解<rt>せいかい</rt></ruby>は②<strong>コップに<ruby>水<rt>みず</rt></ruby>をためて<ruby>口<rt>くち</rt></ruby>をゆすぐ</strong>でした。", 2,
"<ruby>水道<rt>すいどう</rt></ruby><ruby>水<rt>すい</rt></ruby>を<ruby>流<rt>なが</rt></ruby>しながら<ruby>口<rt>くち</rt></ruby>をゆすぐ"],
"a_2": [3, "<ruby>正解<rt>せいかい</rt></ruby>！<strong><ruby>必要<rt>ひつよう</rt></ruby>な<ruby>量<rt>りょう</rt></ruby>だけコップに<ruby>汲<rt>く</rt></ruby>んで<br><ruby>使用<rt>しよう</rt></ruby>することで<ruby>節水<rt>せっすい</rt></ruby>ができます。</strong>", 2,
"コップに<ruby>水<rt>みず</rt></ruby>をためて<ruby>口<rt>くち</rt></ruby>をゆすぐ"],
"a_3": [3, "ざんねん。<ruby>正解<rt>せいかい</rt></ruby>は②<strong>コップに<ruby>水<rt>みず</rt></ruby>をためて<ruby>口<rt>くち</rt></ruby>をゆすぐ</strong>でした。", 2,
"<ruby>歯<rt>は</rt></ruby>みがきの<ruby>回数<rt>かいすう</rt></ruby>をへらす"],
"answer_text": "<ruby>水道<rt>すいどう</rt></ruby>の<ruby>水<rt>みず</rt></ruby>は<ruby>流<rt>なが</rt></ruby>しっぱなしにせずに、コップを<ruby>使<rt>つか</rt></ruby>うようにしましょう。ごはんやおやつの<ruby>後<rt>あと</rt>は</ruby><ruby>歯磨<rt>はみが</rt></ruby>きしようね。",
"answer_fig": "r_1_1_2.jpg"
},
"1_1_3": {
"qText": [3, "<ruby>田<rt>た</rt></ruby>んぼにはお<ruby>米<rt>こめ</rt></ruby>をつくる<ruby>以外<rt>いがい</rt></ruby>にどんな<br>はたらきがあるでしょうか?"],
"answerID": "1",
"layoutType": "line",
"fig": "1_1_3.jpg",
"a_1": [3, "<ruby>正解<rt>せいかい</rt></ruby>！ <strong><ruby>田<rt>た</rt></ruby>んぼは<ruby>大雨<rt>おおあめ</rt></ruby>のときにも<ruby>役立<rt>やくだ</rt></ruby>つ</strong>んだね。<br><small>（関東農政局HPより）</small>", 2,
"<ruby>大雨<rt>おおあめ</rt></ruby>のときに、<ruby>洪水<rt>こうずい</rt></ruby>を<ruby>防<rt>ふせ</rt></ruby>ぐダムの<ruby>役割<rt>やくわり</rt></ruby>"],
"a_2": [3, "ざんねん。<ruby>正解<rt>せいかい</rt></ruby>は① <strong><ruby>洪水<rt>こうずい</rt></ruby>を<ruby>防<rt>ふせ</rt></ruby>ぐダムの<ruby>役割<rt>やくわり</rt></ruby></strong>でした。<br><small>（関東農政局HPより）</small>", 2,
"<ruby>火山<rt>かざん</rt></ruby>の<ruby>噴火<rt>ふんか</rt></ruby>を<ruby>防<rt>ふせ</rt></ruby>ぐ<ruby>役割<rt>やくわり</rt></ruby>"],
"a_3": [3, "ざんねん。<ruby>正解<rt>せいかい</rt></ruby>は① <strong><ruby>洪水<rt>こうずい</rt></ruby>を<ruby>防<rt>ふせ</rt></ruby>ぐダムの<ruby>役割<rt>やくわり</rt></ruby></strong>でした。<br><small>（関東農政局HPより）</small>", 2,
"カミナリの<ruby>被害<rt>ひがい</rt></ruby>を<ruby>防<rt>ふせ</rt></ruby>ぐ<ruby>役割<rt>やくわり</rt></ruby>"],
"answer_text": "<ruby>大雨<rt>おおあめ</rt></ruby>のときには、<ruby>田<rt>た</rt></ruby>んぼに<ruby>水<rt>みず</rt></ruby>が<ruby>溜<rt>た</rt></ruby>まりダムと<ruby>同<rt>おな</rt></ruby>じような<ruby>役割<rt>やくわり</rt></ruby>をしています。このはたらきによって、まわりの<ruby>地域<rt>ちいき</rt></ruby>を洪水から<ruby>守<rt>まも</rt></ruby>る<ruby>働<rt>はたら</rt></ruby>きもあるのです。",
"answer_fig": "r_1_1_3.jpg"
},
"comment_1_2": "------------------------------------------------------------------------ 初級：ID = 2 --------------------------------------------------------------------------",
"1_2_1": {
"qText": [3, "<ruby>洗<rt>せん</rt></ruby>たく<ruby>機<rt>き</rt></ruby>の<ruby>使<rt>つか</rt></ruby>い<ruby>方<rt>かた</rt></ruby>で<ruby>水<rt>みず</rt></ruby>を<ruby>節約<rt>せつやく</rt></ruby>できるのはどれでしょうか?"],
"answerID": "2",
"layoutType": "line",
"fig": "1_2_2.jpg",
"a_1": [3, "ざんねん。<ruby>正解<rt>せいかい</rt></ruby>は②<strong><ruby>洗<rt>せん</rt></ruby>たくものをまとめて<ruby>洗<rt>あら</rt></ruby>う</strong>でした。", 2,
"<ruby>洗<rt>せん</rt></ruby>たくものをこまめに<ruby>分<rt>わ</rt></ruby>けて<ruby>洗<rt>あら</rt></ruby>う"],
"a_2": [3, "<ruby>正解<rt>せいかい</rt></ruby>。　<ruby>何度<rt>なんど</rt></ruby>も<ruby>洗<rt>せん</rt></ruby>たくするより、<strong><br>まとめて<ruby>洗<rt>あら</rt></ruby>うと<ruby>水<rt>みず</rt></ruby>が<ruby>節約<rt>せつやく</rt></ruby>できます。</strong>", 2,
"<ruby>洗<rt>せん</rt></ruby>たくものをまとめて<ruby>洗<rt>あら</rt></ruby>う"],
"a_3": [3, "ざんねん。<ruby>正解<rt>せいかい</rt></ruby>は②<strong><ruby>洗<rt>せん</rt></ruby>たくものをまとめて<ruby>洗<rt>あら</rt></ruby>う</strong>でした。", 2,
"<ruby>洗<rt>せん</rt></ruby>たくものをひとばん<ruby>水<rt>みず</rt></ruby>につけてから<ruby>洗<rt>あら</rt></ruby>う"],
"answer_text": "<ruby>洗濯<rt>せんたく</rt></ruby>は<ruby>分<rt>わ</rt></ruby>けて<ruby>何度<rt>なんど</rt></ruby>も<ruby>洗<rt>あら</rt></ruby>うより、まとめて<ruby>洗<rt>あら</rt></ruby>うのが<ruby>節水<rt>せっすい</rt></ruby>のコツです。",
"answer_fig": "r_1_2_2.jpg"
},
"1_2_2": {
"qText": [3, "トイレでじょうずに<ruby>水<rt>みず</rt></ruby>を<ruby>節約<rt>せつやく</rt></ruby>する<ruby>方法<rt>ほうほう</rt></ruby>はどれでしょうか？"],
"answerID": "3",
"layoutType": "line",
"fig": "1_1_1.jpg",
"a_1": [2, "ざんねん！<ruby>正解<rt>せいかい</rt></ruby>は③<strong>「<ruby>大<rt>だい</rt>洗浄<rt>せんじょう</rt></ruby>」「<ruby>小<rt>しょう</rt>洗浄<rt>せんじょう</rt></ruby>」の<ruby>機能<rt>きのう</rt></ruby>を<ruby>使<rt>つか</rt></ruby>い<ruby>分<rt>わけ</rt></ruby>ける</strong>でした。トイレは<ruby>使<rt>つか</rt></ruby>うたびに<ruby>流<rt>なが</rt></ruby>しましょう。", 2,
"<ruby>水<rt>みず</rt></ruby>を<ruby>何度<rt>なんど</rt></ruby>かに１<ruby>回<rt>かい</rt></ruby>だけ<ruby>流<rt>なが</rt>す</ruby>"],
"a_2": [2, "ざんねん！<ruby>正解<rt>せいかい</rt></ruby>は③<strong>「<ruby>大<rt>だい</rt>洗浄<rt>せんじょう</rt></ruby>」「<ruby>小<rt>しょう</rt>洗浄<rt>せんじょう</rt></ruby>」の<ruby>機能<rt>きのう</rt></ruby>を<ruby>使<rt>つか</rt></ruby>い<ruby>分<rt>わけ</rt></ruby>ける</strong>でした。トイレは<ruby>使<rt>つか</rt></ruby>うたびに<ruby>流<rt>なが</rt></ruby>しましょう。", 2,
"トイレは<ruby>外出先<rt>がいしゅつさき</rt></ruby>や<ruby>学校<rt>がっこう</rt></ruby>などですませる"],
"a_3": [3, "<ruby>正解<rt>せいかい</rt></ruby>！<ruby>大<rt>だい</rt></ruby><ruby>洗浄<rt>せんじょう</rt></ruby>より<strong><ruby>小<rt>しょう</rt></ruby><ruby>洗浄<rt>せんじょう</rt></ruby>のほうが<br><ruby>流<rt>なが</rt></ruby>す<ruby>水量<rt>すいりょう</rt></ruby>は<ruby>節約<rt>せつやく</rt></ruby></strong>できます。", 2,
"トイレの「<ruby>大洗浄<rt>だいせんじょう</rt></ruby>」、「<ruby>小洗浄<rt>しょうせんじょう</rt></ruby>」の<ruby>機能<rt>きのう</rt></ruby>を使い分ける"],
"answer_text": "<ruby>大<rt>だい</rt></ruby>・<ruby>小<rt>しょう</rt></ruby>の<ruby>切り替え<rt>き　か　</rt></ruby>を<ruby>上手<rt>じょうず</rt></ruby>に<ruby>使<rt>つか</rt></ruby>って<ruby>節水<rt>せっすい</rt></ruby>しましょう。また、<ruby>節水<rt>せっすい</rt></ruby>するには、<ruby>最新<rt>さいしん</rt></ruby>の<ruby>節水<rt>せっすい</rt></ruby>トイレに<ruby>取<rt>と</rt></ruby>り<ruby>替<rt>か</rt></ruby>えるのもオススメです。",
"answer_fig": "r_1_1_1.jpg"
},
"1_2_3": {
"qText": [3, "<ruby>節水<rt>せっすい</rt></ruby>すると<ruby>地球<rt>ちきゅう</rt></ruby>にやさしくすることができます。<br>それはなぜでしょうか？"],
"answerID": "2",
"layoutType": "line",
"fig": "1_2_3.jpg",
"a_1": [3, "ざんねん！<ruby>正解<rt>せいかい</rt></ruby>は②、<ruby>地震<rt>じしん</rt></ruby>は<ruby>減<rt>へ</rt></ruby>らせませんが<strong>CO<sub>2</sub>（<ruby>二酸化炭素<rt>にさんかたんそ</rt></ruby>）の<ruby>排出<rt>はいしゅつ</rt></ruby>を<ruby>減<rt>へ</rt></ruby>らすことができます。</strong>", 3,
"<ruby>地震<rt>じしん</rt></ruby>を<ruby>減<rt>へ</rt></ruby>らすことができる"],
"a_2": [2, "<ruby>正解<rt>せいかい</rt></ruby>！<strong><ruby>水<rt>みず</rt></ruby>を<ruby>使<rt>つか</rt></ruby>う</strong>ことで<ruby>浄水場<rt>じょうすいじょう</rt></ruby>や<ruby>下水<rt>げすい</rt></ruby><ruby>処理場<rt>しょりじょう</rt></ruby>などで<strong>たくさんの<ruby>電気<rt>でんき</rt></ruby>を<ruby>使<rt>つか</rt></ruby>っています。</strong>その<strong><ruby>電気<rt>でんき</rt></ruby>をつくるのにCO<sub>2</sub>が<ruby>排出<rt>はいしゅつ</rt></ruby>されているのです。</strong>", 2,
"CO<sub>2</sub>（<ruby>二酸化炭素<rt>にさんかたんそ</rt></ruby>）の<ruby>排出<rt>はいしゅつ</rt></ruby>を<ruby>減<rt>へ</rt></ruby>らすことができる"],
"a_3": [3, "ざんねん！<ruby>正解<rt>せいかい</rt></ruby>は②、<ruby>洪水<rt>こうずい</rt></ruby>は<ruby>減<rt>へ</rt></ruby>らせませんが<strong>CO<sub>2</sub>（<ruby>二酸化炭素<rt>にさんかたんそ</rt></ruby>）の<ruby>排出<rt>はいしゅつ</rt></ruby>を<ruby>減<rt>へ</rt></ruby>らすことができます。</strong>", 2,
"<ruby>洪水<rt>こうずい</rt></ruby>を<ruby>減<rt>へ</rt></ruby>らすことができる"],
"answer_text": "CO<sub>2</sub>（<ruby>二酸化炭素<rt>にさんかたんそ</rt></ruby>）の<ruby>排出<rt>はいしゅつ</rt></ruby>を<ruby>減<rt>へ</rt></ruby>らすことは、とても<ruby>大切<rt>たいせつ</rt></ruby>なことです。<ruby>節水<rt>せっすい</rt></ruby>することで、<ruby>節約<rt>せつやく</rt></ruby>しながら<ruby>地球<rt>ちきゅう</rt></ruby>を<ruby>守<rt>まも</rt></ruby>ることにもつながっています。",
"answer_fig": "r_1_2_3.jpg"
},
"comment_1_3": "------------------------------------------------------------------------ 初級：ID = 3 --------------------------------------------------------------------------",
"1_3_1": {
"qText": [3, "<ruby>歯<rt>は</rt></ruby>みがきするときに<ruby>水<rt>みず</rt></ruby>を<ruby>節約<rt>せつやく</rt></ruby>するくふうとして<ruby>正<rt>ただ</rt></ruby>しいのはどれでしょうか？"],
"answerID": "2",
"layoutType": "line",
"fig": "1_1_2.jpg",
"a_1": [3, "ざんねん。<ruby>正解<rt>せいかい</rt></ruby>は②<strong>コップに<ruby>水<rt>みず</rt></ruby>をためて<ruby>口<rt>くち</rt></ruby>をゆすぐ</strong>でした。", 2,
"<ruby>水道<rt>すいどう</rt></ruby><ruby>水<rt>すい</rt></ruby>を<ruby>流<rt>なが</rt></ruby>しながら<ruby>口<rt>くち</rt></ruby>をゆすぐ"],
"a_2": [3, "<ruby>正解<rt>せいかい</rt></ruby>！<strong><ruby>必要<rt>ひつよう</rt></ruby>な<ruby>量<rt>りょう</rt></ruby>だけコップに<ruby>汲<rt>く</rt></ruby>んで<br><ruby>使用<rt>しよう</rt></ruby>することで<ruby>節水<rt>せっすい</rt></ruby>ができます。</strong>", 2,
"コップに<ruby>水<rt>みず</rt></ruby>をためて<ruby>口<rt>くち</rt></ruby>をゆすぐ"],
"a_3": [3, "ざんねん。<ruby>正解<rt>せいかい</rt></ruby>は②<strong>コップに<ruby>水<rt>みず</rt></ruby>をためて<ruby>口<rt>くち</rt></ruby>をゆすぐ</strong>でした。", 2,
"<ruby>歯<rt>は</rt></ruby>みがきの<ruby>回数<rt>かいすう</rt></ruby>をへらす"],
"answer_text": "<ruby>水道<rt>すいどう</rt></ruby>の<ruby>水<rt>みず</rt></ruby>は<ruby>流<rt>なが</rt></ruby>しっぱなしにせずに、コップを<ruby>使<rt>つか</rt></ruby>うようにしましょう。ごはんやおやつの<ruby>後<rt>あと</rt>は</ruby><ruby>歯磨<rt>はみが</rt></ruby>きしようね。",
"answer_fig": "r_1_1_2.jpg"
},
"1_3_2": {
"qText": [3, "<ruby>台所<rt>だいどころ</rt></ruby>で<ruby>油<rt>あぶら</rt></ruby><ruby>汚れ<rt>よご　</rt></ruby>の<ruby>食器<rt>しょっき</rt></ruby>を<ruby>洗<rt>あら</rt></ruby>うときに、<ruby>水<rt>みず</rt></ruby>の<ruby>節約<rt>せつやく</rt></ruby>のくふうとして<ruby>正<rt>ただ</rt></ruby>しいのはどれでしょうか？　"],
"answerID": "1",
"layoutType": "line",
"fig": "1_3_2.jpg",
"a_1": [3, "<ruby>正解<rt>せいかい</rt></ruby>！<strong><ruby>汚<rt>よご</rt></ruby>れをふき<ruby>取<rt>と</rt></ruby>っておくと<ruby>洗剤<rt>せんざい</rt></ruby>も<ruby>水<rt>みず</rt></ruby>も<ruby>節約<rt>せつやく</rt></ruby>できます。</strong>", 2,
"<ruby>油<rt>あぶら</rt></ruby><ruby>汚<rt>よご</rt></ruby>れをふき<ruby>取<rt>と</rt></ruby>ってから<ruby>洗<rt>あら</rt></ruby>う"],
"a_2": [3, "ざんねん。<ruby>正解<rt>せいかい</rt></ruby>は①<strong><ruby>油<rt>あぶら</rt></ruby><ruby>汚<rt>よご</rt></ruby>れをふき<ruby>取<rt>と</rt></ruby>ってから<ruby>洗<rt>あら</rt></ruby>う</strong>でした。", 2,
"<ruby>洗剤<rt>せんざい</rt></ruby>をたっぷり<ruby>使<rt>つか</rt></ruby>って<ruby>洗<rt>あら</rt></ruby>う"],
"a_3": [3, "ざんねん。<ruby>正解<rt>せいかい</rt></ruby>は①<strong><ruby>油<rt>あぶら</rt></ruby><ruby>汚<rt>よご</rt></ruby>れをふき<ruby>取<rt>と</rt></ruby>ってから<ruby>洗<rt>あら</rt></ruby>う</strong>でした。", 2,
"ひと<ruby>晩<rt>ばん</rt></ruby>そのままにしておいてから<ruby>洗<rt>あら</rt></ruby>う"],
"answer_text": "<ruby>食器<rt>しょっき</rt></ruby>についた<ruby>油<rt>あぶら</rt></ruby><ruby>汚<rt>よご</rt></ruby>れをあらかじめ<ruby>拭<rt>ふ</rt></ruby>き<ruby>取<rt>と</rt></ruby>っておくと、<ruby>洗剤<rt>せんざい</rt></ruby>も<ruby>水<rt>みず</rt></ruby>も<ruby>少<rt>すく</rt></ruby>なくてすみます。",
"answer_fig": "r_1_3_2.jpg"
},
"1_3_3": {
"qText": [3, "トイレでじょうずに<ruby>水<rt>みず</rt></ruby>を<ruby>節約<rt>せつやく</rt></ruby>する<ruby>方法<rt>ほうほう</rt></ruby>はどれでしょうか？"],
"answerID": "3",
"layoutType": "line",
"fig": "1_1_1.jpg",
"a_1": [2, "ざんねん！<ruby>正解<rt>せいかい</rt></ruby>は③<strong>「<ruby>大<rt>だい</rt>洗浄<rt>せんじょう</rt></ruby>」「<ruby>小<rt>しょう</rt>洗浄<rt>せんじょう</rt></ruby>」の<ruby>機能<rt>きのう</rt></ruby>を<ruby>使<rt>つか</rt></ruby>い<ruby>分<rt>わけ</rt></ruby>ける</strong>でした。トイレは<ruby>使<rt>つか</rt></ruby>うたびに<ruby>流<rt>なが</rt></ruby>しましょう。", 2,
"<ruby>水<rt>みず</rt></ruby>を<ruby>何度<rt>なんど</rt></ruby>かに１<ruby>回<rt>かい</rt></ruby>だけ<ruby>流<rt>なが</rt>す</ruby>"],
"a_2": [2, "ざんねん！<ruby>正解<rt>せいかい</rt></ruby>は③<strong>「<ruby>大<rt>だい</rt>洗浄<rt>せんじょう</rt></ruby>」「<ruby>小<rt>しょう</rt>洗浄<rt>せんじょう</rt></ruby>」の<ruby>機能<rt>きのう</rt></ruby>を<ruby>使<rt>つか</rt></ruby>い<ruby>分<rt>わけ</rt></ruby>ける</strong>でした。トイレは<ruby>使<rt>つか</rt></ruby>うたびに<ruby>流<rt>なが</rt></ruby>しましょう。", 2,
"トイレは<ruby>外出先<rt>がいしゅつさき</rt></ruby>や<ruby>学校<rt>がっこう</rt></ruby>などですませる"],
"a_3": [3, "<ruby>正解<rt>せいかい</rt></ruby>！<ruby>大<rt>だい</rt></ruby><ruby>洗浄<rt>せんじょう</rt></ruby>より<strong><ruby>小<rt>しょう</rt></ruby><ruby>洗浄<rt>せんじょう</rt></ruby>のほうが<br><ruby>流<rt>なが</rt></ruby>す<ruby>水量<rt>すいりょう</rt></ruby>は<ruby>節約<rt>せつやく</rt></ruby></strong>できます。", 2,
"トイレの「<ruby>大洗浄<rt>だいせんじょう</rt></ruby>」、「<ruby>小洗浄<rt>しょうせんじょう</rt></ruby>」の<ruby>機能<rt>きのう</rt></ruby>を使い分ける"],
"answer_text": "<ruby>大<rt>だい</rt></ruby>・<ruby>小<rt>しょう</rt></ruby>の<ruby>切り替え<rt>き　か　</rt></ruby>を<ruby>上手<rt>じょうず</rt></ruby>に<ruby>使<rt>つか</rt></ruby>って<ruby>節水<rt>せっすい</rt></ruby>しましょう。また、<ruby>節水<rt>せっすい</rt></ruby>するには、<ruby>最新<rt>さいしん</rt></ruby>の<ruby>節水<rt>せっすい</rt></ruby>トイレに<ruby>取<rt>と</rt></ruby>り<ruby>替<rt>か</rt></ruby>えるのもオススメです。",
"answer_fig": "r_1_1_1.jpg"
},
"comment_2_1": "------------------------------------------------------------------------ 中級：ID = 1 --------------------------------------------------------------------------",
"2_1_1": {
"qText": [3, "<ruby>家<rt>か</rt></ruby><ruby>庭内<rt>ていない</rt></ruby>で<ruby>一番<rt>いちばん</rt></ruby><ruby>水<rt>みず</rt></ruby>を<ruby>多<rt>おお</rt></ruby>く<ruby>使<rt>つか</rt></ruby>うのはどこでしょうか？"],
"answerID": "2",
"layoutType": "fig",
"a_1": [3, "ざんねん。<ruby>正解<rt>せいかい</rt></ruby>は②<strong>お<ruby>風呂<rt>ふろ</rt></ruby></strong>です。<strong>トイレは２<ruby>番目<rt>ばんめ</rt></ruby></strong>に<ruby>多<rt>おお</rt></ruby>く、<br>およそ21%を<ruby>占<rt>し</rt></ruby>めます。<small>（<ruby>平成<rt>へいせい</rt></ruby>27<ruby>年度<rt>ねんど</rt></ruby><ruby>東京都<rt>とうきょうと</rt></ruby><ruby>水道局<rt>すいどうきょく</rt></ruby><ruby>調<rt>しら</rt></ruby>べ）</small>", 2, "2_1_1_1.jpg"],
"a_2": [3, "<ruby>正解<rt>せいかい</rt></ruby>！<strong>お<ruby>風呂<rt>ふろ</rt></ruby>は１<ruby>番<rt>ばん</rt></ruby><ruby>多<rt>おお</rt></ruby>く、およそ40%を<ruby>占<rt>し</rt></ruby>めます。</strong><br><small>（<ruby>平成<rt>へいせい</rt></ruby>27<ruby>年度<rt>ねんど</rt></ruby><ruby>東京都<rt>とうきょうと</rt></ruby><ruby>水道局<rt>すいどうきょく</rt></ruby><ruby>調<rt>しら</rt></ruby>べ）</small>", 2, "2_1_1_2.jpg"],
"a_3": [3, "ざんねん。<ruby>正解<rt>せいかい</rt></ruby>は②<strong>お<ruby>風呂<rt>ふろ</rt></ruby></strong>です。<strong><ruby>炊事<rt>すいじ</rt></ruby>は３<ruby>番目<rt>ばんめ</rt></ruby></strong>に<ruby>多<rt>おお</rt></ruby>く、<br>およそ18%を<ruby>占<rt>し</rt></ruby>めます。<small>（<ruby>平成<rt>へいせい</rt></ruby>27<ruby>年度<rt>ねんど</rt></ruby><ruby>東京都<rt>とうきょうと</rt></ruby><ruby>水道局<rt>すいどうきょく</rt></ruby><ruby>調<rt>しら</rt></ruby>べ）</small>", 2, "2_1_1_3.jpg"],
"answer_text": "お<ruby>風呂<rt>ふろ</rt></ruby>に<ruby>入<rt>はい</rt></ruby>るときは、シャワーをこまめに<ruby>止<rt>と</rt></ruby>めたりして<ruby>無駄<rt>むだ</rt></ruby>な<ruby>水<rt>みず</rt></ruby>を<ruby>流<rt>なが</rt></ruby>さないように<ruby>注意<rt>ちゅうい</rt></ruby>しましょう。",
"answer_fig": "r_2_1_1.jpg"
},
"2_1_2": {
"qText": [3, "<ruby>水道<rt>すいどう</rt></ruby><ruby>料金<rt>りょうきん</rt></ruby>のしくみは<ruby>次<rt>つぎ</rt></ruby>のうちどれでしょうか?"],
"answerID": "3",
"layoutType": "line",
"fig": "2_1_2.jpg",
"a_1": [3, "ざんねん。<ruby>正解<rt>せいかい</rt></ruby>は③<strong><ruby>基本<rt>きほん</rt></ruby><ruby>料金<rt>りょうきん</rt></ruby>と<ruby>使<rt>つか</rt></ruby>った<ruby>水<rt>みず</rt></ruby>の<ruby>量<rt>りょう</rt></ruby>に<ruby>応<rt>おう</rt></ruby>じた<ruby>分<rt>ぶん</rt></ruby>をたした<ruby>料金<rt>りょうきん</rt></ruby></strong>でした。", 2,
"いくら<ruby>使<rt>つか</rt></ruby>っても<ruby>同<rt>おな</rt></ruby>じ<ruby>料金<rt>りょうきん</rt></ruby>。"],
"a_2": [3, "ざんねん。<ruby>正解<rt>せいかい</rt></ruby>は③<strong><ruby>基本<rt>きほん</rt></ruby><ruby>料金<rt>りょうきん</rt></ruby>と<ruby>使<rt>つか</rt></ruby>った<ruby>水<rt>みず</rt></ruby>の<ruby>量<rt>りょう</rt></ruby>に<ruby>応<rt>おう</rt></ruby>じた<ruby>分<rt>ぶん</rt></ruby>をたした<ruby>料金<rt>りょうきん</rt></ruby></strong>でした。", 2,
"<ruby>使<rt>つか</rt></ruby>った<ruby>水<rt>みず</rt></ruby>の<ruby>量<rt>りょう</rt></ruby>に<ruby>応<rt>おう</rt></ruby>じた<ruby>料金<rt>りょうきん</rt></ruby>で、<ruby>使<rt>つか</rt></ruby>わないと０<ruby>円<rt>えん</rt></ruby>。"],
"a_3": [3, "<ruby>正解<rt>せいかい</rt></ruby>。<strong><ruby>基本<rt>きほん</rt></ruby><ruby>料金<rt>りょうきん</rt></ruby>と<ruby>使<rt>つか</rt></ruby>った<ruby>水<rt>みず</rt></ruby>の<ruby>量<rt>りょう</rt></ruby>に<ruby>応<rt>おう</rt></ruby>じた<ruby>分<rt>ぶん</rt></ruby>をたした<ruby>料金<rt>りょうきん</rt></ruby></strong>になっているんだね。", 2,
"<ruby>基本<rt>きほん</rt></ruby><ruby>料金<rt>りょうきん</rt></ruby>と<ruby>使<rt>つか</rt></ruby>った<ruby>水<rt>みず</rt></ruby>の<ruby>量<rt>りょう</rt></ruby>に<ruby>応<rt>おう</rt></ruby>じた<ruby>分<rt>ぶん</rt></ruby>を<ruby>加<rt>くわ</rt></ruby>えた<ruby>料金<rt>りょうきん</rt></ruby>。"],
"answer_text": "<ruby>水道<rt>すいどう</rt></ruby><ruby>料金<rt>りょうきん</rt></ruby>＝<ruby>基本<rt>きほん</rt></ruby><ruby>料金<rt>りょうきん</rt></ruby>＋<ruby>使<rt>し</rt></ruby><ruby>用量<rt>ようりょう</rt></ruby>に<ruby>応<rt>おう</rt></ruby>じた<ruby>料金<rt>りょうきん</rt></ruby>の<ruby>合計<rt>ごうけい</rt></ruby>です。<br><ruby>水道<rt>すいどう</rt></ruby>の<ruby>使用分<rt>しようぶん</rt></ruby>に<ruby>応<rt>おう</rt></ruby>じて、<ruby>下水<rt>げすい</rt></ruby>の<ruby>費用<rt>ひよう</rt></ruby>も<ruby>同時<rt>どうじ</rt></ruby>に<ruby>請求<rt>せいきゅう</rt></ruby>されているのです。",
"answer_fig": "r_2_1_2.jpg"
},
"2_1_3": {
"qText": [2, "<ruby>東京<rt>とうきょう</rt></ruby>ドームのトイレを<ruby>流<rt>なが</rt></ruby>す<ruby>水<rt>みず</rt></ruby>は<ruby>水道<rt>すいどう</rt></ruby><ruby>水<rt>すい</rt></ruby><ruby>以外<rt>いがい</rt></ruby>のものが<ruby>使<rt>つか</rt></ruby>われています。さて、おもにどんな<ruby>水<rt>みず</rt></ruby>が<ruby>使<rt>つか</rt></ruby>われているでしょうか?"],
"answerID": "2",
"layoutType": "line",
"fig": "2_1_3.jpg",
"a_1": [3, "ざんねん。<ruby>正解<rt>せいかい</rt></ruby>は②<strong><ruby>雨<rt>あめ</rt></ruby>の<ruby>水<rt>みず</rt></ruby></strong>でした。", 2, "<ruby>海<rt>うみ</rt></ruby>の<ruby>水<rt>みず</rt></ruby>"],
"a_2": [3, "<ruby>正解<rt>せいかい</rt></ruby>！<strong><ruby>雨<rt>あめ</rt></ruby>の<ruby>水<rt>みず</rt></ruby>を<ruby>利用<rt>りよう</rt></ruby></strong>していて、<br><ruby>多<rt>おお</rt></ruby>くの<ruby>節水<rt>せっすい</rt></ruby>になっているそうです。", 2, "<ruby>雨<rt>あめ</rt></ruby>の<ruby>水<rt>みず</rt></ruby>"],
"a_3": [3, "ざんねん。 <ruby>正解<rt>せいかい</rt></ruby>は②<strong><ruby>雨<rt>あめ</rt></ruby>の<ruby>水<rt>みず</rt></ruby></strong>でした。", 2, "<ruby>地下水<rt>ちかすい</rt></ruby>"],
"answer_text": "<ruby>東京<rt>とうきょう</rt></ruby>ドームでは<ruby>屋根<rt>やね</rt></ruby>に<ruby>降<rt>ふ</rt></ruby>った<ruby>雨<rt>あめ</rt></ruby>を、<ruby>地下<rt>ちか</rt></ruby>に<ruby>貯<rt>た</rt></ruby>めているそうです。<ruby>貯<rt>た</rt></ruby>めた<ruby>水<rt>みず</rt></ruby>はトイレを<ruby>流<rt>なが</rt></ruby>す<ruby>水<rt>みず</rt></ruby>として、また<ruby>消防用<rt>しょうぼうよう</rt></ruby>の<ruby>水<rt>みず</rt></ruby>としても<ruby>利用<rt>りよう</rt></ruby>されているそうです。",
"answer_fig": "r_2_1_3.jpg"
},
"comment_2_2": "------------------------------------------------------------------------ 中級：ID = 2 --------------------------------------------------------------------------",
"2_2_1": {
"qText": [3, "おうちの<ruby>水道<rt>すいどう</rt></ruby><ruby>料金<rt>りょうきん</rt></ruby>はたくさん<ruby>使<rt>つか</rt></ruby>うと、<br>１リットルあたりの<ruby>料金<rt>りょうきん</rt></ruby>はどうなるでしょうか?"],
"answerID": "2",
"layoutType": "line",
"fig": "2_1_2.jpg",
"a_1": [2, "ざんねん。<ruby>正解<rt>せいかい</rt></ruby>は②<strong>たくさん<ruby>使<rt>つか</rt></ruby>えば<ruby>使<rt>つか</rt></ruby>うほど<ruby>高<rt>たか</rt></ruby>くなる</strong>でした。", 2,
"<ruby>使<rt>つか</rt></ruby>えば、<ruby>使<rt>つか</rt></ruby>うほど<ruby>安<rt>やす</rt></ruby>くなる。"],
"a_2": [3, "<ruby>正解<rt>せいかい</rt></ruby>。<strong>たくさん<ruby>使<rt>つか</rt></ruby>えば、<ruby>水道<rt>すいどう</rt></ruby><ruby>料金<rt>りょうきん</rt></ruby>も<ruby>高<rt>たか</rt></ruby>くなります</strong>から<br><ruby>節約<rt>せつやく</rt></ruby>しましょう。", 2,
"<ruby>使<rt>つか</rt></ruby>えば、<ruby>使<rt>つか</rt></ruby>うほど<ruby>高<rt>たか</rt></ruby>くなる。"],
"a_3": [2, "ざんねん。<ruby>正解<rt>せいかい</rt></ruby>は②<strong>たくさん<ruby>使<rt>つか</rt></ruby>えば<ruby>使<rt>つか</rt></ruby>うほど<ruby>高<rt>たか</rt></ruby>くなる</strong>でした。", 2,
"どれだけ<ruby>使<rt>つか</rt></ruby>っても<ruby>同<rt>おな</rt></ruby>じ<ruby>料金<rt>りょうきん</rt></ruby>"],
"answer_text": "<ruby>水道<rt>すいどう</rt></ruby>には<ruby>基本使<rt>きほんし</rt></ruby><ruby>用量<rt>ようりょう</rt></ruby>というものがあります。これを<ruby>超<rt>こ</rt></ruby>えると、<ruby>使<rt>つか</rt></ruby>えば<ruby>使<rt>つか</rt></ruby>うほど１リットルあたりの<ruby>料金<rt>りょうきん</rt></ruby>が<ruby>高<rt>たか</rt></ruby>くなるようになっています。",
"answer_fig": "r_2_1_2.jpg"
},
"2_2_2": {
"qText": [3, "<ruby>家<rt>か</rt></ruby><ruby>庭内<rt>ていない</rt></ruby>で<ruby>一番<rt>いちばん</rt></ruby><ruby>水<rt>みず</rt></ruby>を<ruby>多<rt>おお</rt></ruby>く<ruby>使<rt>つか</rt></ruby>うのはどこでしょうか？"],
"answerID": "2",
"layoutType": "fig",
"a_1": [3, "ざんねん。<ruby>正解<rt>せいかい</rt></ruby>は②<strong>お<ruby>風呂<rt>ふろ</rt></ruby></strong>です。<strong>トイレは２<ruby>番目<rt>ばんめ</rt></ruby></strong>に<ruby>多<rt>おお</rt></ruby>く、<br>およそ21%を<ruby>占<rt>し</rt></ruby>めます。<small>（<ruby>平成<rt>へいせい</rt></ruby>27<ruby>年度<rt>ねんど</rt></ruby><ruby>東京都<rt>とうきょうと</rt></ruby><ruby>水道局<rt>すいどうきょく</rt></ruby><ruby>調<rt>しら</rt></ruby>べ）</small>", 2, "2_1_1_1.jpg"],
"a_2": [3, "<ruby>正解<rt>せいかい</rt></ruby>！<strong>お<ruby>風呂<rt>ふろ</rt></ruby>は１<ruby>番<rt>ばん</rt></ruby><ruby>多<rt>おお</rt></ruby>く、およそ40%を<ruby>占<rt>し</rt></ruby>めます。</strong><br><small>（<ruby>平成<rt>へいせい</rt></ruby>27<ruby>年度<rt>ねんど</rt></ruby><ruby>東京都<rt>とうきょうと</rt></ruby><ruby>水道局<rt>すいどうきょく</rt></ruby><ruby>調<rt>しら</rt></ruby>べ）</small>", 2, "2_1_1_2.jpg"],
"a_3": [3, "ざんねん。<ruby>正解<rt>せいかい</rt></ruby>は②<strong>お<ruby>風呂<rt>ふろ</rt></ruby></strong>です。<strong><ruby>炊事<rt>すいじ</rt></ruby>は３<ruby>番目<rt>ばんめ</rt></ruby></strong>に<ruby>多<rt>おお</rt></ruby>く、<br>およそ18%を<ruby>占<rt>し</rt></ruby>めます。<small>（<ruby>平成<rt>へいせい</rt></ruby>27<ruby>年度<rt>ねんど</rt></ruby><ruby>東京都<rt>とうきょうと</rt></ruby><ruby>水道局<rt>すいどうきょく</rt></ruby><ruby>調<rt>しら</rt></ruby>べ）</small>", 2, "2_1_1_3.jpg"],
"answer_text": "お<ruby>風呂<rt>ふろ</rt></ruby>に<ruby>入<rt>はい</rt></ruby>るときは、シャワーをこまめに<ruby>止<rt>と</rt></ruby>めたりして<ruby>無駄<rt>むだ</rt></ruby>な<ruby>水<rt>みず</rt></ruby>を<ruby>流<rt>なが</rt></ruby>さないように<ruby>注意<rt>ちゅうい</rt></ruby>しましょう。",
"answer_fig": "r_2_1_1.jpg"
},
"2_2_3": {
"qText": [3, "おとなの<ruby>体重<rt>たいじゅう</rt></ruby>に<ruby>占<rt>し</rt></ruby>める<ruby>水<rt>みず</rt></ruby>の<ruby>割合<rt>わりあい</rt></ruby>はどれくらいでしょうか?"],
"answerID": "3",
"layoutType": "line",
"fig": "2_2_3.jpg",
"a_1": [3, "ざんねん。<ruby>正解<rt>せいかい</rt></ruby>は③<strong><ruby>約<rt>やく</rt></ruby>60%</strong>です。", 2, "<ruby>約<rt>やく</rt></ruby>30%"],
"a_2": [3, "ざんねん。<ruby>正解<rt>せいかい</rt></ruby>は③<strong><ruby>約<rt>やく</rt></ruby>60%</strong>です。", 2, "<ruby>約<rt>やく</rt></ruby>50%"],
"a_3": [3, "<ruby>正解<rt>せいかい</rt></ruby>。<strong><ruby>体<rt>からだ</rt></ruby>の<ruby>約<rt>やく</rt></ruby>60%は<ruby>水分<rt>すいぶん</rt></ruby></strong>なのですね。", 2, "<ruby>約<rt>やく</rt></ruby>60%"],
"answer_text": "<ruby>人間<rt>にんげん</rt></ruby>が<ruby>生<rt>い</rt></ruby>きていくうえで<ruby>水<rt>みず</rt></ruby>は<ruby>欠<rt>か</rt></ruby>かせません。<ruby>限<rt>かぎ</rt></ruby>られた<ruby>水<rt>みず</rt></ruby>を<ruby>大切<rt>たいせつ</rt></ruby>にしましょう。",
"answer_fig": "r_2_2_3.jpg"
},
"comment_2_3": "------------------------------------------------------------------------ 中級：ID = 3 --------------------------------------------------------------------------",
"2_3_1": {
"qText": [3, "おうちの<ruby>下水<rt>げすい</rt></ruby><ruby>道<rt>どう</rt></ruby><ruby>料金<rt>りょうきん</rt></ruby>はどうやって<br><ruby>計算<rt>けいさん</rt></ruby>しているでしょうか?"],
"answerID": "1",
"layoutType": "line",
"fig": "2_3_1.jpg",
"a_1": [3, "<ruby>正解<rt>せいかい</rt></ruby>。<strong><ruby>上水道<rt>じょうすいどう</rt></ruby>を<ruby>使<rt>つか</rt></ruby>った<ruby>量<rt>りょう</rt></ruby>で<ruby>下水道<rt>げすいどう</rt></ruby>の<ruby>料金<rt>りょうきん</rt></ruby>が<ruby>決<rt>き</rt></ruby>まります。</strong>", 2,
"<ruby>上水道<rt>じょうすいどう</rt></ruby>のメーターを<ruby>見<rt>み</rt></ruby>て<ruby>計算<rt>けいさん</rt></ruby>する"],
"a_2": [3, "ざんねん。　<ruby>正解<rt>せいかい</rt></ruby>は①<strong><ruby>上水道<rt>じょうすいどう</rt></ruby>のメーターを<ruby>見<rt>み</rt></ruby>て<ruby>計算<rt>けいさん</rt></ruby>する</strong>でした。<ruby>下水<rt>げすい</rt></ruby><ruby>道<rt>どう</rt></ruby>にメーターは<ruby>付<rt>つ</rt></ruby>いていないのです。", 2,
"<ruby>下水<rt>げすい</rt></ruby><ruby>道<rt>どう</rt></ruby>に<ruby>付<rt>つ</rt></ruby>いたメーターを<ruby>見<rt>み</rt></ruby>て<ruby>計算<rt>けいさん</rt></ruby>する"],
"a_3": [3, "ざんねん。　<ruby>正解<rt>せいかい</rt></ruby>は①<strong><ruby>上水道<rt>じょうすいどう</rt></ruby>のメーターを<ruby>見<rt>み</rt></ruby>て<ruby>計算<rt>けいさん</rt></ruby>する</strong>でした。<ruby>使<rt>つか</rt></ruby>う<ruby>水<rt>みず</rt></ruby>の<ruby>量<rt>りょう</rt></ruby>によって<ruby>料金<rt>りょうきん</rt></ruby>も<ruby>変<rt>か</rt></ruby>わります。", 2,
"いつも<ruby>同<rt>おな</rt></ruby>じ<ruby>料金<rt>りょうきん</rt></ruby>"],
"answer_text": "<ruby>上水道<rt>じょうすいどう</rt></ruby>から<ruby>出<rt>で</rt></ruby>た<ruby>水<rt>みず</rt></ruby>のほとんどが<ruby>公共下<rt>こうきょうげ</rt></ruby><ruby>水道<rt>すいどう</rt></ruby>に<ruby>排出<rt>はいしゅつ</rt></ruby>されているので、<ruby>下水道<rt>げすいどう</rt></ruby>の<ruby>費用<rt>ひよう</rt></ruby>は<ruby>上水道<rt>じょうすいどう</rt></ruby>で<ruby>使<rt>つか</rt></ruby>った<ruby>水量<rt>すいりょう</rt></ruby>をもとに<ruby>計算<rt>けいさん</rt></ruby>しています。",
"answer_fig": "r_2_3_1.jpg"
},
"2_3_2": {
"qText": [3, "<ruby>日本<rt>にほん</rt></ruby>で<ruby>一番<rt>いちばん</rt></ruby><ruby>長<rt>なが</rt></ruby>い<ruby>川<rt>かわ</rt></ruby>は<ruby>次<rt>つぎ</rt></ruby>のうちどれでしょうか？"],
"answerID": "3",
"layoutType": "line",
"fig": "2_3_2.jpg",
"a_1": [3, "ざんねん。　<ruby>正解<rt>せいかい</rt></ruby>は③<strong><ruby>信濃<rt>しなの</rt></ruby><ruby>川<rt>がわ</rt></ruby></strong>でした。<br><ruby>利根川<rt>とねがわ</rt></ruby>は<ruby>第<rt>だい</rt></ruby>２<ruby>位<rt>い</rt></ruby>で、<ruby>約<rt>やく</rt></ruby>322kmです。", 2,
"<ruby>利根川<rt>とねがわ</rt></ruby>"],
"a_2": [3, "ざんねん。　<ruby>正解<rt>せいかい</rt></ruby>は③<strong><ruby>信濃<rt>しなの</rt></ruby><ruby>川<rt>がわ</rt></ruby></strong>でした。<br><ruby>石狩<rt>いしかり</rt></ruby><ruby>川<rt>がわ</rt></ruby>は<ruby>第<rt>だい</rt></ruby>３<ruby>位<rt>い</rt></ruby>で、<ruby>約<rt>やく</rt></ruby>268kmです。 ", 2,
"<ruby>石狩<rt>いしかり</rt></ruby><ruby>川<rt>がわ</rt></ruby>"],
"a_3": [3, "<ruby>正解<rt>せいかい</rt></ruby>！　<strong><ruby>信濃<rt>しなの</rt></ruby><ruby>川<rt>がわ</rt></ruby>が<ruby>第<rt>だい</rt></ruby>１<ruby>位<rt>い</rt></ruby>で、<ruby>約<rt>やく</rt></ruby>367kmあります。</strong>", 2,
"<ruby>信濃<rt>しなの</rt></ruby><ruby>川<rt>がわ</rt></ruby>"],
"answer_text": "<ruby>日本<rt>にほん</rt></ruby>で<ruby>一番<rt>いちばん</rt></ruby><ruby>長<rt>なが</rt></ruby>い<ruby>川<rt>かわ</rt></ruby>は、<ruby>信濃<rt>しなの</rt></ruby><ruby>川<rt>がわ</rt></ruby>です。<ruby>長<rt>なが</rt>さ</ruby>が367kmあり、<ruby>長野県<rt>ながのけん</rt></ruby>から<ruby>新潟県<rt>にいがたけん</rt></ruby>を<ruby>通<rt>とお</rt></ruby>って<ruby>日本海<rt>にほんかい</rt></ruby>に<ruby>流<rt>なが</rt></ruby>れています。<br>ちなみに<ruby>世界一<rt>せかいいち</rt></ruby><ruby>長<rt>なが</rt></ruby>い<ruby>川<rt>かわ</rt></ruby>はナイル<ruby>川<rt>がわ</rt></ruby>で6,650kmもあります。",
"answer_fig": "r_2_3_2.jpg"
},
"2_3_3": {
"qText": [3, "<ruby>家<rt>か</rt></ruby><ruby>庭内<rt>ていない</rt></ruby>で<ruby>一番<rt>いちばん</rt></ruby><ruby>水<rt>みず</rt></ruby>を<ruby>多<rt>おお</rt></ruby>く<ruby>使<rt>つか</rt></ruby>うのはどこでしょうか？"],
"answerID": "2",
"layoutType": "fig",
"a_1": [3, "ざんねん。<ruby>正解<rt>せいかい</rt></ruby>は②<strong>お<ruby>風呂<rt>ふろ</rt></ruby></strong>です。<strong>トイレは２<ruby>番目<rt>ばんめ</rt></ruby></strong>に<ruby>多<rt>おお</rt></ruby>く、<br>およそ21%を<ruby>占<rt>し</rt></ruby>めます。<small>（<ruby>平成<rt>へいせい</rt></ruby>27<ruby>年度<rt>ねんど</rt></ruby><ruby>東京都<rt>とうきょうと</rt></ruby><ruby>水道局<rt>すいどうきょく</rt></ruby><ruby>調<rt>しら</rt></ruby>べ）</small>", 2, "2_1_1_1.jpg"],
"a_2": [3, "<ruby>正解<rt>せいかい</rt></ruby>！<strong>お<ruby>風呂<rt>ふろ</rt></ruby>は１<ruby>番<rt>ばん</rt></ruby><ruby>多<rt>おお</rt></ruby>く、およそ40%を<ruby>占<rt>し</rt></ruby>めます。</strong><br><small>（<ruby>平成<rt>へいせい</rt></ruby>27<ruby>年度<rt>ねんど</rt></ruby><ruby>東京都<rt>とうきょうと</rt></ruby><ruby>水道局<rt>すいどうきょく</rt></ruby><ruby>調<rt>しら</rt></ruby>べ）</small>", 2, "2_1_1_2.jpg"],
"a_3": [3, "ざんねん。<ruby>正解<rt>せいかい</rt></ruby>は②<strong>お<ruby>風呂<rt>ふろ</rt></ruby></strong>です。<strong><ruby>炊事<rt>すいじ</rt></ruby>は３<ruby>番目<rt>ばんめ</rt></ruby></strong>に<ruby>多<rt>おお</rt></ruby>く、<br>およそ18%を<ruby>占<rt>し</rt></ruby>めます。<small>（<ruby>平成<rt>へいせい</rt></ruby>27<ruby>年度<rt>ねんど</rt></ruby><ruby>東京都<rt>とうきょうと</rt></ruby><ruby>水道局<rt>すいどうきょく</rt></ruby><ruby>調<rt>しら</rt></ruby>べ）</small>", 2, "2_1_1_3.jpg"],
"answer_text": "お<ruby>風呂<rt>ふろ</rt></ruby>に<ruby>入<rt>はい</rt></ruby>るときは、シャワーをこまめに<ruby>止<rt>と</rt></ruby>めたりして<ruby>無駄<rt>むだ</rt></ruby>な<ruby>水<rt>みず</rt></ruby>を<ruby>流<rt>なが</rt></ruby>さないように<ruby>注意<rt>ちゅうい</rt></ruby>しましょう。",
"answer_fig": "r_2_1_1.jpg"
},
"comment_3_1": "------------------------------------------------------------------------ 上級：ID = 1 --------------------------------------------------------------------------",
"3_1_1": {
"qText": [3, "現在、販売されている主な節水大便器の１回に流す水量はどれくらいでしょうか？"],
"answerID": "3",
"layoutType": "line",
"fig": "3_1_1.jpg",
"a_1": [3, "残念。正解は③<strong>6リットル以下</strong>でした。1995～2000年ごろに、10リットルのものが多く販売されていました。", 3, "10リットル"],
"a_2": [3, "残念。正解は③<strong>6リットル以下</strong>でした。2000～2006年ごろに、8リットルのものが多く販売されていました。", 3, "8リットル"],
"a_3": [2, "正解！<strong>2006年以降、6リットル以下のものが多く販売</strong>されています。最近では、5リットル以下、4リットル以下などのものも販売されています。", 3, "6リットル以下"],
"answer_text": "お家のトイレは節水タイプになっていますか？最新の節水トイレに取り替えると、大幅な節水になります。",
"answer_fig": "r_3_1_1.jpg"
},
"3_1_2": {
"qText": [3, "歯磨きで口をすすぐとき、30秒間水を流したままにしたとすると使用する水量はどれくらいになるでしょうか？"],
"answerID": "2",
"layoutType": "line",
"fig": "3_1_2.jpg",
"a_1": [2, "残念。正解は②<strong>およそ6リットル</strong>でした。コップを使うと0.5リットルくらいで済み、水を流したままにくらべて10分の1以下に節水できます。<small>（パナソニックHPより）</small>", 3, "およそ12リットル"],
"a_2": [3, "正解！流しながら口をすすいだ場合、このくらいの水量になります。<strong>コップに溜めて使うと、これの10分の1以下</strong>にできます。<small>（パナソニックHPより）</small>", 3, "およそ6リットル"],
"a_3": [2, "残念。正解は②<strong>およそ6リットル</strong>でした。コップを使うと0.5リットルくらいで済み、水を流したままにくらべて10分の1以下に節水できます。<small>（パナソニックHPより）</small>", 3, "およそ0.5リットル"],
"answer_text": "コップでの歯磨きをすれば、１か月にひとりあたりで節約できる水の量は、およそ500リットル分にもなります。",
"answer_fig": "r_3_1_2.jpg"
},
"3_1_3": {
"qText": [3, "日本で川に流れる水の量が、最も少なくなる時期は次のうちいつ頃でしょうか?"],
"answerID": "3",
"layoutType": "line",
"fig": "3_1_3.jpg",
"a_1": [3, "残念。正解は③<strong>8月の真夏時期</strong>でした。<br><small>（国土交通省HPより）</small>", 2, "4月～5月頃の雪解け時期"],
"a_2": [3, "残念。正解は③<strong>8月の真夏時期</strong>でした。<br><small>（国土交通省HPより）</small>", 2, "9月～10月頃の台風時期"],
"a_3": [3, "正解！やはり<strong>暑い夏は川の水も少なくなります</strong>ね。<br><small>（国土交通省HPより）</small>", 2, "8月の真夏時期"],
"answer_text": "真夏は雨も少なく、川の水は最も少なくなります。冬も雪などで山に残ってしまうため、川には流れ込みにくくなります。１年を通して節水を心がけたいですね。",
"answer_fig": "r_3_1_3.jpg"
},
"comment_3_2": "------------------------------------------------------------------------ 上級：ID = 2 --------------------------------------------------------------------------",
"3_2_1": {
"qText": [3, "バーチャルウォーターとはどういう意味でしょうか？"],
"answerID": "3",
"layoutType": "line",
"fig": "1_2_3.jpg",
"a_1": [3, "残念。正解は③<strong>食料を生産するときに必要な水の量を計算したもの</strong>でした。", 2, "水泳のゲームを体験すること"],
"a_2": [3, "残念。正解は③<strong>食料を生産するときに必要な水の量を計算したもの</strong>でした。", 2, "洪水を防ぐ活動のこと"],
"a_3": [3, "正解！バーチャルウォーターとは、<strong>食料を生産するときに必要な水の量を計算したもの</strong>なのですね。", 2, "食料を生産するときに必要な水の量を計算したもの"],
"answer_text": "日本が海外から輸入する食料は、それを生産するために大量の水が使われています。その水をバーチャルウォーターと呼んでいます。",
"answer_fig": "r_3_2_1.jpg"
},
"3_2_2": {
"qText": [3, "現在、販売されている主な節水大便器の１回に流す水量はどれくらいでしょうか？"],
"answerID": "3",
"layoutType": "line",
"fig": "3_1_1.jpg",
"a_1": [3, "残念。正解は③<strong>6リットル以下</strong>でした。1995～2000年ごろに、10リットルのものが多く販売されていました。", 3, "10リットル"],
"a_2": [3, "残念。正解は③<strong>6リットル以下</strong>でした。2000～2006年ごろに、8リットルのものが多く販売されていました。", 3, "8リットル"],
"a_3": [2, "正解！<strong>2006年以降、6リットル以下のものが多く販売</strong>されています。最近では、5リットル以下、4リットル以下などのものも販売されています。", 3, "6リットル以下"],
"answer_text": "お家のトイレは節水タイプになっていますか？最新の節水トイレに取り替えると、大幅な節水になります。",
"answer_fig": "r_3_1_1.jpg"
},
"3_2_3": {
"qText": [3, "貯水容量が日本一のダムの名前は何でしょうか？"],
"answerID": "3",
"layoutType": "line",
"fig": "r_1_1_3.jpg",
"a_1": [3, "残念。　正解は③<strong>徳山ダム</strong>でした。", 3, "黒部ダム"],
"a_2": [3, "残念。　正解は③<strong>徳山ダム</strong>でした。", 3, "奥只見ダム"],
"a_3": [3, "正解！ <strong>総貯水総量日本一は徳山ダム</strong>（岐阜県）ですね。", 3, "徳山ダム"],
"answer_text": "岐阜県にある徳山ダムは日本一の総貯水量（6億6,000万m<sup>3</sup>）を誇る雄大なダムです。ダムの高さは161メートルもあります。",
"answer_fig": "r_3_2_3.jpg"
},
"comment_3_3": "------------------------------------------------------------------------ 上級：ID = 3 --------------------------------------------------------------------------",
"3_3_1": {
"qText": [2, "最近の大便器では、「大洗浄」「小洗浄」を自動で判定して節水しているものがあります。さて、何を基準にその判別をしているでしょうか？"],
"answerID": "3",
"layoutType": "line",
"fig": "3_3_1.jpg",
"a_1": [3, "残念。　正解は③<strong>トイレに座っている時間</strong>でした。", 2, "うんちか、おしっこかの違い"],
"a_2": [3, "残念。　正解は③<strong>トイレに座っている時間</strong>でした。", 2, "トイレのにおい"],
"a_3": [3, "正解！<strong>座っている時間</strong>で判別して流しています。", 2, "トイレに座っている時間"],
"answer_text": "トイレが自動で最適な水量を判断して流すしくみになっています。トイレも進んでいますね。",
"answer_fig": "r_3_3_1.jpg"
},
"3_3_2": {
"qText": [3, "朝晩２回、３人家族が全員流しっぱなしで歯磨きすると、１ヶ月でどれくらいの水を使うでしょうか?"],
"answerID": "3",
"layoutType": "line",
"fig": "3_3_2.jpg",
"a_1": [3, "残念。正解は③<strong>約1,000リットル</strong>にもなります。<br><small>（パナソニックHPより）<small>", 3, "約200リットル<br><small>（おふろ約1杯分）</small>"],
"a_2": [3, "残念。正解は③<strong>約1,000リットル</strong>にもなります。<br><small>（パナソニックHPより）<small>", 3, "約500リットル<br><small>（おふろ約2.5杯分）</small>"],
"a_3": [3, "正解。<strong>１ヵ月で約1,000リットル</strong>にもなるんですね。<br><small>（パナソニックHPより）<small>", 3, "約1,000リットル<br><small>（おふろ約5杯分）</small>"],
"answer_text": "３人家族が朝晩30秒間づつ水道を流しながら歯磨き・うがいをすると、１ヶ月でおふろ５杯分くらい（約1,000リットル）の水を使います。コップにためて歯磨きすると1/10程度で済みます。",
"answer_fig": "r_3_3_2.jpg"
},
"3_3_3": {
"qText": [3, "現在、販売されている主な節水大便器の１回に流す水量はどれくらいでしょうか？"],
"answerID": "3",
"layoutType": "line",
"fig": "3_1_1.jpg",
"a_1": [3, "残念。正解は③<strong>6リットル以下</strong>でした。1995～2000年ごろに、10リットルのものが多く販売されていました。", 3, "10リットル"],
"a_2": [3, "残念。正解は③<strong>6リットル以下</strong>でした。2000～2006年ごろに、8リットルのものが多く販売されていました。", 3, "8リットル"],
"a_3": [2, "正解！<strong>2006年以降、6リットル以下のものが多く販売</strong>されています。最近では、5リットル以下、4リットル以下などのものも販売されています。", 3, "6リットル以下"],
"answer_text": "お家のトイレは節水タイプになっていますか？最新の節水トイレに取り替えると、大幅な節水になります。",
"answer_fig": "r_3_1_1.jpg"
},
"comment_3_4": "------------------------------------------------------------------------ 上級：ID = 4 --------------------------------------------------------------------------",
"3_4_1": {
"qText": [3, "日本では、水の日が制定されていますが、<br>それはいつでしょうか？"],
"answerID": "2",
"layoutType": "line",
"fig": "3_4_1.jpg",
"a_1": [3, "残念。<strong>４月１日はエイプリルフール</strong>ですね。<br>正解は②<strong>８月１日</strong>でした。", 3, "４月１日"],
"a_2": [3, "正解！ <strong>８月１日が水の日</strong>です。", 3, "８月１日"],
"a_3": [3, "残念。<strong>９月１日は防災の日</strong>ですね。<br>正解は②<strong>８月１日</strong>でした。", 3, "９月１日"],
"answer_text": "水の重要性について国民の関心を高め、理解を深めるため、毎年８月１日を<strong>水の日</strong>としています。また、この日を初日とする１週間が<strong>水の週間</strong>とされています。",
"answer_fig": "r_3_4_1.jpg"
},
"3_4_2": {
"qText": [3, "家庭から出る排水のうち、もっとも水を汚す原因になっているものはどこからの排水でしょうか?"],
"answerID": "3",
"layoutType": "line",
"fig": "3_4_2.jpg",
"a_1": [3, "残念。正解は③<strong>台所からの排水</strong>でした。<br><small>（環境省「生活排水読本」より）</small>", 3, "トイレからの排水"],
"a_2": [3, "残念。正解は③<strong>台所からの排水</strong>でした。<br><small>（環境省「生活排水読本」より）</small>", 3, "風呂・洗濯からの排水"],
"a_3": [2, "正解。<strong>台所からの排水が水質汚濁原因の１番</strong>とされています。<br><small>（環境省「生活排水読本」より）</small>", 3, "台所からの排水"],
"answer_text": "台所から食べ残しや飲み残し、残った油等をできるだけ流さないように心掛けましょう。",
"answer_fig": "r_3_4_2.jpg"
},
"3_4_3": {
"qText": [3, "シャワーを３分間出したままにすると、どれくらいの水を使うでしょうか?"],
"answerID": "3",
"layoutType": "line",
"fig": "3_4_3.jpg",
"a_1": [3, "残念。正解は③<strong>約30リットル</strong>も流れます。<br><small>（TOTO「お客様向け環境コミュニケーションサイト」より）</small>", 3, "約10リットル<br><small>（大きなバケツに1杯くらい）</small>"],
"a_2": [3, "残念。正解は③<strong>約30リットル</strong>も流れます。<br><small>（TOTO「お客様向け環境コミュニケーションサイト」より）</small>", 3, "約20リットル<br><small>（大きなバケツに2杯くらい）</small>"],
"a_3": [3, "正解。<strong>約30リットルも流れる</strong>んですね。<br><small>（TOTO「お客様向け環境コミュニケーションサイト」より）</small>", 3, "約30リットル<br><small>（大きなバケツに3杯くらい）</small>"],
"answer_text": "最新の節水シャワーに取り換えると２/３くらいまで節水できます。こまめにシャワーを止めたり、節水シャワーに交換するなどして、節水を心掛けましょう。",
"answer_fig": "r_3_4_3.jpg"
},
"comment_4_1": "------------------------------------------------------------------------博士級：ID = 1 --------------------------------------------------------------------------",
"4_1_1": {
"qText": [3, "１人が１日で生活に使用する水の量は、<br>およそどれくらいでしょうか？"],
"answerID": "2",
"layoutType": "line",
"fig": "4_1_1.jpg",
"a_1": [3, "残念。正解は②<strong>約300リットル</strong>くらいといわれています。<br><small>（国土交通省 平成28年度版 日本の水資源の現況より）</small>", 3, "約30リットル<br><small>（大きめのバケツ 約3杯分）</small>"],
"a_2": [3, "正解！<strong>ひとりあたり１日で約300リットル</strong>を使うといわれています。<small>（国土交通省 平成28年度版 日本の水資源の現況より）</small>", 3, "約300リットル<br><small>（おふろ 約1.5杯分）</small>"],
"a_3": [3, "残念。正解は②<strong>約300リットル</strong>くらいといわれています。<br><small>（国土交通省 平成28年度版 日本の水資源の現況より）</small>", 3, "約1,000リットル<br><small>（ドラム缶 約5本分）</small>"],
"answer_text": "飲む水の量はほんの僅かですが、生活する上では多くの水を使っているのですね。ひとりひとりが節水を心がけましょう。",
"answer_fig": "r_4_1_1.jpg"
},
"4_1_2": {
"qText": [3, "キッチンや洗面所で節水に役立つ水栓（蛇口）は<br>どれでしょうか？"],
"answerID": "3",
"layoutType": "line",
"fig": "4_1_2.jpg",
"a_1": [2, "残念。ハンドルを回してお湯と水の量を調整している間にむだ水を流してしまいます。<br>正解は③<strong>シングルレバー式水栓</strong>でした。", 2, "お湯と水が別のハンドルになっている２ハンドル式の水栓"],
"a_2": [2, "残念。お湯と水が混合できず、適切な温度で使用するのが難しく余計な水を使用してしまいます。<br>正解は③<strong>シングルレバー式水栓</strong>でした。", 2, "お湯と水を別々にした水栓"],
"a_3": [2, "正解！<strong>水を出したり止めたりがレバーでワンタッチ</strong>ででき、温度調整も容易なので、<strong>節水</strong>につながります。", 2, "シングルレバー式の水栓"],
"answer_text": "シングルレバー式の水栓は、節水だけでなく、適温にしやすく使いやすい水栓です。",
"answer_fig": "r_4_1_2.jpg"
},
"4_1_3": {
"qText": [2, "輸入食材を生産するために必要な水をバーチャルウォーターといいますが、次のものを生産するためにどれくらいの水が必要でしょうか？　 ◆お米1升（10合　約1.5kg）"],
"answerID": "2",
"layoutType": "line",
"fig": "4_1_3.jpg",
"a_1": [3, "残念。正解は②<strong>約5,500リットルの水</strong>でした。<br><small>（環境省「仮想水計算機」より算出）</small>", 3, "約550リットルの水"],
"a_2": [3, "正解！お米１升には、<strong>およそ5,500リットルもの<br>水</strong>が必要なのです。<small>（環境省「仮想水計算機」より算出）</small>", 3, "約5,500リットルの水"],
"a_3": [3, "残念。正解は②<strong>約5,500リットルの水</strong>でした。<br><small>（環境省「仮想水計算機」より算出）</small>", 3, "約55,500リットルの水"],
"answer_text": "外国から輸入する食料を生産するためには大量の水が消費されています。食料を輸入するということは、その外国の水を消費しているのと同じことなのです。",
"answer_fig": "r_4_1_3.jpg"
},
"comment_4_2": "------------------------------------------------------------------------博士級：ID = 2 --------------------------------------------------------------------------",
"4_2_1": {
"qText": [1, "１回あたり6リットル以下で流す節水トイレが販売されていますが、日本中に設置されているトイレのうち、この節水トイレの占める割合はどのくらいになっているでしょうか？<small>（日本レストルーム工業会推計）</small>"],
"answerID": "2",
"layoutType": "line",
"fig": "4_2_1.jpg",
"a_1": [3, "残念。正解は②<strong>約44%</strong>でした。<br><small>（2016年度 日本レストルーム工業会推計）</small>", 3, "約22%"],
"a_2": [3, "正解！まだ<strong>全体の約44%程度しか</strong>設置されていません。<br><small>（2016年度 日本レストルーム工業会推計）</small>", 3, "約44%"],
"a_3": [3, "残念。正解は②<strong>約44%</strong>でした。まだまだ少ないですね。<br><small>（2016年度 日本レストルーム工業会推計）</small>", 3, "約66%"],
"answer_text": "まだまだ多くの水量を流している便器があります。大切な水を節約するためにも、こうした節水トイレがもっと増えるといいですね。",
"answer_fig": "r_4_2_1.jpg"
},
"4_2_2": {
"qText": [3, "地球上にある水で人間が利用できる<br>水の量はどの程度でしょうか？"],
"answerID": "3",
"layoutType": "line",
"fig": "1_2_3.jpg",
"a_1": [3, "残念。正解は③<strong>およそ0.01%</strong>でした。<br><small>（TOTO「お客様向け環境コミュニケーションサイト」より）</small>", 3, "およそ10%"],
"a_2": [3, "残念。正解は③<strong>およそ0.01%</strong>でした。<br><small>（TOTO「お客様向け環境コミュニケーションサイト」より）</small>", 3, "およそ1%"],
"a_3": [3, "正解！ <strong>0.01%しか利用できない</strong>んですね。<br><small>（TOTO「お客様向け環境コミュニケーションサイト」より）</small>", 3, "およそ0.01%"],
"answer_text": "地球上に存在する水の量は、およそ14億km<sup>3</sup> と言われていますが、およそ97.5%は海水で、淡水はわずか2.5%です。<br>この淡水のほとんどは南極や北極の氷で、私たちが利用できる河川や湖沼などの水はわずか0.01%にすぎません。",
"answer_fig": "r_4_2_2.jpg"
},
"4_2_3": {
"qText": [2, "輸入食材を生産するために必要な水をバーチャルウォーターといいますが、次のものを生産するためにどれくらいの水が必要でしょうか？　◆牛肉　１kg"],
"answerID": "3",
"layoutType": "line",
"fig": "4_2_3.jpg",
"a_1": [3, "残念。正解は③<strong>約20,000リットルの水</strong>でした。<br><small>（環境省「仮想水計算機」より算出）</small>", 3, "約20リットルの水"],
"a_2": [3, "残念。正解は③<strong>約20,000リットルの水</strong>でした。<br><small>（環境省「仮想水計算機」より算出）</small>", 3, "約2,000リットルの水"],
"a_3": [3, "正解！<strong>牛肉１kgにはおよそ２万リットルもの<br>水が必要</strong>なのです。<small>（環境省「仮想水計算機」より算出）</small>", 3, "約20,000リットルの水"],
"answer_text": "外国から輸入する食料を生産するためには大量の水が消費されています。食料を輸入するということは、その外国の水を消費しているのと同じことなのです。",
"answer_fig": "r_4_2_3.jpg"
},
"comment_4_3": "------------------------------------------------------------------------博士級：ID = 3 --------------------------------------------------------------------------",
"4_3_1": {
"qText": [3, "渇水（水不足）時に取られる措置で<br>取水制限とは次のうちどれでしょうか？"],
"answerID": "2",
"layoutType": "line",
"fig": "4_3_1.jpg",
"a_1": [3, "残念。正解は②<strong>浄水場が河川から取る水の量を制限する（減らす）こと。</strong>でした。", 2, "各家庭などに供給する水を制限する（減らす）こと。"],
"a_2": [3, "正解！<strong>河川から浄水場に取る水の量を減らし</strong>て河川に流れる水が減り過ぎないように調整します。", 2, "浄水場が河川から取る水の量を制限する（減らす）こと。"],
"a_3": [3, "残念。正解は②<strong>浄水場が河川から取る水の量を制限する（減らす）こと。</strong>でした。", 2, "ダムから放流する水の量を制限する（減らす）こと。"],
"answer_text": "水不足が続くと、各家庭への給水量や時間が制限され、生活に影響が出る給水制限になることもあります。日ごろから水を大切に使い、水不足にならないように気をつけましょう。",
"answer_fig": "r_4_3_1.jpg"
},
"4_3_2": {
"qText": [3, "１人が１日で生活に使用する水の量は、<br>およそどれくらいでしょうか？"],
"answerID": "2",
"layoutType": "line",
"fig": "4_1_1.jpg",
"a_1": [3, "残念。正解は②<strong>約300リットル</strong>くらいといわれています。<br><small>（国土交通省 平成28年度版 日本の水資源の現況より）</small>", 3, "約30リットル<br><small>（大きめのバケツ 約3杯分）</small>"],
"a_2": [3, "正解！<strong>ひとりあたり１日で約300リットル</strong>を使うといわれています。<small>（国土交通省 平成28年度版 日本の水資源の現況より）</small>", 3, "約300リットル<br><small>（おふろ 約1.5杯分）</small>"],
"a_3": [3, "残念。正解は②<strong>約300リットル</strong>くらいといわれています。<br><small>（国土交通省 平成28年度版 日本の水資源の現況より）</small>", 3, "約1,000リットル<br><small>（ドラム缶 約5本分）</small>"],
"answer_text": "飲む水の量はほんの僅かですが、生活する上では多くの水を使っているのですね。ひとりひとりが節水を心がけましょう。",
"answer_fig": "r_4_1_1.jpg"
},
"4_3_3": {
"qText": [2, "輸入食材を生産するために必要な水をバーチャルウォーターといいますが、次のものを生産するためにどれくらいの水が必要でしょうか？　◆卵（鶏卵）　１個"],
"answerID": "3",
"layoutType": "line",
"fig": "4_3_3.jpg",
"a_1": [3, "残念。正解は③<strong>約180リットル</strong>でした。<br><small>（環境省「仮想水計算機」より算出）</small>", 3, "約2リットルの水"],
"a_2": [3, "残念。正解は③<strong>約180リットル</strong>でした。<br><small>（環境省「仮想水計算機」より算出）</small>", 3, "約18リットルの水"],
"a_3": [3, "正解！わずか<strong>１個の卵にも約180リットルもの水が必要</strong>なのです。<small>（環境省「仮想水計算機」より算出）</small>", 3, "約180リットルの水"],
"answer_text": "外国から輸入する食料を生産するためには大量の水が消費されています。食料を輸入するということは、その外国の水を消費しているのと同じことなのです。",
"answer_fig": "r_4_3_3.jpg"
},
"comment_4_4": "------------------------------------------------------------------------博士級：ID = 4 --------------------------------------------------------------------------",
"4_4_1": {
"qText": [1, "洗濯機で注水すすぎをせず、ためすすぎをすると、1ヶ月でどれだけ節水になるでしょうか？<br><small>※縦型全自動洗濯機８ｋｇで２回すすぎの場合で、毎日１回洗濯機を回すとして計算</small>"],
"answerID": "3",
"layoutType": "line",
"fig": "4_4_1.jpg",
"a_1": [3, "残念。正解は③<strong>１ヵ月で約1,800リットル</strong>でした。", 3, "約300リットル<br><small>（おふろ約1.5杯分）</small>"],
"a_2": [3, "残念。正解は③<strong>１ヵ月で約1,800リットル</strong>でした。", 3, "約900リットル<br><small>（おふろ約4.5杯分）</small>"],
"a_3": [3, "正解。注水すすぎは<strong>１ヵ月で約1,800リットル</strong>もの水を使うんですね。", 3, "約1,800リットル<br><small>（おふろ約９杯分）</small>"],
"answer_text": "注水すすぎは溜めすすぎにくらべて多くの水を使います。アレルギーの問題がなければ節水のために、ためすすぎをお勧めします。",
"answer_fig": "r_4_4_1.jpg"
},
"4_4_2": {
"qText": [1, "１回あたり6リットル以下で流す節水トイレが販売されていますが、日本中に設置されているトイレのうち、この節水トイレの占める割合はどのくらいになっているでしょうか？<small>（日本レストルーム工業会推計）</small>"],
"answerID": "2",
"layoutType": "line",
"fig": "4_2_1.jpg",
"a_1": [3, "残念。正解は②<strong>約44%</strong>でした。<br><small>（2016年度 日本レストルーム工業会推計）</small>", 3, "約22%"],
"a_2": [3, "正解！まだ<strong>全体の44%程度しか</strong>設置されていません。<br><small>（2016年度 日本レストルーム工業会推計）</small>", 3, "約44%"],
"a_3": [3, "残念。正解は②<strong>約44%</strong>でした。まだまだ少ないですね。<br><small>（2016年度 日本レストルーム工業会推計）</small>", 3, "約66%"],
"answer_text": "まだまだ多くの水量を流している便器があります。大切な水を節約するためにも、こうした節水トイレがもっと増えるといいですね。",
"answer_fig": "r_4_2_1.jpg"
},
"4_4_3": {
"qText": [3, "日本の水使用において、家庭内や外出先などで使用されている水量はどれくらいを占めているでしょうか？"],
"answerID": "2",
"layoutType": "line",
"fig": "4_4_3.jpg",
"a_1": [3, "残念。正解は②<strong>およそ２割</strong>でした。<br><small>（国土交通省 平成28年度版 日本の水資源の現況より）</small>", 3, "およそ１割"],
"a_2": [3, "正解！<strong>およそ２割はわたしたちの生活に使用</strong>しています。<br><small>（国土交通省 平成28年度版 日本の水資源の現況より）</small>", 3, "およそ２割"],
"a_3": [3, "残念。正解は②<strong>およそ２割</strong>でした。<br><small>（国土交通省 平成28年度版 日本の水資源の現況より）</small>", 3, "およそ７割"],
"answer_text": "国土交通省の平成２８年度調査結果公表によると、７割近くは<strong>農業用水</strong>、家庭内や外出先などで使用する<strong>生活用水</strong>は、およそ２割を占め、残りが<strong>工業用水</strong>として利用されているそうです。",
"answer_fig": "r_4_4_3.jpg"
}
};
takumi-style/js/levelMenu_ie.js
// level select menu // level select menu
function levelSelectMenu(et){ function levelSelectMenu(et) {
//---init //---init
var myObj = new Object(); var myObj = new Object();
var levelPlate = document.getElementById("select_plate"); var levelPlate = document.getElementById("select_plate");
var eventMouseDown = et[3]; var eventMouseDown = et[3];
var eventClick = et[0]; var eventClick = et[0];
var selectLevel = 0; var selectLevel = 0;
//-------------------------------------------------------------------------------------------------難易度選択のイベントハンドラの設定 //-------------------------------------------------------------------------------------------------難易度選択のイベントハンドラの設定
var menu_levelSelect = document.getElementsByClassName("select_level_button"); var menu_levelSelect = document.getElementsByClassName("select_level_button");
Object.keys(menu_levelSelect).forEach(function(key){ Object.keys(menu_levelSelect).forEach(function (key) {
//console.log("menu_levelSelect : " + key); //console.log("menu_levelSelect : " + key);
menu_levelSelect[key].addEventListener(eventClick, levelSelectFunc, {passive: true}); menu_levelSelect[key].addEventListener(eventClick, levelSelectFunc, {
menu_levelSelect[key].addEventListener(eventMouseDown, function(){androidConnect ? alert("playSE#click"):console.log("playSE#click")}, {passive: true});//-----click音 passive: true
}); });
function levelSelectFunc(e){//---------------------------------------------------------------------難易度選択処理（private） menu_levelSelect[key].addEventListener(eventMouseDown, function () {
var newLevel = this.id.split("_")[1]; androidConnect ? alert("playSE#click") : console.log("playSE#click")
if (selectLevel == newLevel) return; }, {
passive: true
//---- top button }); //-----click音
document.getElementById("button_return").classList.add("vanish"); });
//----fukidashi function levelSelectFunc(e) { //---------------------------------------------------------------------難易度選択処理（private）
doctorObj.hideFuki(); var newLevel = this.id.split("_")[1];
takumiObj.dispFuki(); if (selectLevel == newLevel) return;
//----plate //---- top button
document.getElementById("select_content-" + selectLevel).classList.remove("selected"); document.getElementById("button_return").classList.add("vanish");
document.getElementById("select_content-" + newLevel).classList.add("selected");
selectLevel = newLevel; //----fukidashi
} doctorObj.hideFuki();
//-------------------------------------------------------------------------------------------------TOPに戻るボタンのイベントハンドラの設定 takumiObj.dispFuki();
var menu_top = document.getElementById("button_return");
menu_top.addEventListener(eventMouseDown, function(){androidConnect ? alert("playSE#click"):console.log("playSE#click")}, {passive: true});//-----click音 //----plate
menu_top.addEventListener(eventClick, goTopFunc, {passive: true}); document.getElementById("select_content-" + selectLevel).classList.remove("selected");
document.getElementById("select_content-" + newLevel).classList.add("selected");
//-------------------------------------------------------------------------------------------------戻るボタンのイベントハンドラの設定 selectLevel = newLevel;
var menu_return = document.getElementsByClassName("select_return_button"); }
//-------------------------------------------------------------------------------------------------TOPに戻るボタンのイベントハンドラの設定
var menu_top = document.getElementById("button_return");
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++ menu_top.addEventListener(eventMouseDown, function () {
本来、48行目の処理は以下の様に記述しないといけない。 androidConnect ? alert("playSE#click") : console.log("playSE#click")
たまたまkeyがmenu_returnもmenu_levelSelectも0〜3なので問題なかっただけ... }, {
Object.keys(menu_return).forEach(function(key){ passive: true
+++++++++++++++++++++++++++++++++++++++++++++++++++++*/ }); //-----click音
Object.keys(menu_levelSelect).forEach(function(key){ menu_top.addEventListener(eventClick, goTopFunc, {
//console.log("menu_levelSelect : " + key); passive: true
menu_return[key].addEventListener(eventClick, returnFunc, {passive: true}); });
menu_return[key].addEventListener(eventMouseDown, function(){androidConnect ? alert("playSE#click"):console.log("playSE#click")}, {passive: true});//-----click音
}); //-------------------------------------------------------------------------------------------------戻るボタンのイベントハンドラの設定
function returnFunc(e){//--------------------------------------------------------------------------戻る処理（private） var menu_return = document.getElementsByClassName("select_return_button");
var newLevel = 0;
if (selectLevel == newLevel) return;
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++
//---- top button 本来、48行目の処理は以下の様に記述しないといけない。
menu_top.classList.remove("vanish"); たまたまkeyがmenu_returnもmenu_levelSelectも0〜3なので問題なかっただけ...
anime({targets: "#button_return",opacity:[0,1],easing:"easeOutSine",delay:500, duration: 500});//------ anime Object.keys(menu_return).forEach(function(key){
+++++++++++++++++++++++++++++++++++++++++++++++++++++*/
//----fukidashi Object.keys(menu_levelSelect).forEach(function (key) {
doctorObj.dispFuki("fuki_text_select.png"); //console.log("menu_levelSelect : " + key);
takumiObj.hideFuki(); menu_return[key].addEventListener(eventClick, returnFunc, {
passive: true
//----plate });
document.getElementById("select_content-" + selectLevel).classList.remove("selected"); menu_return[key].addEventListener(eventMouseDown, function () {
document.getElementById("select_content-" + newLevel).classList.add("selected"); androidConnect ? alert("playSE#click") : console.log("playSE#click")
selectLevel = newLevel; }, {
} passive: true
}); //-----click音
//-------------------------------------------------------------------------------------------------箱のイベントハンドラの設定 });
var menu_quizSelect = document.getElementsByClassName("select_content_button");
Object.keys(menu_quizSelect).forEach(function(key){ function returnFunc(e) { //--------------------------------------------------------------------------戻る処理（private）
menu_quizSelect[key].addEventListener(eventClick, quizSelectFunc, {passive: true}); var newLevel = 0;
menu_quizSelect[key].addEventListener(eventMouseDown, function(){androidConnect ? alert("playSE#click"):console.log("playSE#click")}, {passive: true});//-----click音 if (selectLevel == newLevel) return;
});
function quizSelectFunc(e){//---------------------------------------------------------------------箱をタップしたので開始（private） //---- top button
var lv = this.id.split("_")[1];//---1:初級、2:中級、3:上級、4:博士級 menu_top.classList.remove("vanish");
var clr = this.id.split("_")[2];//---色は数値はリンクしていない、htmlのidによる。 anime({
goQuizFunc(lv,clr); targets: "#button_return",
takumiObj.hideFuki(); opacity: [0, 1],
doctorObj.setSmallFuki(); easing: "easeOutSine",
} delay: 500,
function goQuizFunc(lv,clr){//--------------------------------------------------------------------- プレートを隠してクイズへ移行 duration: 500
anime({targets: "#select_plate",marginTop:"-120%", duration: 300,easing:"easeOutQuad" ,complete:function(){ }); //------ anime
levelPlate.classList.add("vanish");
quizMaster.initFunc(lv,clr); //----fukidashi
}});//------ anime doctorObj.dispFuki("fuki_text_select.png");
document.getElementById("button_return").classList.add("vanish"); takumiObj.hideFuki();
}
//----plate
//------------------------------------------------------------------------------------------------ プレートを隠してTOPに戻る document.getElementById("select_content-" + selectLevel).classList.remove("selected");
function goTopFunc(){ document.getElementById("select_content-" + newLevel).classList.add("selected");
doctorObj.directHide(); selectLevel = newLevel;
takumiObj.directHide(); }
levelPlate.classList.add("vanish");
menu_top.classList.add("vanish"); //-------------------------------------------------------------------------------------------------箱のイベントハンドラの設定
topAnime.dispFunc(); var menu_quizSelect = document.getElementsByClassName("select_content_button");
/* Object.keys(menu_quizSelect).forEach(function (key) {
anime({targets: "#select_plate",marginTop:"-120%", duration: 300,easing:"easeOutQuad" ,complete:function(){ menu_quizSelect[key].addEventListener(eventClick, quizSelectFunc, {
levelPlate.classList.add("vanish"); passive: true
topAnime.dispFunc(); });
}});//------ anime menu_quizSelect[key].addEventListener(eventMouseDown, function () {
doctorObj.hideFunc(); androidConnect ? alert("playSE#click") : console.log("playSE#click")
takumiObj.hideFunc(); }, {
menu_top.classList.add("vanish"); passive: true
*/ }); //-----click音
} });
myObj.dispFunc = function(){//--------------------------------------------------------------------- プレートを表示します function quizSelectFunc(e) { //---------------------------------------------------------------------箱をタップしたので開始（private）
if (selectLevel != 0){//----再選択で戻ってきたときのための処理 var lv = this.id.split("_")[1]; //---1:初級、2:中級、3:上級、4:博士級
document.getElementById("select_content-" + selectLevel).classList.remove("selected"); var clr = this.id.split("_")[2]; //---色は数値はリンクしていない、htmlのidによる。
document.getElementById("select_content-" + 0).classList.add("selected"); console.log(clr)
selectLevel = 0; goQuizFunc(lv, clr);
} takumiObj.hideFuki();
doctorObj.setLargeFuki(); doctorObj.setSmallFuki();
doctorObj.dispFunc("fuki_text_select.png"); }
takumiObj.dispFunc();
levelPlate.classList.remove("vanish"); function goQuizFunc(lv, clr) { //--------------------------------------------------------------------- プレートを隠してクイズへ移行
androidConnect ? alert("setBgm#select"): console.log("setBgm#select");//----- sound : bgm (select) anime({
anime({targets: "#select_plate",marginTop:["-100%","-10%"], duration: 1000});//------ anime targets: "#select_plate",
marginTop: "-120%",
menu_top.classList.remove("vanish"); duration: 300,
anime({targets: "#button_return",opacity:[0,1],easing:"easeOutSine",delay:1200, duration: 500});//------ anime easing: "easeOutQuad",
} complete: function () {
levelPlate.classList.add("vanish");
quizMaster.initFunc(lv, clr);
}
}); //------ anime
return myObj; document.getElementById("button_return").classList.add("vanish");
}
}
\ No newline at end of file //------------------------------------------------------------------------------------------------ プレートを隠してTOPに戻る
function goTopFunc() {
doctorObj.directHide();
takumiObj.directHide();
levelPlate.classList.add("vanish");
menu_top.classList.add("vanish");
topAnime.dispFunc();
/*
anime({targets: "#select_plate",marginTop:"-120%", duration: 300,easing:"easeOutQuad" ,complete:function(){
levelPlate.classList.add("vanish");
topAnime.dispFunc();
}});//------ anime
doctorObj.hideFunc();
takumiObj.hideFunc();
menu_top.classList.add("vanish");
*/
}
myObj.dispFunc = function () { //--------------------------------------------------------------------- プレートを表示します
if (selectLevel != 0) { //----再選択で戻ってきたときのための処理
document.getElementById("select_content-" + selectLevel).classList.remove("selected");
document.getElementById("select_content-" + 0).classList.add("selected");
selectLevel = 0;
}
doctorObj.setLargeFuki();
doctorObj.dispFunc("fuki_text_select.png");
takumiObj.dispFunc();
levelPlate.classList.remove("vanish");
androidConnect ? alert("setBgm#select") : console.log("setBgm#select"); //----- sound : bgm (select)
anime({
targets: "#select_plate",
marginTop: ["-100%", "-10%"],
duration: 1000
}); //------ anime
menu_top.classList.remove("vanish");
anime({
targets: "#button_return",
opacity: [0, 1],
easing: "easeOutSine",
delay: 1200,
duration: 500
}); //------ anime
}
return myObj;
}
takumi-style/js/quizMaster.js
// quiz master // quiz master
function quizMaster(et){ function quizMaster(et) {
//---init //---init
var myObj = new Object(); var myObj = new Object();
var quizPlate = document.getElementById("quiz_plate"); var quizPlate = document.getElementById("quiz_plate");
var ansPlate = document.getElementById("ans_plate"); var ansPlate = document.getElementById("ans_plate");
var resultPlate = document.getElementById("result_plate"); var resultPlate = document.getElementById("result_plate");
var layout_3fig = document.getElementById("answer_area"); var layout_3fig = document.getElementById("answer_area");
var layout_line = document.getElementById("answer_area2"); var layout_line = document.getElementById("answer_area2");
var eventClick = et[0]; var eventClick = et[0];
var eventMouseDown = et[3]; var eventMouseDown = et[3];
var qNo = 1; var qNo = 1;
var qLevel;//----------------1：初級、2：中級、3：上級、4：博士級 var qLevel; //----------------1：初級、2：中級、3：上級、4：博士級
var colorID;//---------------levelMenuで選択した色のID var colorID; //---------------levelMenuで選択した色のID
var correctNum = 0;//--------正解数 var correctNum = 0; //--------正解数
var json_ansID; var json_ansID;
var ans_text_list = [];//----jsonから取得した選択肢毎の解答テキストを格納する var ans_text_list = []; //----jsonから取得した選択肢毎の解答テキストを格納する
//---------------------------------------------------------------------解答ボタンの登録 //---------------------------------------------------------------------解答ボタンの登録
var answerButton = document.getElementsByClassName("answer_button");//----------------layout : 3 figs var answerButton = document.getElementsByClassName("answer_button"); //----------------layout : 3 figs
Object.keys(answerButton).forEach(function(key){ Object.keys(answerButton).forEach(function (key) {
answerButton[key].addEventListener(eventClick, quizAnswer, {passive: true}); answerButton[key].addEventListener(eventClick, quizAnswer, {
answerButton[key].addEventListener(eventMouseDown, function(){androidConnect ? alert("playSE#click"):console.log("playSE#click")}, {passive: true});//----- sound : click passive: true
});
}); answerButton[key].addEventListener(eventMouseDown, function () {
var answerButton = document.getElementsByClassName("answer_button2");//---------------layout : 3 lines androidConnect ? alert("playSE#click") : console.log("playSE#click")
Object.keys(answerButton).forEach(function(key){ }, {
answerButton[key].addEventListener(eventClick, quizAnswer, {passive: true}); passive: true
answerButton[key].addEventListener(eventMouseDown, function(){androidConnect ? alert("playSE#click"):console.log("playSE#click")}, {passive: true});//----- sound : click }); //----- sound : click
});
function quizAnswer(e){//---------------------------------------------回答時の処理（private） });
var ans_id = this.id.split("_")[1]; var answerButton = document.getElementsByClassName("answer_button2"); //---------------layout : 3 lines
Object.keys(answerButton).forEach(function (key) {
if (json_ansID == ans_id){ answerButton[key].addEventListener(eventClick, quizAnswer, {
correctNum++; passive: true
androidConnect ? alert("playSE#ok"):console.log("playSE#ok");//----------sound : ok });
doctorObj.setFukiText("fuki_text_ok.png"); answerButton[key].addEventListener(eventMouseDown, function () {
}else{ androidConnect ? alert("playSE#click") : console.log("playSE#click")
androidConnect ? alert("playSE#ng"):console.log("playSE#ng");//----------sound : ng }, {
doctorObj.setFukiText("fuki_text_ng.png"); passive: true
} }); //----- sound : click
});
var ansTextElm = document.getElementById("ans_board_text");
var ansTextData = ans_text_list[Number(ans_id)-1]; function quizAnswer(e) { //---------------------------------------------回答時の処理（private）
ansTextElm.innerHTML = ansTextData[1]; var ans_id = this.id.split("_")[1];
ansTextElm.classList.remove("fontSize20","fontSize24","fontSize26");//+++++++++ size reset
if (ansTextData[0] == 1){//----------- 1 :small font size if (json_ansID == ans_id) {
ansTextElm.classList.add("fontSize20"); correctNum++;
}else if (ansTextData[0] == 3){//----- 3 :large font size androidConnect ? alert("playSE#ok") : console.log("playSE#ok"); //----------sound : ok
ansTextElm.classList.add("fontSize26"); doctorObj.setFukiText("fuki_text_ok.png");
}else{//---------------------------- 2 :normal font size } else {
ansTextElm.classList.add("fontSize24"); androidConnect ? alert("playSE#ng") : console.log("playSE#ng"); //----------sound : ng
} doctorObj.setFukiText("fuki_text_ng.png");
}
myObj.hideQuiz(); var ansTextElm = document.getElementById("ans_board_text");
myObj.dispAns(); var ansTextData = ans_text_list[Number(ans_id) - 1];
} ansTextElm.innerHTML = ansTextData[1];
ansTextElm.classList.remove("fontSize20", "fontSize24", "fontSize26"); //+++++++++ size reset
//---------------------------------------------------------------------次へボタンの登録 if (ansTextData[0] == 1) { //----------- 1 :small font size
var nextButton = document.getElementById("button_next"); ansTextElm.classList.add("fontSize20");
nextButton.addEventListener(eventClick, nextQuiz, {passive: true}); } else if (ansTextData[0] == 3) { //----- 3 :large font size
nextButton.addEventListener(eventMouseDown, function(){androidConnect ? alert("playSE#click"):console.log("playSE#click")}, {passive: true});//----- sound : click ansTextElm.classList.add("fontSize26");
function nextQuiz(){ } else { //---------------------------- 2 :normal font size
ansTextElm.classList.add("fontSize24");
qNo = qNo + 1; }
if (qNo > 3){//------------------------------------------------------------------------------結果表示
nextButton.classList.add("vanish"); myObj.hideQuiz();
androidConnect ? alert("setBgm#result"):console.log("setBgm#result");//----- sound : bgm (stop bgm) myObj.dispAns();
doctorObj.hideFunc(); }
takumiObj.hideFunc();
anime({targets: "#ans_plate",marginTop:"-125%", easing:"easeOutQuad" , duration: 300,complete:function(){ //---------------------------------------------------------------------次へボタンの登録
ansPlate.classList.add("vanish"); var nextButton = document.getElementById("button_next");
ansPlate.style.marginTop = "-5%"; nextButton.addEventListener(eventClick, nextQuiz, {
drumRoll(); passive: true
}});//------ anime });
}else{ nextButton.addEventListener(eventMouseDown, function () {
myObj.hideAns(); androidConnect ? alert("playSE#click") : console.log("playSE#click")
myObj.dispQuiz(); }, {
} passive: true
} }); //----- sound : click
//--------------------------------------------------------------------------------------------------結果画面への移行 function nextQuiz() {
function drumRoll(){
document.getElementById("drum_text").classList.remove("vanish"); qNo = qNo + 1;
androidConnect ? alert("playSE#drum"):console.log("playSE#drum");//----------sound : drum
anime({targets: "#drum_text", if (qNo > 3) { //------------------------------------------------------------------------------結果表示
width:[{value:["50vw","30vw"], easing:"linear"}], nextButton.classList.add("vanish");
opacity:[{value:0, easing:"linear",duration:0},{value:1, easing:"linear",duration:300},{value:0, easing:"linear",delay:2000,duration:300}], androidConnect ? alert("setBgm#result") : console.log("setBgm#result"); //----- sound : bgm (stop bgm)
duration: 2500,complete:function(){ doctorObj.hideFunc();
document.getElementById("drum_text").classList.add("vanish"); takumiObj.hideFunc();
goResultFunc(); anime({
}});//------ anime targets: "#ans_plate",
/* marginTop: "-125%",
anime({targets: "#drum_text", easing: "easeOutQuad",
width:[{value:["50vw","30vw"], easing:"linear"}], duration: 300,
opacity:[{value:[0,1], easing:"linear",duration:300}], complete: function () {
duration: 2500,complete:function(){ ansPlate.classList.add("vanish");
document.getElementById("drum_text").classList.add("vanish"); ansPlate.style.marginTop = "-5%";
goResultFunc(); drumRoll();
}});//------ anime }
*/ }); //------ anime
} } else {
function goResultFunc(){ myObj.hideAns();
var ribbonElm = document.getElementById("result_title").getElementsByTagName("img")[0]; myObj.dispQuiz();
var mainElm = document.getElementById("result_main"); }
var baseElm = document.getElementById("result_plate"); }
if (correctNum>=3) {//--------------- gold medal //--------------------------------------------------------------------------------------------------結果画面への移行
androidConnect ? alert("playSE#result_1"):console.log("playSE#result_1");//----------sound : result_1 function drumRoll() {
ribbonElm.src = "images/result/ribbon_1_"+qLevel+".png"; document.getElementById("drum_text").classList.remove("vanish");
mainElm.src = "images/result/main_1_"+qLevel+".png"; androidConnect ? alert("playSE#drum") : console.log("playSE#drum"); //----------sound : drum
baseElm.classList.add("goldPrize"); anime({
}else if (correctNum==2){//---------- silver medal targets: "#drum_text",
androidConnect ? alert("playSE#result_2"):console.log("playSE#result_2");//----------sound : result_2 width: [{
ribbonElm.src = "images/result/ribbon_2_"+qLevel+".png"; value: ["50vw", "30vw"],
mainElm.src = "images/result/main_2.png"; easing: "linear"
baseElm.classList.remove("goldPrize"); }],
}else{//----------------------------- bronze medal opacity: [{
androidConnect ? alert("playSE#result_3"):console.log("playSE#result_3");//----------sound : result_3 value: 0,
ribbonElm.src = "images/result/ribbon_3.png"; easing: "linear",
mainElm.src = "images/result/main_3.png"; duration: 0
baseElm.classList.remove("goldPrize"); }, {
} value: 1,
myObj.dispResult(); easing: "linear",
qNo = 1;//----------reset duration: 300
correctNum = 0;//---reset }, {
} value: 0,
easing: "linear",
//--------------------------------------------------------------------------------------------------JSONのデータをセットする delay: 2000,
myObj.setJSONData = function(){ duration: 300
}],
//console.log("qLevel = " + qLevel); duration: 2500,
//console.log("colorID = " + colorID); complete: function () {
document.getElementById("drum_text").classList.add("vanish");
var targetProp = qLevel + "_" + colorID + "_" + qNo; goResultFunc();
var myData = jsonData[targetProp]; }
json_ansID = myData["answerID"]; }); //------ anime
ans_text_list = []; /*
anime({targets: "#drum_text",
//--------------------------------- quiz plate width:[{value:["50vw","30vw"], easing:"linear"}],
document.getElementById("quiz_board_no").src = "images/quiz/no_"+qNo+".png"; opacity:[{value:[0,1], easing:"linear",duration:300}],
var quizTextElm = document.getElementById("quiz_board_text"); duration: 2500,complete:function(){
quizTextElm.innerHTML = myData["qText"][1]; document.getElementById("drum_text").classList.add("vanish");
var quizFontSize = myData["qText"][0]; goResultFunc();
quizTextElm.classList.remove("fontSize20","fontSize24","fontSize26");//+++++++++ size reset }});//------ anime
if (quizFontSize == 1){//----------- 1 :small font size */
quizTextElm.classList.add("fontSize20"); }
}else if (quizFontSize == 3){//----- 3 :large font size
quizTextElm.classList.add("fontSize26"); function goResultFunc() {
}else{//---------------------------- 2 :normal font size var ribbonElm = document.getElementById("result_title").getElementsByTagName("img")[0];
quizTextElm.classList.add("fontSize24"); var mainElm = document.getElementById("result_main");
} var baseElm = document.getElementById("result_plate");
if (correctNum >= 3) { //--------------- gold medal
var isFig = myData["layoutType"] == "fig"; androidConnect ? alert("playSE#result_1") : console.log("playSE#result_1"); //----------sound : result_1
myObj.layoutChange(myData["layoutType"] == "fig"); ribbonElm.src = "images/result/ribbon_1_" + qLevel + ".png";
if (isFig){//------ 3 fig mainElm.src = "images/result/main_1_" + qLevel + ".png";
for (var i=1; i<=3; i++){ baseElm.classList.add("goldPrize");
var ansElm = document.getElementById("a_" + i); } else if (correctNum == 2) { //---------- silver medal
var ansData = myData["a_" + i]; androidConnect ? alert("playSE#result_2") : console.log("playSE#result_2"); //----------sound : result_2
ribbonElm.src = "images/result/ribbon_2_" + qLevel + ".png";
ansElm.classList.remove("fontSize22","fontSize26","fontSize30");//+++++++++ size reset mainElm.src = "images/result/main_2.png";
var ansFontSize = ansData[2]; baseElm.classList.remove("goldPrize");
if (ansFontSize == 1){//----------- 1 :small font size } else { //----------------------------- bronze medal
ansElm.classList.add("fontSize22"); androidConnect ? alert("playSE#result_3") : console.log("playSE#result_3"); //----------sound : result_3
}else if (ansFontSize == 3){//----- 3 :large font size ribbonElm.src = "images/result/ribbon_3.png";
ansElm.classList.add("fontSize30"); mainElm.src = "images/result/main_3.png";
}else{//---------------------------- 2 :normal font size baseElm.classList.remove("goldPrize");
ansElm.classList.add("fontSize26"); }
} myObj.dispResult();
qNo = 1; //----------reset
ansElm.getElementsByClassName("answer_button_img")[0].getElementsByTagName("img")[0].src = "images/illust/" + ansData[3]; correctNum = 0; //---reset
ans_text_list.push([ansData[0],ansData[1]]); }
}
}else{//----------- 3 line //--------------------------------------------------------------------------------------------------JSONのデータをセットする
document.getElementById("answer_area2_fig").getElementsByTagName("img")[0].src = "images/illust/" + myData["fig"]; myObj.setJSONData = function () {
for (var i=1; i<=3; i++){
var ansElm = document.getElementById("a2_" + i); //console.log("qLevel = " + qLevel);
var ansData = myData["a_" + i]; //console.log("colorID = " + colorID);
ansElm.classList.remove("fontSize18","fontSize20","fontSize22");//+++++++++ size reset var targetProp = qLevel + "_" + colorID + "_" + qNo;
var ansFontSize = ansData[2]; var myData = jsonData[targetProp];
ansElm.getElementsByTagName("span")[0].innerHTML = ansData[3];//---- in span json_ansID = myData["answerID"];
if (ansFontSize == 1){//----------- 1 :small font size ans_text_list = [];
ansElm.classList.add("fontSize18");
}else if (ansFontSize == 3){//----- 3 :large font size //--------------------------------- quiz plate
ansElm.classList.add("fontSize22"); document.getElementById("quiz_board_no").src = "images/quiz/no_" + qNo + ".png";
}else{//---------------------------- 2 :normal font size var quizTextElm = document.getElementById("quiz_board_text");
ansElm.classList.add("fontSize20"); quizTextElm.innerHTML = myData["qText"][1];
} var quizFontSize = myData["qText"][0];
quizTextElm.classList.remove("fontSize20", "fontSize24", "fontSize26"); //+++++++++ size reset
ans_text_list.push([ansData[0],ansData[1]]); if (quizFontSize == 1) { //----------- 1 :small font size
} quizTextElm.classList.add("fontSize20");
} } else if (quizFontSize == 3) { //----- 3 :large font size
quizTextElm.classList.add("fontSize26");
} else { //---------------------------- 2 :normal font size
//--------------------------------- answer plate quizTextElm.classList.add("fontSize24");
document.getElementById("explain_fig").getElementsByTagName("img")[0].src = "images/illust/" + myData["answer_fig"]; }
document.getElementById("explain_text").innerHTML = myData["answer_text"];
var isFig = myData["layoutType"] == "fig";
} myObj.layoutChange(myData["layoutType"] == "fig");
if (isFig) { //------ 3 fig
for (var i = 1; i <= 3; i++) {
//---------------------------------------------------------------------結果ボタンの登録（待機画面/選択画面） var ansElm = document.getElementById("a_" + i);
var topButton = document.getElementById("result_top_button");//---------------------トップに戻る var ansData = myData["a_" + i];
topButton.addEventListener(eventClick, returnTop, {passive: true});
topButton.addEventListener(eventMouseDown, function(){androidConnect ? alert("playSE#click"):console.log("playSE#click")}, {passive: true});//----- sound : click ansElm.classList.remove("fontSize22", "fontSize26", "fontSize30"); //+++++++++ size reset
function returnTop(){ var ansFontSize = ansData[2];
androidConnect ? alert("playSE#seStop"):console.log("playSE#seStop");//----------sound : seStop if (ansFontSize == 1) { //----------- 1 :small font size
myObj.hideResult(); ansElm.classList.add("fontSize22");
topAnime.dispFunc(); } else if (ansFontSize == 3) { //----- 3 :large font size
} ansElm.classList.add("fontSize30");
var selectButton = document.getElementById("result_select_button");//----------------難易度選択に戻る } else { //---------------------------- 2 :normal font size
selectButton.addEventListener(eventClick, returnSelect, {passive: true}); ansElm.classList.add("fontSize26");
selectButton.addEventListener(eventMouseDown, function(){androidConnect ? alert("playSE#click"):console.log("playSE#click")}, {passive: true});//----- sound : click }
function returnSelect(){
androidConnect ? alert("playSE#seStop"):console.log("playSE#seStop");//----------sound : seStop ansElm.getElementsByClassName("answer_button_img")[0].getElementsByTagName("img")[0].src = "images/illust/" + ansData[3];
myObj.hideResult(); ans_text_list.push([ansData[0], ansData[1]]);
levelSelectMenu.dispFunc(); }
} } else { //----------- 3 line
document.getElementById("answer_area2_fig").getElementsByTagName("img")[0].src = "images/illust/" + myData["fig"];
for (var i = 1; i <= 3; i++) {
var ansElm = document.getElementById("a2_" + i);
//---------------------------------------------------------------------レイアウトの切り替え var ansData = myData["a_" + i];
myObj.layoutChange = function (boo){//---------------------------------trueで3fig, falseで3line
if (boo){ ansElm.classList.remove("fontSize18", "fontSize20", "fontSize22"); //+++++++++ size reset
layout_line.classList.add("vanish"); var ansFontSize = ansData[2];
layout_3fig.classList.remove("vanish"); ansElm.getElementsByTagName("span")[0].innerHTML = ansData[3]; //---- in span
}else{ if (ansFontSize == 1) { //----------- 1 :small font size
layout_line.classList.remove("vanish"); ansElm.classList.add("fontSize18");
layout_3fig.classList.add("vanish"); } else if (ansFontSize == 3) { //----- 3 :large font size
} ansElm.classList.add("fontSize22");
} } else { //---------------------------- 2 :normal font size
ansElm.classList.add("fontSize20");
}
//---------------------------------------------------------------------クイズ画面の初期化
myObj.initFunc = function(lv,clr){ ans_text_list.push([ansData[0], ansData[1]]);
qLevel = lv; }
colorID = clr; }
document.getElementById("quiz_title").getElementsByTagName("img")[0].src = "images/level_menu/text_lev_"+qLevel+".png";
document.getElementById("ans_title").getElementsByTagName("img")[0].src = "images/level_menu/text_lev_"+qLevel+".png";
androidConnect ? alert("setBgm#game"): console.log("setBgm#game");//----- sound : bgm (game) //--------------------------------- answer plate
anime({targets: "#quiz_plate",marginTop:["-100%","-5%"], duration: 1000});//------ anime document.getElementById("explain_fig").getElementsByTagName("img")[0].src = "images/illust/" + myData["answer_fig"];
myObj.dispQuiz(); document.getElementById("explain_text").innerHTML = myData["answer_text"];
}
}
//---------------------------------------------------------------------クイズ画面の表示/非表示
myObj.hideQuiz = function(){
quizPlate.classList.add("vanish"); //---------------------------------------------------------------------結果ボタンの登録（待機画面/選択画面）
} var topButton = document.getElementById("result_top_button"); //---------------------トップに戻る
myObj.dispQuiz = function(){ topButton.addEventListener(eventClick, returnTop, {
myObj.setJSONData(); passive: true
quizPlate.classList.remove("vanish"); });
doctorObj.dispFuki("fuki_text_ques.png"); topButton.addEventListener(eventMouseDown, function () {
} androidConnect ? alert("playSE#click") : console.log("playSE#click")
}, {
passive: true
}); //----- sound : click
//---------------------------------------------------------------------解答画面の表示/非表示 function returnTop() {
myObj.hideAns = function(){ androidConnect ? alert("playSE#seStop") : console.log("playSE#seStop"); //----------sound : seStop
ansPlate.classList.add("vanish"); myObj.hideResult();
nextButton.classList.add("vanish"); topAnime.dispFunc();
} }
myObj.dispAns = function(){ var selectButton = document.getElementById("result_select_button"); //----------------難易度選択に戻る
ansPlate.classList.remove("vanish"); selectButton.addEventListener(eventClick, returnSelect, {
nextButton.classList.remove("vanish"); passive: true
} });
selectButton.addEventListener(eventMouseDown, function () {
//---------------------------------------------------------------------結果画面の表示/非表示 androidConnect ? alert("playSE#click") : console.log("playSE#click")
myObj.hideResult = function(){ }, {
document.getElementById("result_top_button").classList.add("vanish"); passive: true
document.getElementById("result_select_button").classList.add("vanish"); }); //----- sound : click
resultPlate.classList.add("vanish"); function returnSelect() {
} androidConnect ? alert("playSE#seStop") : console.log("playSE#seStop"); //----------sound : seStop
myObj.dispResult = function(){ myObj.hideResult();
resultPlate.classList.remove("vanish"); levelSelectMenu.dispFunc();
anime({targets: "#result_plate",scale:[0,1], duration: 1000, complete:function(){ }
document.getElementById("result_top_button").classList.remove("vanish");
document.getElementById("result_select_button").classList.remove("vanish");
anime({targets: "#result_top_button",opacity:[0,1],easing:"easeOutSine", duration: 500});//------ anime
anime({targets: "#result_select_button",opacity:[0,1],easing:"easeOutSine", duration: 500});//------ anime //---------------------------------------------------------------------レイアウトの切り替え
}});//------ anime myObj.layoutChange = function (boo) { //---------------------------------trueで3fig, falseで3line
} if (boo) {
layout_line.classList.add("vanish");
layout_3fig.classList.remove("vanish");
} else {
layout_line.classList.remove("vanish");
return myObj; layout_3fig.classList.add("vanish");
}
} }
\ No newline at end of file
//---------------------------------------------------------------------クイズ画面の初期化
myObj.initFunc = function (lv, clr) {
qLevel = lv;
colorID = clr;
document.getElementById("quiz_title").getElementsByTagName("img")[0].src = "images/level_menu/text_lev_" + qLevel + ".png";
document.getElementById("ans_title").getElementsByTagName("img")[0].src = "images/level_menu/text_lev_" + qLevel + ".png";
androidConnect ? alert("setBgm#game") : console.log("setBgm#game"); //----- sound : bgm (game)
anime({
targets: "#quiz_plate",
marginTop: ["-100%", "-5%"],
duration: 1000
}); //------ anime
myObj.dispQuiz();
}
//---------------------------------------------------------------------クイズ画面の表示/非表示
myObj.hideQuiz = function () {
quizPlate.classList.add("vanish");
}
myObj.dispQuiz = function () {
myObj.setJSONData();
quizPlate.classList.remove("vanish");
doctorObj.dispFuki("fuki_text_ques.png");
}
//---------------------------------------------------------------------解答画面の表示/非表示
myObj.hideAns = function () {
ansPlate.classList.add("vanish");
nextButton.classList.add("vanish");
}
myObj.dispAns = function () {
ansPlate.classList.remove("vanish");
nextButton.classList.remove("vanish");
}
//---------------------------------------------------------------------結果画面の表示/非表示
myObj.hideResult = function () {
document.getElementById("result_top_button").classList.add("vanish");
document.getElementById("result_select_button").classList.add("vanish");
resultPlate.classList.add("vanish");
}
myObj.dispResult = function () {
resultPlate.classList.remove("vanish");
anime({
targets: "#result_plate",
scale: [0, 1],
duration: 1000,
complete: function () {
document.getElementById("result_top_button").classList.remove("vanish");
document.getElementById("result_select_button").classList.remove("vanish");
anime({
targets: "#result_top_button",
opacity: [0, 1],
easing: "easeOutSine",
duration: 500
}); //------ anime
anime({
targets: "#result_select_button",
opacity: [0, 1],
easing: "easeOutSine",
duration: 500
}); //------ anime
}
}); //------ anime
}
return myObj;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment