honda0510/StudyEnglish.html

## StudyEnglish.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Study English</title>
    <style>
        #questions {
            display: none;
        }
    </style>
</head>
<body>

    <table id="questions">
        <tr>
            <td>この道をそのまま行ってください</td>
            <td>（例）Go down this street.</td>
        </tr>
        <tr>
            <td>角にある赤いポストが見えるまでまっすぐ歩いてください</td>
            <td>（例）Go straight this street until you see a red post at the corner.</td>
        </tr>
        <tr>
            <td>スーパーマーケットを通り過ぎてください</td>
            <td>（例）Go past a supermarket.</td>
        </tr>
        <tr>
            <td>昭和通りに沿って10分歩いてください</td>
            <td>（例）Go along Showa street for 10mins.</td>
        </tr>
        <tr>
            <td>信号を右へ曲がってください</td>
            <td>（例）Turn right at the traffic light.</td>
        </tr>
        <tr>
            <td>昭和通りを左へ曲がってください</td>
            <td>（例）Turn left on Showa street.</td>
        </tr>
        <tr>
            <td>この通りを5分ほど歩いてください</td>
            <td>（例）Stay on this street about 5 mins.</td>
        </tr>
        <tr>
            <td>橋の下をくぐってください</td>
            <td>（例）Go under the bridge.</td>
        </tr>
        <tr>
            <td>橋を超えてください</td>
            <td>（例）Go over the bridge.</td>
        </tr>
        <tr>
            <td>反対側の道へ渡ってください</td>
            <td>（例）Cross the street.</td>
        </tr>
<!--
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
-->
    </table>

    <div>
        <button id="answer-button">答え</button>
        <button id="next-button">次の問題へ</button>
        <span><span id="rest"></span>/<span id="count"></span></span>
        <div id="question"></div>
        <div id="answer"></div>
    </div>

    <script>
        (function ($) {

            var nextQuestion = function() {
                if (!numbers.length) {
                    for (var i = 0, n = questions.length; i < n; i++) {
                        numbers.push(i);
                    }
                    count.textContent = numbers.length;
                }

                rest.textContent = numbers.length;
                var rand = Math.floor(Math.random() * numbers.length);
                current = numbers.splice(rand, 1);
                question.textContent = questions[current].querySelector(":first-child").textContent;

                answer.textContent = "";
                answerButton.focus();
            };

            var showAnswer = function () {
                answer.textContent = questions[current].querySelector(":last-child").textContent;
                nextButton.focus();
            };

            var numbers = [];
            var current = 0;
            var questions = $("questions").querySelectorAll("tr");
            var question = $("question");
            var answer = $("answer");
            var answerButton = $("answer-button");
            var nextButton = $("next-button");
            var rest = $("rest");
            var count = $("count");

            answerButton.addEventListener("click", showAnswer, false);
            nextButton.addEventListener("click", nextQuestion, false);

            nextQuestion();

        }) ( function (id) { return document.getElementById(id); } );
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>Study English</title>
	<style>
	#questions {
	display: none;
	}
	</style>
	</head>
	<body>

	<table id="questions">
	<tr>
	<td>この道をそのまま行ってください</td>
	<td>（例）Go down this street.</td>
	</tr>
	<tr>
	<td>角にある赤いポストが見えるまでまっすぐ歩いてください</td>
	<td>（例）Go straight this street until you see a red post at the corner.</td>
	</tr>
	<tr>
	<td>スーパーマーケットを通り過ぎてください</td>
	<td>（例）Go past a supermarket.</td>
	</tr>
	<tr>
	<td>昭和通りに沿って10分歩いてください</td>
	<td>（例）Go along Showa street for 10mins.</td>
	</tr>
	<tr>
	<td>信号を右へ曲がってください</td>
	<td>（例）Turn right at the traffic light.</td>
	</tr>
	<tr>
	<td>昭和通りを左へ曲がってください</td>
	<td>（例）Turn left on Showa street.</td>
	</tr>
	<tr>
	<td>この通りを5分ほど歩いてください</td>
	<td>（例）Stay on this street about 5 mins.</td>
	</tr>
	<tr>
	<td>橋の下をくぐってください</td>
	<td>（例）Go under the bridge.</td>
	</tr>
	<tr>
	<td>橋を超えてください</td>
	<td>（例）Go over the bridge.</td>
	</tr>
	<tr>
	<td>反対側の道へ渡ってください</td>
	<td>（例）Cross the street.</td>
	</tr>
	<!--
	<tr>
	<td></td>
	<td></td>
	</tr>
	<tr>
	<td></td>
	<td></td>
	</tr>
	<tr>
	<td></td>
	<td></td>
	</tr>
	<tr>
	<td></td>
	<td></td>
	</tr>
	-->
	</table>

	<div>
	<button id="answer-button">答え</button>
	<button id="next-button">次の問題へ</button>
	<span><span id="rest"></span>/<span id="count"></span></span>
	<div id="question"></div>
	<div id="answer"></div>
	</div>

	<script>
	(function ($) {

	var nextQuestion = function() {
	if (!numbers.length) {
	for (var i = 0, n = questions.length; i < n; i++) {
	numbers.push(i);
	}
	count.textContent = numbers.length;
	}

	rest.textContent = numbers.length;
	var rand = Math.floor(Math.random() * numbers.length);
	current = numbers.splice(rand, 1);
	question.textContent = questions[current].querySelector(":first-child").textContent;

	answer.textContent = "";
	answerButton.focus();
	};

	var showAnswer = function () {
	answer.textContent = questions[current].querySelector(":last-child").textContent;
	nextButton.focus();
	};

	var numbers = [];
	var current = 0;
	var questions = $("questions").querySelectorAll("tr");
	var question = $("question");
	var answer = $("answer");
	var answerButton = $("answer-button");
	var nextButton = $("next-button");
	var rest = $("rest");
	var count = $("count");

	answerButton.addEventListener("click", showAnswer, false);
	nextButton.addEventListener("click", nextQuestion, false);

	nextQuestion();

	}) ( function (id) { return document.getElementById(id); } );
	</script>
	</body>
	</html>