Writing Stationを作りました!【TOEFL iBT Writing Section練習サイト】

2019年4月6日2019年5月1日

今回はTOEFL iBTのライティングセクションの練習サイトを公開したので、それの紹介と技術的なメモを残します。

Contents

1. Writing Stationとは
2. 使い方
3. 技術的なこと

Writing Stationとは

TOEFLにはWritingのセクションがあります。カウントダウンを見ながら、制限時間内に指定された文字数の英文を書きます。自分も留学の為に一年ほど前TOEFLの勉強をしていました。このサイトはその時に個人的に作ったモノをベースにしています。

このサイトは本番の英文を書く環境を再現しています。使うことで本番に向けて緊張感をもって練習をすることができます。アクセスは下のリンクからできます。

Writing Station.com

This is a system to improve your writing skill for TOEFL®.

https://writing-station.com/

使い方

使い方はこちらの動画をみてもらえれば分かると思います。基本的にはこの流れです。

「set」で時間を選択
「start」で開始、下の入力スペースで入力
「save」で書き終わったものを自分のコンピュータに保存

他にもこれは本番のテストにはありませんが、練習用としてスペルチェック機能もあります。これはOSとブラウザに依存するので使っている環境によっては動作しないかもしれません。

「hide」は残り時間の表示を隠すことができます。これは本番のテストにもあります。時間が気になって集中できない方は活用してみてください。

技術的なこと

これは静的なサイトです。ユーザーの入力データを取得したりはしません。HTML+CSS+JavaScrptで構成されています。下でソースコードは公開しておきます。これを使ってのサイトの複製等はご遠慮ください。

GoogleのサービスであるFirebaseでホスティングしています。無料で簡単にホスティングできました。Firebaseの使い方はドットインストールのレッスンで学びました。

学んでいる途中で気づいたのですが、サイトのホスティングサービスを特定するのに404ページ（アクセスエラーページ）を表示させるのが有効ですね。例えばFirebaseの場合404ページはデフォルトでこんな感じになります。

これが出てきたらFirebaseだと分かります。これが分かったところで何ができるのか分かりませんが、バレないようにした方がいいのかは疑問です。

このような構成でサイトを運営していくのでかかったお金は年間ドメイン代1400円です。サーバーは0円です。無料だとGoogleアカウント一つにつき一つしかサイトをホスティングできませんが、これで簡単なサイトを量産できるようになりました。低価格でサイトを運営するのに良い構成だと思います。

以下ソースコードです。

<div>
<div><!DOCTYPE html></div>
<div><html lang="en">

</div>
<div><head>

</div>
<div><metacharset="UTF-8"></div>
<div><metahttp-equiv="X-UA-Compatible"content="IE=edge">

</div>
<div><metaname="viewport"content="width=device-width,initial-scale=1">

</div>
<div><metaname="description"content="This is a system to improve your writing skill for TOEFL&reg;."></div>
<div><title>Writing Station.com</title>

</div>
<div><linkrel="shortcut icon"href="favicon.ico">

</div>
<div><linkhref="https://fonts.googleapis.com/css?family=Fira+Mono&text=Writing Station.com"rel="stylesheet"></div>
<div><linkrel="stylesheet"href="css/styles.css">

</div>
<div></head>

</div>
<div><body></div>
<div><dialogid="modal">

</div>
<div><h3class="modal-header">Please set the tiemer.</h3>

</div>
<div><footerclass="modal-footer">

</div>
<div><buttonid="set30">30min.</button></div>
<div><buttonid="set25">25min.</button>

</div>
<div><buttonid="set20">20min.</button>

</div>
<div></footer>

</div>
<div><buttonid="close"class="close">&times;</button></div>
<div></dialog>

</div>
<div><header>

</div>
<div><h1style="margin-left: 4%">Writing Station.com</h1>

</div>
<div><ul>

</div>
<div><listyle="color:#333">

</div>
<div>This is a website to improve your writing skill for <span>TOEFL</span>.

</div>
<div></li></div>
<div><divstyle="float: right;margin-right: 4%">

</div>
<div><li>

</div>
<div><label>

</div>
<div><inputtype="checkbox"id="checkbox">spell check</label>

</div>
<div></li>

</div>
<div><li>

</div>
<div><buttonclass="btn"id="set">set</button>

</div>
<div></li>

</div>
<div><li>

</div>
<div><buttonclass="btn"id="start">start</button>

</div>
<div></li>

</div>
<div><li>

</div>
<div><buttonclass="btn"id="hide">hide</button>

</div>
<div></li>

</div>
<div><li>

</div>
<div>Time

</div>
<div><spanid="timer">00:00</span>

</div>
<div></li>

</div>
<div></div>

</div>
<div></ul></div>
<div></div>
<div><hr>

</div>
<div></header>

</div>
<div></div>
<div><sectionstyle="text-align: center">

</div>
<div><textareaid="essay"rows="20"cols="72"placeholder="Your essay is here."oncopy="alert('Copying is not allowed.'); returnfalse"></textarea></div>
<div></section>

</div>
<div></div>
<div><footer>

</div>
<div><pstyle="text-align: right; margin-right: 4%">

</div>
<div><buttonid="save"class="btn"style="margin: 10px">save</button>

