平成25年度 卒業研究 卒業審査

所属：中島研究室 指導教員：中島 俊男 発表者：宮城いちこ

目次

• 研究動機

• 最終までの取り組み

• 実行画面の説明

• 最終までに加わった機能

• 今後の課題

• 開発環境

• 参考文献参考サイト

• 実行

研究動機

『小中学生のための英語力を伸ばす

英語学習サイトを作りたい！』

英単語並び替えサイトの開発

例） 私は、あなたが好きなものを知らない I don’t know what you like.

問題 like / I don’t know / what /you 解答 I don’t know what you like.

英語を並び替える力を強化し、それをスマートフォンで行える

サイトの構築する

並べ替え 正誤判定

最終までの取り組み

• デザインの改良

• ログイン画面の追加

• 日本語文字化けの修正

• ランダム表示

• やり直し機能

• 正解数の表示

• ボタンサイズの変更

実行画面の流れ

ログイン画面

スタート画面

学年別学習画面

単元別学習画面

演習問題

結果の表示

実行画面

ボタンサイズの変更

問題数が多くなると スクロールしなければ

いけない

それぞれのボタンに

data-inline=“true”を設定

↓

文字のサイズにあったボタンの大きさに変更

日本語文字化けの処理

日本語が文字化けをしてしまう

やり直し機能の作成

$(":input[name=del3]").click(function(){

$(":input[name='a3']").val("");

$(":input[name='b3']").val("");

$(":input[name='c3']").val("");

$(":input[name='d3']").val("");

ページの切り替え

JqueryMobileを使えば もっとコンパクトに まとめることができる

Start.php 1st/be/1.php 1st/be/2.php 1st/be/3.php

1st.php

各ページにIDを指定する

ページの切り替え

<div data-role=“page” id=“one” >

<div data-role=“page” id=“two” >

<スクリプト>

var count=0;

$(document).delegate('#one',

'pageshow', function(){ var n=0;

・・・・・

}

});

$(document).delegate(‘#two',

'pageshow', function(){ ・・・

idの指定

リンク機能による障害

ボタンが押せない 実行可能

リンク機能

<a href="#two" data-role="button" data-inline="true"

data-ajax="false">NEXT</a>

実行可能

正解数の表示

Count++;

合計得点の表示（ｘ／６）

１問目～6問目

正解→count++;

ランダム表示

<php>

$random=range(0,5);

<script>

value="<?php print $word3[$random] ?>

1ページ1ページは、 指定された値ではなく

ランダムで 表示されるようになった

<問題点> ページすべてが 違う問題を出題することが出来ない！

重複しない乱数

<php>

$random=range(0,5);

shuffle($random);

<script>

value="<?php print $word3[$random[0]] ?>

問題が配列にならび シャッフルされるので ランダム表示が可能に

6ページすべてが 違う問題に！！！

今後の課題

• まとめ画面の追加

• 学習履歴機能の追加

• ログイン機能

• 学年別の教材の充実

開発環境

OS Windows7

使用言語 JavaScript JQueryMobile PHP

参考文献・参考サイト ＜参考文献＞ JQeryMobile スマートフォンアプリ開発 岡本隆 ソフトバンク JavaSclipt& Jqeryレッスンブック 大津真 ソシム PHP+MｙSQL Webシステム構築 星野務 技術評論社 ＜参考サイト＞ 中学校英語学習サイト（2013.6） http://english.005net.com/youten.htm Jquerymobile Framework http://dev.screw-axis.com/doc/jquery_mobile/components/forms/text/ Jquerymobile Framework活用() http://tecco.ninja-x.jp/06input_text.html Phpmyadmin(8.26) http://oshiete.goo.ne.jp/qa/7559697.html Tech(10.25) http://blog.promob.jp/fri/2009/06/php-6.html tagamidaiki.com（11.9） http://tagamidaiki.com/php-random-integer/

デモンストレーション

英語支援サイト 133.37.97.3/jqm/eigo1/start.php