JavaScript初心者のためのクイズ作成と学習方法

2011/08/25 23:09

このQ&Aのポイント

JavaScript初心者の方にオススメのクイズ作成と学習方法についてご紹介します。自分に当てはまるかどうかを○×形式で答えていき、最後に診断がでるページを作成したい方にぴったりの情報です。
JavaScriptを学習する上でオススメの勉強法についてもお伝えします。インターネットで独学で勉強している方でも分かりやすく学べるページやコツをご紹介します。
JavaScriptのクイズ作成においてのサンプルや記述例もご紹介しますので、初心者の方でも理解しやすくなるでしょう。JavaScriptの基礎から応用まで、自分自身が成長を感じながら学べる方法をお伝えします。

artemis--r
お礼率92% (52/56)

JavaScript
回答数4
ありがとう数4

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

babu_baboo
ベストアンサー率51% (268/525)

2011/08/27 04:37 回答No.3

ぜんかくくうはくは、はんかくにおきかえて、あたらしめのぶらうざでならうごくよかもよ？ <!DOCTYPE html> <html lang="ja"> 　<meta charset="utf-8" /> 　<title></title> <body> <h1>Test</h1> <form onsubmit="return false"> 　<ol> 　　<li> 　　　<dl> 　　　　<dt> 　　　　　漢字を使うべきだ　　　　<dd> 　　　　　<input type="radio" name="q0" value="1">Yes, 　　　　　<input type="radio" name="q0" value="0">No 　　　</dl> 　　<li> 　　　<dl> 　　　　<dt> 　　　　　カタカナも使うべきだ　　　　<dd> 　　　　　<input type="radio" name="q1" value="1">Yes, 　　　　　<input type="radio" name="q1" value="0">No 　　　</dl> 　　　　　<li> 　　　<dl> 　　　　<dt> 　　　　　平仮名も使うべきだ　　　　<dd> 　　　　　<input type="radio" name="q2" value="1">Yes, 　　　　　<input type="radio" name="q2" value="0">No 　　　</dl> 　　　　　<li> 　　　<dl> 　　　　<dt> 　　　　　今度から、ローマ字表記で書くべきだ　　　　<dd> 　　　　　<input type="radio" name="q3" value="1">Yes, 　　　　　<input type="radio" name="q3" value="0">No 　　　</dl> 　</ol> 　　<p> 　　<input type="button" value="test" onclick="hoge(event)"> </form> <script> 　function slice (es) { return Array.prototype.slice.call (es, 0); } 　function text (e) { return e.textContent; } 　function value (e) { return e.value; } 　function map (es, func) { return slice (es).map (func); } 　　function hoge (event) { 　　var e = event.target; 　　var form = e.form; 　　var doc = form.ownerDocument; 　　var tmp; 　　var rst; 　　　　tmp = form.querySelectorAll ('dt'); // 'ol > li > dl > dt' 　　alert ('質問数は ' + slice (tmp).length + ' 個あり、その内容は以下。\n' + 　　　map (tmp, text).join ('\n')); 　　　　tmp = form.querySelectorAll ('dd > input[type="radio"]'); 　　alert ('選択数は ' + slice (tmp).length + ' 個あり、その内容は以下。\n' + 　　　map (tmp, value).join ('\n')); 　　tmp = form.querySelectorAll ('dd > input[type="radio"]:checked'); 　　alert ('選択されたのは ' + slice (tmp).length + ' 個あり、その内容は以下。\n' + 　　　map (tmp, value).join ('\n')); 　　tmp = form.querySelectorAll ('dd > input[type="radio"][value="0"]:checked'); 　　alert ('0 が選択されたのは ' + slice (tmp).length + ' 個あり、その内容は以下。\n' + 　　　map (tmp, value).join ('\n')); 　　tmp = form.querySelectorAll ('ol > li:nth-of-type(2) > dl > dd > input[type="radio"]:checked'); 　　alert ('２番目の回答は、' + slice (tmp).length + ' 個あり、その内容は以下。\n' + 　　　map (tmp, value).join ('\n')); 　} </script>

質問者

お礼 2011/08/29 12:19

お礼が遅くなってしまってすみません。わざわざありがとうございます！こういうサンプルがあると、勉強させていただくのにとても参考になります。 IE9で見てみましたが、なぜか文字化けしてしまいました(笑) 何か私がまちがえてしまったのでしょうか（＾＾；）ありがとうございました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (3)

babu_baboo
ベストアンサー率51% (268/525)

2011/08/29 14:00 回答No.4

ほぞんじｓたふぁいるのもじこーどが、utf-8 じゃないからだとおもふ。

質問者

お礼 2011/08/29 15:52

ありがとうございます。 IEのエンコードを確認したら、UTF―8になっていましたが、日本語自動にすることによって改善しました！私の作りたいページというのは質問が1問出て、それに○か×かで答えると次の質問に進む。。。というようなページですので、教えていただいたものを参考に勉強させてもらいます！当たり前といえば当たり前なのですが、あんな文字の羅列でこんなページになるとは、すごいですね！改めて感激です。何度もご回答していただいて、本当にありがとうございました。

ログインすると、全ての回答が全文表示されます。

nicorus
ベストアンサー率70% (12/17)

2011/08/26 11:47 回答No.2

リファレンス的な役目も兼ねていて結構使えるのは http://www.tohoho-web.com/www.htm ですかね。最新のブラウザには対応していない箇所がありますが基礎固めにはもってこいです。

質問者

お礼 2011/08/27 00:24

回答ありがとうございます。 javascriptのページのJavaScript の基本文法のあたりからだんだん「？？？」って感じになってきました・・・分からない事が分からないくらいのレベルなものですみません。このページを参考に、もう少し勉強してみます。また、他にも分かりやすそうなページがあればよろしくお願いします。

ログインすると、全ての回答が全文表示されます。

dscripty
ベストアンサー率51% (166/325)

2011/08/26 10:50 回答No.1

とりあえず、マニュアル的な文書。 Core JavaScript 1.5 ガイド - MDN Docs → https://developer.mozilla.org/ja/JavaScript/Guide でも、 HTML の基礎ができているなら、質問の中に JavaScript 以外の HTML のコードが書かれていてもよさそうだけど、そうじゃないみたいだから、もう少し HTML の基礎を固めたほうがいいかも？『Academic HTML—HTML, XHTML and CSS Tutorials』 → http://www.tg.rim.or.jp/~hexane/ach/ の『Academic HTML 4.0』のところ。

質問者

お礼 2011/08/27 00:05

回答ありがとうございます。基礎出来てないんですかね？・・・って回答者様に聞いても、分からないですよね。すみません(＾＾；) HTMLのみ使うWebページなら分かります。 CSSもインターネットのページを検索しながら、使おうと思えば使える・・・というくらいのレベルだと思います。でもjavascriptが入ってくると混乱してきます。なので、多分javascriptが分からないんだと自分では思っているのです。 Academic HTML 4.0を一通り拝見させていただきましたが、全く理解が出来ない！というようなページはなさそうでした。教えていただいた、Core JavaScript 1.5 ガイド - MDN Docsも参考に勉強させていただきます！また分かりやすそうなページがあれば教えていただけると嬉しいです。ありがとうございました。

ログインすると、全ての回答が全文表示されます。