<!DOCTYPE html>
<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>英検 CBT</title>
	<base href="{{base}}">
	<meta name="description" content="">
	<meta name="copyright" content="">

	<link rel="shortcut icon" href="/favicon.ico">
	<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="../css/reset.css">
	<link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrap-slider.css">
	<link rel="stylesheet" href="../css/main.css">
	<link rel="stylesheet" href="../css/class.css">

	</head>
	<body>


		<div class="container question ja" id="mouseClickEvent">
			<header class="common">
				<div class="header-inner">
					<!-- <h2>Grade Pre-2　スピーキング</h2> --><h1 class="examHeader" id="examHeader">{{task_name}}</h1>
					<div class="toolbox">
						<div class="tool">
							<div class="volumebox">
								<div class="volume_controller">
									<!-- <audio src="" id="sound" data-next=""></audio> -->
									<input id="volume" value=" " data-slider-id="volumeSlider" type="image" data-slider-min="0" data-slider-max="100" data-slider-step="1" />									
								</div>
							</div>
						</div>
					</div>
				</div>
			</header>
			<main class="content">
				<div class="inner-box">
					{{#is_template_type_1}}
					<div class="inner-box-l video-b tcenter fl">
						<!-- <img src="./sexam/video/img_video.jpg"> -->
						<div class="video-black-mat">
							<video oncanplay="whenVideoLoaded();" id="js-exam-video" onplaying="whenVideoPlaying();"></video>
						</div>
						<!-- 			動画を入れる時は、上のimgを削除して、下のvideoを使う			 -->
<!-- 						<video src="./sexam/video/R3DD00010S00103-G.mp4"></video> -->
						<div class="button btn-m repeat" ><input type="submit" value="" id="replayButton"  style="display: none;"></div>
					</div>
					{{/is_template_type_1}}
					{{#is_template_type_2}}
					<!-- <div style="width: width: 925px;">
						<h3>{{card_title}}</h3>
						<h5>{{card_text}}</h5>							
					</div> -->
					<div class="inner-box-l question-img fl">
						<img src="{{images}}" >
					</div>					
					{{/is_template_type_2}}
					<div class="inner-box-r">
						{{#is_template_type_2}}
						<div class="video-s">
							<!-- <img src="./sexam/video/img_video.jpg"> -->
							<div class="video-black-mat">
								<video id="js-exam-video" oncanplay="whenVideoLoaded();" onplaying="whenVideoPlaying();"></video>
							</div>
							<!-- 			動画を入れる時は、上のimgを削除して、下のvideoを使う			 -->
<!-- 							<video src="./sexam/video/R3DD00010S00103-G.mp4"></video> -->
							<div class="button btn-m repeat" ><input type="submit" value="" id="replayButton"  style="display: none;"></div>
						</div>
						{{/is_template_type_2}}
							<div class="recording_play">
							<!--
							＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
								↓録音時
							＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
							-->
							<div id="js-now-recording" style="display:none">
							<div class="img">
								<img src="../img/frame/img_microphone_rec.png" width="133">
							</div>
								<!--
								＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
									data-voumeの値が0〜10までの間で
									ゲージが変化するようになっています。
								＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
								-->
							<div class="img2" data-volume="0" id="js-level-meter"></div>							
							</div>

							<!--
							＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
								ここまで再生前
								↓再生時
							＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
							-->
							<!--
							<div class="img">
								<img src="sexam/img/frame/img_recording02.png" width="146">
							</div>
							-->
							<!--
							＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
								ここまで再生時
							＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
							-->
						</div>
						<div id="loadingDiv" style="display:none;width:245;height:200;right:2%;text-align: center;">
								<img src="../img/frame/Loading.gif" width="80%">
						</div>
						<!-- 2018/01/16 Added by Sachin - #51 (Display the screen where the video "This is the end of the test" is played.) - Start -->
						{{#is_template_type_1}}
							<div class="emptybox">
							</div>
						{{/is_template_type_1}}
						<!-- 2018/01/16 Added by Sachin - #51 (Display the screen where the video "This is the end of the test" is played.) - End -->
						<div class="btnwrap">
							<div class="button btn-l next"><a href="javascript:void(0);" id="next-button" style="display: none"><span>次へ</span></a></div>		
						</div>
						<div id="click_next_message" style="display: none" class="click_next_message">解答が完了している場合は、「次へ」ボタンを押して次の設問へ進むことができます。</div> 
						{{#showNextButton}}
						<div class="btnwrap">
							<div class="button btn-l next"><a href="#" id="next-button"><span>次へ</span></a></div>
						</div>
						<div id="click_next_message" class="click_next_message">解答が完了している場合は、「次へ」ボタンを押して次の設問へ進むことができます。 </div>						
						{{/showNextButton}}
						<div class="btn" id="yesnoDiv" {{^showYesNoButtons}}style="display: none"{{/showYesNoButtons}}>
							<div class="button btn-l yes"><input type="submit" id="yes-button" value=""></div>
							<div class="button btn-l no"><input type="submit" id="no-button" value=""></div>
						</div>
						<div class="time" id="js-countdown-timer" {{{show_timer}}}>残り時間<span id="js-countdown" >-- : --</span></div>
					</div>
				</div>
			</main>
		</div>
		
		<audio src="../beep.mp3" id="js-start-beep"></audio>
<audio src="../chime.mp3" id="js-end-beep"></audio>

		<div class="alertbox stoppage">
			<div class="bg"></div>
			<div class="message">
				<p class="txt">試験を停止しました。<br>試験に戻るにはパスワードを入力して下さい。<span style="color:red" id="js-rerecord-msg"></span></p>
				<form>
					<input type="password" id="stopPassWord" value="" placeholder="パスワードを入力してください。"><br>
					<p class="passerror">パスワードが違います。</p>
					<div class="btnwrap"  >
 						<div class="buttonexit buttonexit-l ok" style="margin-top:-300px;"><input type="button" value="OK" id="js-ret-pause"></div>
 						
					</div>
				</form>
			</div>
		</div>
		
		<div id="recordingVolumeLevelError" class="alertbox volError">
			<div class="bg"></div>
			<div class="errMessage"  style="width:600px;height:375px">
				<div id="recordLevelMsg" style="margin-top:-55px;">
					<p class="txt" style="margin-bottom:10px">
						吹き込まれた音声が小さいようです。
					</p>
					<p class="txt" style="margin-bottom:10px">
						■ 解答したいのに、この画面が出た場合<br>
						手を上げて試験監督者を呼び、<br>
						「この問題の解答を録音したいです」と伝えてください。
					</p>
					<p class="txt" style="margin-bottom:10px">
						■ 解答せずに、次の問題に進みたい場合<br>
						「次へ」を押してください。次の問題に進みます。
					</p>
					<p class="txt">
						※注意：「次へ」を押してスキップした問題には戻れません。
					</p>
				</div>
				<div class="btnwrap">
					<div class="button btn-l errorNext" style="margin-top:-225px;"><a href="" id="volumeLevelErrorOk"><span>次へ</span></a></div>
				</div>
			</div>
		</div>
		<div class="alertbox error">
			<div class="bg"></div>
			<div class="message">
				<p class="txt">エラーが発生しました。<br>試験監督者を呼んでください。</p>
				<div id="reloadButtonDiv" class="buttonreload btnreload-l reload"><a href="" id="altErr" name="altErr"><span>RELOAD</span></a></div>
				<div id="exitButtonDiv" class="buttonexit buttonexit-l exit"><a href="" id="altExit" name="altExit"><span>EXIT</span></a></div>
				<p class="code">（Error code：<span id="errorCode"></span>）</p>
			</div>
		</div> 
		
		<div id="infoLevelError" class="alertbox error" style="visibility: hidden;">
			<div class="bg"></div>
			<div class="message">
				<p class="txt" id="questionMsg"></p>
				<!-- <div id="reloadButtonDiv" class="buttonreload btnreload-l reload"><a href="" id="altErr" name="altErr"><span>RELOAD</span></a></div>
				<div id="exitButtonDiv" class="buttonexit buttonexit-l exit"><a href="" id="altExit" name="altExit"><span>EXIT</span></a></div> -->
				<!-- <p class="code">（Error code：<span id="errorCode"></span>）</p> -->
			</div>
		</div>
		
		
		
<script src="../js/bundle.js"></script>
</body>
</html>
