JavaScriptで英検準2級の雰囲気を知るための音声サイト

JavaScriptで英検準2級の雰囲気を知るための音声サイト JavaScript
2019.02.16

2次試験の流れと雰囲気が分かればいいかなあ、と考えてボタンを押すと英検の面接管からの指示を聞くことが出来るサイトを作った。

[btn target=”_blank” href=”https://torisky.com/public/eiken_pre2/” class=”raised red-bc strong”]英検準2級の面接管からの指示を聞くことが出来るサイト[/btn]

参考にしたのは、以下の旺文社のサイト。

[sanko href=”https://eigonotomo.com/eiken/jun2kyuu_sp” target=”_blank” title=”英検準2級面接の問題と流れ・合格のコツ・使えるフレーズ” site=”英語の友”]

音源は、Google翻訳の音声をMP3にして保存できるサイトSound of Textを使った。

ただし、途中のパッセージについての質問や、イラストについての質問、受験者自身に対する質問は省いた。（毎回違うため）

ちなみに、わたしは英検3級しか持っていない。（確か中学校の時に取得した）
英検には2次試験があって、面接官と1対1で英会話による質疑応答があるのだ。

ところで、母国語じゃない面接って緊張しますよね。（母国語の面接も十分緊張するけど）
受験者の皆さん、合格目指して頑張って下さい！

一応プログラムは以下の通り。

HTML部分

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,userscalable=no">
	<link rel="stylesheet" href="style.css">
	<script src="main.js" type="text/javascript"></script>
	<title>英検準2級 2次試験流れ</title>
</head>
<body>
	<h1>英検準2級 2次試験流れ</h1>
	<div id="form">
		<button id="e1" type="button">入室前</button>
		<button id="e2" type="button">入室後1</button>
		<button id="e3" type="button">入室後2</button>
		<button id="e4" type="button">着席</button>
		<button id="e5" type="button">挨拶1</button>
		<button id="e6" type="button">挨拶2</button>
		<button id="e7" type="button">挨拶3</button>
		<button id="e8" type="button">挨拶4</button>
		<button id="e9" type="button">問題カード受け取り</button>
		<button id="e10" type="button">パッセージの黙読</button>
		<button id="e11" type="button">パッセージの音読</button>
		<p>パッセージについての質問</p>
		<p>イラストについての質問1</p>
		<p>イラストについての質問2</p>
		<p>受験者自身の意見などを問う質問1</p>
		<p>受験者自身の意見などを問う質問2</p>
		<button id="e12" type="button">問題カードを裏返す</button>
		<button id="e13" type="button">問題カードを試験管に返却</button>
		<button id="e14" type="button">退室</button>
	</div>

</body>
</html>

JavaScript部分

main.js

/* main.js */

// DOM取得用
var e1, e2, e3, e4, e5, e6, e7, e8, e9, e10, e11, e12, e13, e14;		// PLAYボタン

// Audio要素
var audio = [];

// 音声ファイル名
var sounds = [
	"please_come_in.mp3",
	"hello.mp3",
	"can_i_have_your_card_please.mp3",
	"please_sit_down.mp3",
	"good_morning.mp3",
	"my_name_is maria_sumner_mai_i_have_your_name_plaese.mp3",
	"this_is_the_grade_pre_2nd_test_ok.mp3",
	"how_are_you_today.mp3",
	"ok_lets_start_the_test_this_is_your_card.mp3",
	"first_please_read_the_passage_silently_for_20_seconds.mp3",
	"now_please_read_it aloud.mp3",
	"please_turn_over_the_card_and_put_it_down.mp3",
	"ok_this_is_the_end_of_test_may_i_have_your_card_back_please.mp3",
	"you_may_go_now_good_bye.mp3"
];

/*
 * 音声ファイルの再生関数
 */
function playSound(no){
	audio[no].play();
}

/*
 * 起動時の処理
 */
window.onload = function(){
	// DOM要素取得
	e1 = document.getElementById("e1");
	e2 = document.getElementById("e2");
	e3 = document.getElementById("e3");
	e4 = document.getElementById("e4");
	e5 = document.getElementById("e5");
	e6 = document.getElementById("e6");
	e7 = document.getElementById("e7");
	e8 = document.getElementById("e8");
	e9 = document.getElementById("e9");
	e10 = document.getElementById("e10");
	e11 = document.getElementById("e11");
	e12 = document.getElementById("e12");
	e13 = document.getElementById("e13");
	e14 = document.getElementById("e14");

	// ボタンイベント設定
	e1.addEventListener("click", function(){ playSound(0)}, false);
	e2.addEventListener("click", function(){ playSound(1)}, false);
	e3.addEventListener("click", function(){ playSound(2)}, false);
	e4.addEventListener("click", function(){ playSound(3)}, false);
	e5.addEventListener("click", function(){ playSound(4)}, false);
	e6.addEventListener("click", function(){ playSound(5)}, false);
	e7.addEventListener("click", function(){ playSound(6)}, false);
	e8.addEventListener("click", function(){ playSound(7)}, false);
	e9.addEventListener("click", function(){ playSound(8)}, false);
	e10.addEventListener("click", function(){ playSound(9)}, false);
	e11.addEventListener("click", function(){ playSound(10)}, false);
	e12.addEventListener("click", function(){ playSound(11)}, false);
	e13.addEventListener("click", function(){ playSound(12)}, false);
	e14.addEventListener("click", function(){ playSound(13)}, false);

	// Audio要素の設定
	for(let i in sounds){
		let sound = new Audio();
		sound.src = sounds[i];		// 再生ファイル名設定
		sound.preload = "auto";	// データを自動取得
		audio.push(sound);
	}
}

CSS部分

style.css

/* style.css */
*{
	margin: 0;
	padding: 0;
}
body, p, form, ul, ol, input, button{
	font-size: 16pt;
	font-family: Futura, Helvetica, '游ゴシック', 'メイリオ', Osaka;
}
body{
	margin: 10px;
}
h1{
	font-size: 18pt;
	text-align: center;
}
form{
	padding: 0.5em 1em;
}

/*
	PLAYボタン
*/
button{
	-webkit-appearance: none;
}
p, button
{
	width: 100%;
	margin-top: 5px;
	border: solid 1px #555;
	border-radius: 3px;
}

/*
	PLAYボタン
		マウスをのせたとき
*/
button:active
{
	background-color: pink;
}
p{
	text-align: center;
	color: #aaa;
	border: solid 1px #aaa;
}

コメント

タイトルとURLをコピーしました