英語学習サイト、基本機能実装完了

この記事は約2分で読めます。

英語学習サイト、基本機能実装完了

英語学習サイト、大まかな仕組みは1週間前にできた。
しかし、細かい修正が重なり、その先が思ったよりも時間がかかってしまった。

1日1分 かんたんTOEIC リスニング対策部
TOEICリスニングのコツ教えます

ヒント機能をつけた

You should take care of your personal information on the Internet.

ディクテーション画面

ディクテーションという、英語の音声を聞き取って、文字として書き起こす訓練。
これができると、正しく聞き取りができているかどうかチェックできるので、リスニング能力が飛躍的に向上する。

「You should ~~~ personal ~~~ Internet.」
みたいに、断片的に単語が聞き取れた時に、
文頭の「you should」
文末の「internet」
は迷わず入力できる。

しかし、文中の「personal」については、どの入力欄に書けばいいのか分からないことに気づいた。
せっかく聞き取れたのに、「personal」が何番目の単語なのか分からない。

ということで、「ヒント」ボタンを押すと各単語の頭文字がうっすら表示されるように機能を追加。

上記の画像でいうと、「p7777777」という部分から、7番目の単語は頭文字が「p」だと分かるので、「personal」が聞き取れたらここに入力すればいいと分かる。

1日1分かんたんTOEICリスニング対策部:単語数=11 その1
「リスニングセクション Part2」を想定。「リスニングセクション Part2」では、英語の音声で「質問」が1つ、「回答」が3つ流れます。「回答」の内1つだけが「質問」に呼応するもの、残りの2つはダミーです。対応する「回答」を選べば正解です

「成績をつぶやく」ボタン実装

<a href=’https://twitter.com/share?ref_src=twsrc%5Etfw&text=あいうえお‘>成績をつぶやく</a>

HTMLで上記のような<a>タグを使うと、下記のようなリンクができます。

成績をつぶやく

hrefの「https://twitter.com/share」の部分の効果でツイート画面が開きます。
ref_src=twsrc%5Etfw」の部分の効果で、ツイートの本文にURLが自動的に入ります。
text=あいうえお」の部分の効果で、ツイートの本文に「あいうえお」という文字が入ります。

「あいうえお」の部分には

「再生回数: 2
スコア: 100点
あなたの英語力は「大学生級」です」

みたいな文字がその場の状況の応じて入るようにJavascriptで実装。

また、「成績をつぶやく」がリンクテキストではなく、ボタンっぽくなるようにカスタマイズ。

コメント

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