平成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++;
合計得点の表示(x/6)
1問目~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+MySQL 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
Top Related