- ベストアンサー
JavaScript初心者のためのクイズ作成と学習方法
- JavaScript初心者の方にオススメのクイズ作成と学習方法についてご紹介します。自分に当てはまるかどうかを○×形式で答えていき、最後に診断がでるページを作成したい方にぴったりの情報です。
- JavaScriptを学習する上でオススメの勉強法についてもお伝えします。インターネットで独学で勉強している方でも分かりやすく学べるページやコツをご紹介します。
- JavaScriptのクイズ作成においてのサンプルや記述例もご紹介しますので、初心者の方でも理解しやすくなるでしょう。JavaScriptの基礎から応用まで、自分自身が成長を感じながら学べる方法をお伝えします。
- artemis--r
- お礼率92% (52/56)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
ぜんかくくうはくは、はんかくにおきかえて、あたらしめのぶらうざでならうごくよかもよ？ <!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>
その他の回答 (3)
- babu_baboo
- ベストアンサー率51% (268/525)
ほぞんじｓたふぁいるのもじこーどが、utf-8 じゃないからだとおもふ。
お礼
ありがとうございます。 IEのエンコードを確認したら、UTF―8になっていましたが、 日本語自動にすることによって改善しました！ 私の作りたいページというのは質問が1問出て、それに○か×かで答えると 次の質問に進む。。。というようなページですので、教えていただいたものを参考に 勉強させてもらいます！ 当たり前といえば当たり前なのですが、あんな文字の羅列でこんなページになるとは、 すごいですね！ 改めて感激です。 何度もご回答していただいて、本当にありがとうございました。
- nicorus
- ベストアンサー率70% (12/17)
リファレンス的な役目も兼ねていて結構使えるのは http://www.tohoho-web.com/www.htm ですかね。最新のブラウザには対応していない箇所がありますが 基礎固めにはもってこいです。
お礼
回答ありがとうございます。 javascriptのページのJavaScript の基本文法のあたりからだんだん「？？？」って 感じになってきました・・・ 分からない事が分からないくらいのレベルなものですみません。 このページを参考に、もう少し勉強してみます。 また、他にも分かりやすそうなページがあればよろしくお願いします。
- dscripty
- ベストアンサー率51% (166/325)
とりあえず、マニュアル的な文書。 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』のところ。
お礼
回答ありがとうございます。 基礎出来てないんですかね？・・・って回答者様に聞いても、分からないですよね。 すみません(＾＾；) HTMLのみ使うWebページなら分かります。 CSSもインターネットのページを検索しながら、使おうと思えば使える・・・ というくらいのレベルだと思います。 でもjavascriptが入ってくると混乱してきます。 なので、多分javascriptが分からないんだと自分では思っているのです。 Academic HTML 4.0を一通り拝見させていただきましたが、 全く理解が出来ない！というようなページはなさそうでした。 教えていただいた、Core JavaScript 1.5 ガイド - MDN Docsも参考に勉強させていただきます！ また分かりやすそうなページがあれば教えていただけると嬉しいです。 ありがとうございました。
お礼
お礼が遅くなってしまってすみません。 わざわざありがとうございます！ こういうサンプルがあると、勉強させていただくのにとても 参考になります。 IE9で見てみましたが、なぜか文字化けしてしまいました(笑) 何か私がまちがえてしまったのでしょうか（＾＾；） ありがとうございました。