</div>
<div><!-- <button id="cut" class="btn" style="margin: 10px">cut</button> -->

</div>
<div><spanstyle="background-color: white"><spanid="wordslabel">0</span> words</span>

</div>
<div></p>

</div>
<div></div>
<div><nav>

</div>
<div><ul>

</div>
<div><li>

</div>
<div><ahref="readme.html"target="_blank">Readme</a>

</div>
<div></li>

</div>
<div><li>

</div>
<div><ahref="mailto:contact@writing-station.com"target="_blank">Contact me</a>

</div>
<div></li>

</div>
<div></ul>

</div>
<div></nav>

</div>
<div></footer>

</div>
<div></div>
<div><aid='DL_link'></a>

</div>
<div><scriptsrc="js/main.js"></script>

</div>
<div></body></div>
<div></html>

</div>
</div>

<span style="font-family:Meiryo,-apple-system,BlinkMacSystemFont,'.SFNSDisplay-Regular','HiraginoKakuGothicPro','YuGothic','MSPGothic','SegoeUI',Verdana,Helvetica,Arial,sans-serif; font-size:1.4rem;">dialog {</span>
<div>
<div>padding: 0;

</div>
<div>border: 0;

</div>
<div>border-radius: 5px;</div>
<div>box-shadow: 001emblack;</div>
<div>}</div>
<div>dialog + .backdrop {</div>
<div>position: fixed;

</div>
<div>top: 0;

</div>
<div>right: 0;

</div>
<div>bottom: 0;

</div>
<div>left: 0;

</div>
<div>background-color: rgba(0, 0, 0, 0.4);

</div>
<div>}</div>
<div>dialog[open] {</div>
<div>animation: slide-up 0.4sease-out;

</div>
<div>}

</div>
<div>/* 古いブラウザ用 */

</div>
<div>dialog {

</div>
<div>display: none;

</div>
<div>position: absolute;</div>
<div>margin: 0auto; /* should center it, but not working in Safari */

</div>
<div>max-width: 80vw;

</div>
<div>background-color: white;

</div>
<div>}

</div>
<div>dialog[open] {

</div>
<div>display: block;</div>
<div>}

</div>
<div>.close {

</div>
<div>position: absolute;

</div>
<div>top: 0.2em;

</div>
<div>right: 0.2em;

</div>
<div>padding: 0.3em;

</div>
<div>line-height: 0.6;</div>
<div>background-color: transparent;</div>
<div>border: 0;</div>
<div>font-size: 2em;</div>
<div>}</div>
<div>.close:focus{

</div>
<div>outline: none;

</div>
<div>}</div>
<div>.modal-header,</div>
<div>.modal-body,</div>
<div>.modal-footer {

</div>
<div>padding: 1em;

</div>
<div>}

</div>
<div></div>
<div>body {</div>
<div>/* background-image: url("../images/background.jpg") ; */</div>
<div>background-position: centercenter;</div>
<div>font-family: Verdana, sans-serif;

</div>
<div>font-size: 16px;</div>
<div>background: #e0e0e0;</div>
<div>}</div>
<div>h1{</div>
<div>font-family: 'Fira Mono', monospace;</div>
<div>padding: 0.5em0;/*上下の余白*/</div>
<div>border-top: solid3px#364e96;/*上線*/</div>
<div>border-bottom: solid3px#364e96;/*下線*/

</div>
<div>/* color: #000; */</div>
<div>color: white;</div>
<div>text-shadow: black2px2px0;</div>
<div>/* -webkit-text-stroke-width: 2px;</div>
<div>-webkit-text-stroke-color: #000; */</div>
<div>}</div>
<div>textarea{</div>
<div>margin: 4%;

</div>
<div>width: 90%;

</div>
<div>height: 350px;</div>
<div>padding: 1%;</div>
<div>border-radius: 5px;</div>
<div>font-size: 16px;</div>
<div>line-height: 1.5;</div>
<div>}</div>
<div>textarea:focus{

</div>
<div>outline: none;

</div>
<div>}</div>
<div>span{</div>
<div>font-weight: bold;</div>
<div>}</div>
<div>#timer{</div>
<div>text-shadow: white1px1px0;

</div>
<div>}</div>
<div>.btn{</div>
<div>font-size: 14px;</div>
<div>display: inline-block;</div>
<div>width: 77px;</div>
<div>background: #00aaff;

</div>
<div>padding: 5px;

</div>
<div>color: #fff;</div>
<div>border-radius: 5px;</div>
<div>text-align: center;</div>
<div>cursor: pointer;

</div>
<div>box-shadow: 04px0#0088cc;

</div>
<div>}</div>
<div>.inactive{

</div>
<div>opacity: 0.6;</div>
<div>}</div>
<div>a:link{color: white}

</div>
<div>a:visited{color: white}

</div>
<div>a:hover{color: cadetblue}</div>
<div>ul{list-style: none;margin-left: 4%;padding-left: 0}

</div>
<div>li{display: inline;padding-right: 10px}</div>
</div>

IT, 日常

Posted by shu

留学から日本の大学に合格した一年【日本一変な浪人生】

2カ月間の受験勉強でやったこと【英語】