この記事では，スマートフォンに対応した語句整序(並べ替え)問題に取り組むwebアプリを開発します。JavaScriptの初学者のために，なるべく丁寧に説明していきます。
コードの大部分は以前の記事と重複するので，そちらも参照するとより理解が深まるでしょう。
【教師オリジナルアプリを作ろう】英文法問題アプリの作成方法をはじめから（JavaScript）
【教師オリジナルアプリを作ろう】英文法アプリの見た目をアプリらしく／スマホに対応させる(JavaScript)
【教師オリジナルアプリを作ろう】オリジナルの英文を聞かせる音読アプリの作り方をはじめから(JavaScript)
サンプルページ
実際に動作するサンプルページを公開しています。
https://mmsankosho.com/fasgram/sorting.html
このページはスマートフォンからアクセスして，指でタップする感覚を体験することをお勧めします。ゲーム感覚で操作しながら並べ替え問題にチャレンジできる最も基本的なプログラムを作成します。
ヘッダー
コードの解説に進みます。ヘッダー部の詳細は以前の記事を参考にするとよいでしょう。大事な点は，スマートフォンで文字の大きさを正しく表示するためにビューポートを設定することと，JavaScriptのコードを省略するためのjquery，画面にエフェクトを加えるためのjquery UIを用いている点です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>fasgram 英文法トレーニングwebアプリ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./fasgram.css">
</head>また，今回は外部フォントとしてGoogle Fontsを用いています。使用しているフォントはNoto Serifです。Google Fontsは無料で使える多くのフォントを提供しているので，自分の好みに合ったフォントを探してみると良いでしょう。
body部
<body>
<div id="container">
<header><p class="size-5">fasgram 英文法トレーニングwebアプリ<span class="badge">動作サンプル</span></p></header>
<article>
<audio id="mp3-start" src="./mp3/start.mp3"></audio>
<audio id="mp3-correct" src="./mp3/correct.mp3"></audio>
<audio id="mp3-incorrect" src="./mp3/incorrect.mp3"></audio>
<audio id="mp3-cursor" src="./mp3/cursor.mp3"></audio>
<audio id="mp3-cancel" src="./mp3/cancel.mp3"></audio>
<div id="display"></div>
</article>
<footer></footer>
</div>ページの内容は<div id="container"></div>で囲まれた部分に記述していきます。これをブロック要素と言います。ブロック要素とは言い換えれば箱のことであって，ここではcontainerという名前の箱を用意して，その中に表示する内容を格納していくことになります。
コードを見ていくと，#containerの中には，<header></header>，<article></article>，<footer></footer>という3つの箱が格納されています。footerの箱は今回は使用しないので，空になっています。
headerの箱には画面の一番上に表示されるアプリの名前が格納されています。articleの箱の中にはさらにdisplayという箱が格納されています。ここに実際の英文やボタンなどをあとで記述していきます。
articleの箱にはもう一つ，<audio></audio>が記述されています。これは効果音の音声ファイルを読み込む部分です。ここでは音声は読み込むだけで，実際の再生はあとから行うことになります。