【最大10000ポイント】当たる!!質問投稿キャンペーン！

診断サイトの作り方

解決済

  • 質問者：Emeras
  • 質問日時：
  • 回答数：4件

http://kantei.am/13107/

このようなサイトをJavascriptでつくってみたいと思いました。
やり方などが載っているサイトがあれば教えてください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

このQ&Aに関連する最新のQ&A

「診断 サイト」に関するQ&A： 血圧無料診断サイト

さらに表示

「作り方 サイト」に関するQ&A： 動きのあるサイトの作り方がしりたい

A 回答 (4件)

No.4ベストアンサー

  • 回答者： yambejp
  • 回答日時：

大雑把にこんなかんじ


あとは工夫してください。

<script>
function calc(f){
var sum=0;
for(var i=0;i<f.length;i++){
if(f[i].type=="radio" && f[i].checked) sum+=parseInt(f[i].value);
}
f.judge.value=sum;
}
</script>
<form>
Q1.<br>
<input type="radio" name="Q1" id="Q1_1" value="1"><label for="Q1_1">1点</label><br>
<input type="radio" name="Q1" id="Q1_2" value="5"><label for="Q1_2">5点</label><br>
<input type="radio" name="Q1" id="Q1_3" value="10"><label for="Q1_3">10点</label><br>
Q2.<br>
<input type="radio" name="Q2" id="Q2_1" value="1"><label for="Q2_1">1点</label><br>
<input type="radio" name="Q2" id="Q2_2" value="5"><label for="Q2_2">5点</label><br>
<input type="radio" name="Q2" id="Q2_3" value="10"><label for="Q2_3">10点</label><br>
Q3.<br>
<input type="radio" name="Q3" id="Q3_1" value="1"><label for="Q3_1">1点</label><br>
<input type="radio" name="Q3" id="Q3_2" value="5"><label for="Q3_2">5点</label><br>
<input type="radio" name="Q3" id="Q3_3" value="10"><label for="Q3_3">10点</label><br>

<input type="text" name="judge" value="0" >
<input type="button" value="判定" onClick="calc(this.form)">
</form>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
かなり参考になりました。

通報する
お礼日時：2008/02/21 21:13

No.3

  • 回答者： shimix
  • 回答日時：

>やろうとしたのですがsumは宣言されてませんなどと出てきてしまいます。



たしかにJavaScriptにsum()という関数はありません。リファレンスを見てください。

この回答への補足

sumは変数として設定しました
ラジオボタンの位置によって１～3の値をそのsumにたしていき最後にそのsumの値によって診断結果がわかるというものを作りたいのです

どの位置にどのような関数を置いたらいいのかなどというアドバイスをお願いします。

補足日時：2008/02/21 15:11
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： yambejp
  • 回答日時：

送信さえしなければ、formのエレメントをさらっと見て


点数かなにかをたし、結果を表記すればよいでしょう。
まずはやってみてわからないところをきいてみてください

この回答への補足

全体的な流れ？などがうまくわからないんですが・・・

やろうとしたのですがsumは宣言されてませんなどと出てきてしまいます。

補足日時：2008/02/21 13:30
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： shimix
  • 回答日時：

JavaScriptだとかえって面倒だろうなぁ・・と思ってしまいますが、



>Javascriptでつくってみたいと思いました。

JavaScriptと限定されたのはなぜでしょうか？

この回答への補足

JavaScriptは使ったことがあるからです

あとCとHSPなら少しだけやりました

補足日時：2008/02/21 13:26
通報する
    • good
    • 0
    • 件
通報する

このQ&Aに関連する人気のQ&A

「診断 サイト」に関するQ&A： 家計が苦しく、将来が不安です。

さらに表示

「作り方 サイト」に関するQ&A： 大人のウエストポーチの作り方

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するQ&A

関連するカテゴリからQ&Aを探す

専門家回答数ランキング

専門家

※過去一週間分の回答数ランキングです。

Q質問する（無料）

他の専門家の回答をチェック

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q【診断テストの作り方】結果に応じて数字を変動させる

ラジオボタンを使って参考サイトのような診断テストを作りたいと思っています。
【参考サイト】
http://cgi.geocities.jp/socialpsychotan/test/shindan.php

ただ少し違うのが、あらかじめユーザーに

あなたが思う自分自身の人間力は？
「　　　　」点

といったように数値を入力させ、診断結果とユーザー入力の数値を掛け合わせた
点数を表示する仕組みにしたいと考えています。

診断テストは全部で20問程度用意し、それぞれの質問に点数を仕込み
100点～80点ならユーザーが入力した数値×1.5
79点～60点ならユーザーが入力した数値×1.3
といったように表示させたいです。

下記のようなサイトを参考に、
http://jsfiddle.net/Tenderfeel/PFRCQ/
ラジオボタンのチェックで異なる答えを表示することはできるのですが
診断結果により数値を変動させる仕組みがわかりません。

お手数ですがご教授いただけないでしょうか。
よろしくお願いします。

ラジオボタンを使って参考サイトのような診断テストを作りたいと思っています。
【参考サイト】
http://cgi.geocities.jp/socialpsychotan/test/shindan.php

ただ少し違うのが、あらかじめユーザーに

あなたが思う自分自身の人間力は？
「　　　　」点

といったように数値を入力させ、診断結果とユーザー入力の数値を掛け合わせた
点数を表示する仕組みにしたいと考えています。

診断テストは全部で20問程度用意し、それぞれの質問に点数を仕込み
100点～80点ならユーザーが入力した数値×1.5
79...続きを読む

Aベストアンサー

シンプルに作るとこんな感じですかね

<body>

<script>

function getCheckTotal(){
$radio = $(':radio');
var total = 0;

$radio.filter(':checked').map(function(){
total += Number(this.value);
});
return total;
}

function calculate(){
//入力数値を取得
var inputPointString = $("#inputPoint").val();
//文字列で取得しているので数値に変換
var inputPoint = parseInt(inputPointString);
var checkTotal = getCheckTotal();
var calculateTotal = 0;

if(checkTotal >= 80){
calculateTotal = inputPoint* 1.5;
}
if(79 >= checkTotal && checkTotal >= 60){
calculateTotal = inputPoint* 1.3;
}
if(59 >= checkTotal && checkTotal >= 40){
calculateTotal = inputPoint* 1.3;
}
if(39 >= checkTotal){
calculateTotal = inputPoint;
}
if(isNaN(calculateTotal)){
$("#calculateTotal").val("未選択の項目があります");
}
else{
$("#calculateTotal").val(calculateTotal);
}

}

</script>
点数は？<input type="text" id="inputPoint" />
<fieldset>
<legend>質問1</legend>
<label><input type="radio" name="c1" value="10" /> はい</label>
<label><input type="radio" name="c1" value="5" /> どちらでもない</label>
<label><input type="radio" name="c1" value="1" /> いいえ</label>
</fieldset>
<fieldset>
<legend>質問2</legend>
<label><input type="radio" name="c2" value="10" /> はい</label>
<label><input type="radio" name="c2" value="5" /> どちらでもない</label>
<label><input type="radio" name="c2" value="1" /> いいえ</label>
</fieldset>
<fieldset>
<legend>質問3</legend>
<label><input type="radio" name="c3" value="10" /> はい</label>
<label><input type="radio" name="c3" value="5" /> どちらでもない</label>
<label><input type="radio" name="c3" value="1" /> いいえ</label>
</fieldset>
<button id="check" onclick="calculate()" >診断</button>

計算結果<input type="text" id="calculateTotal"/>
</body>

シンプルに作るとこんな感じですかね

<body>

<script>

function getCheckTotal(){
$radio = $(':radio');
var total = 0;

$radio.filter(':checked').map(function(){
total += Number(this.value);
});
return total;
}

function calculate(){
//入力数値を取得
var inputPointString = $("#inputPoint").val();
//文字列で取得しているので数値に変換
var inputPoint = parseInt(inputPointString);
var checkTotal = getCheckTotal();
var calculateTo...続きを読む

他の回答も見る

Q適性診断テストみたいなものを作りたいのですが

質問させて頂きます。このカテゴリで良いのか分かりませんが、間違っていたら、すみません。
僕は今、シャンプーの販売サイトを運営しているのですが、そのコンテンツとして商品の適性診断みたいなのを作りたいと思っています。
具体的に申しますと、例えば、質問項目に「かゆみが出やすい」を「yes」か「no」で選択させ、選択すると次のページに移り、そこでまた質問項目に「ふけが出やすい」を「yes」か「no」で選択させ、これをいくつか続け、最後に、「あなたに適している商品は○○です」みたいな感じにしたいと思っています。PHPやCGIの知識はほんの少し程度しかありませんが、自作できればそれが一番良いのですが。あまり高度は知識がないとやはり無理でしょうか。例えば、無料のPHPスクリプトやCGIスクリプトみたいなのがあればいいなとも思っています。自分でももちろん色々調べたのですが、力不足で見当たりません。
漠然とした質問になってしまいましたが、とにかく質問項目も５，６個程度で商品も１０個ぐらいなので、簡単なもので構いません。どなたかよろしくお願いします。

Aベストアンサー

失礼しました。6通りじゃなく、2の3乗=8通りの組み合わせですよね。
-db.datの中身を、以下のように変えて下さい。
Y,Y,Y,商品1
Y,Y,N,商品2
Y,N,N,商品3
Y,N,Y,商品4
N,Y,Y,商品5
N,N,Y,商品6
N,N,N,商品7
N,Y,N,商品8

他の回答も見る

Qラジオボタンで診断テストを作成したい

ラジオボタンで診断テストを作成したい

Yes、No形式で10問のラジオボタンから選択し、
Yesの数に応じ5通りのリンク先にジャンプするようなサイトを作成しようと思っています。

調べているうちに下記のような同様の質問を発見したのですが、
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1341900288
これだと2の10乗、1024通りのリンクを設定しないといけません。

例えばYesを1、Noを0などの数値に置き換えて、
Yesの数が1-3個は"http://～～"、4-6個は"http://～～"
という風には設定できないのでしょうか？

わかりにくい説明で申し訳ありませんが、
よろしくお願いします。

Aベストアンサー

他の方の回答から一部もらってますがサンプルです。

<script type="text/javascript">
function sample(F){
var list = {
0:'htp://example.com/a.html',//0以下
2:'htp://example.com/b.html',//2以下
5:'htp://example.com/c.html',
8:'htp://example.com/d.html',
10:'htp://example.com/e.html'
};
var i=0;
var q;
var c=0;
var key=0;
while( q = F.elements[ i++ ] )
if(q.type=='radio' && q.checked) c+= parseInt(q.value);

for(key in list) {
if(c <= parseInt(key)) {
location.href = list[key];
break;
}
}
return false;
}
</script>

</head>
<body>

<form onsubmit="return sample(this)">
<p>
Q1.
<label><input type="radio" name="q1" value="1" checked>Yes</lebel>
<label><input type="radio" name="q1" value="0">No</lebel>
</p>
<p>
Q2.
<label><input type="radio" name="q2" value="1" checked>Yes</lebel>
<label><input type="radio" name="q2" value="0">No</lebel>
</p>
～略～
<input type="submit" value="診断">
</form>

Yesのvalueを2以上にしたり、
Yesを0、Noを1にすることで結果予測をしずらくすることもできます。

他の方の回答から一部もらってますがサンプルです。

<script type="text/javascript">
function sample(F){
var list = {
0:'htp://example.com/a.html',//0以下
2:'htp://example.com/b.html',//2以下
5:'htp://example.com/c.html',
8:'htp://example.com/d.html',
10:'htp://example.com/e.html'
};
var i=0;
var q;
var c=0;
var key=0;
while( q = F.elements[ i++ ] )
if(q.type=='radio' && q.checked) c+= parseInt(q.value);

for(key in list) {
if(c <= parseInt(key)) {
location.href = list[key];
...続きを読む

他の回答も見る

QYES or NO形式で進んで行く、タイプ別診断を作る糸口を教えてください。

初めて質問させていただきます。
どうぞよろしくお願いします。

農林水産省のページの中にみんなでごはん、タイプ別診断
というYES or NO形式で進んで行くページがあります。

http://www.maff.go.jp/j/seisan/kakou/mezamasi/family/type.html

これがそのページのURLです。

このページと同様のものを私ども会社のホームページに作って載せようと、
先週から色々と調べたのですが、どうにもこうにも糸口がつかめません。

どなたがご存知の方がおられましたら、どうぞご伝授ください。

私は少々ｈｔｍｌの知識がある程度ですので、できるだけ分かり易く、
具体的にお教えいただけるとありがたいです。

それではどうぞよろしくお願い申し上げます。

Aベストアンサー

とっても簡単なもの・・・以前回答した
　⇒フルスクリーンについて・・・ - JavaScript | 教えて！goo( https://oshiete.goo.ne.jp/qa/8137881.html )
とか・・

他の回答も見る

Qフルスクリーンについて・・・

質問に対し、はい/いいえを選択し答えを出すチャート式を使ったサイトを作成しています。
よくある病気等を診断する感じのサイトです。

質問は、div idにquestion1～10を指定。
選択肢のはい/いいえには、a hrefに#question1～10を指定。
答えは、#answer1～3

１ページで完結する簡単なものになっています。
問題はスクロールすると全て見えてしまう事です。
また、画面サイズによってスクロールしなくても次の質問が見えてしまいます。

そこで、ｊｓやjqで回避できないか質問したいです。
htmlとcss以外の知識がないため知恵を貸していただきたいです。

#questionを１つだけフルスクリーンで表示させることはできるでしょうか？
もちろんスクロールはできない仕様で。

#question1～10を個別の.htmlに変えるやり方はできれば避けたいです。
可能であればイメージのスライドショー的なスムーズに画面が変わる感じにしたいです。

もしjqのプラグインやjs、css3などで動作できるのであれば教えてほしいです。
よろしくお願いします。

質問に対し、はい/いいえを選択し答えを出すチャート式を使ったサイトを作成しています。
よくある病気等を診断する感じのサイトです。

質問は、div idにquestion1～10を指定。
選択肢のはい/いいえには、a hrefに#question1～10を指定。
答えは、#answer1～3

１ページで完結する簡単なものになっています。
問題はスクロールすると全て見えてしまう事です。
また、画面サイズによってスクロールしなくても次の質問が見えてしまいます。

そこで、ｊｓやjqで回避できないか質問したいです。
htmlとcss以外の知識...続きを読む

Aベストアンサー

一部修正
★No.4のHTML中
・＿＿<div class="section answer" id="A1">直前の
＿</ol>
　は削除すること
・印刷用スタイルシート中＿#Q7{page-break-after:always;}
は、＿#A1{page-break-before:always;}
　のほうが良いです。必ず答えのページ直前で改ページされます。

No.5 のHTML5用のスタイルシートです。
★HTML5では原則としてDIVは使いません。
Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.( http://www.w3.org/TR/2012/CR-html5-20121217/grouping-content.html#the-div-element )
著者は、div 要素は、他に適切な要素がないときなど、最後の最後手段として使用することが強く推奨されます。div 要素の代わりにより適切な要素を使うことで、読者にとってはアクセシビリティの向上に、著者にとってはメンテナンスの向上につながる。

★jsを使うより、はるか簡単になり、あらゆる面で優れているといえるでしょう。
　先で【HTMLに手を加えることなく】デザインを全く変えることもできますしね。

<style type="text/css" media="screen">
<!--
html{margin:0;padding:0;height:100%;}
span{display:none;}
body{margin:0 auto;width:80%;height:100%;position:relative;min-width:480px;max-width:900px;}
header{height:100px;position:fixed;width:80%;}

/* ここから */
section{
width:90%;height:70%;margin:110px auto;
position:absolute;overflow:hidden;
}
section section{
height:100%;width:100%;margin:0;
position:static;
}
/* ここまで */

section.answer h2{font-size:60px;}
section{border:ridge green 5px;text-align:center;}
section section{border:none;}
section#A1{background-color:lime;}
section#A2{background-color:fuchsia}
section#A3{background-color:aqua;}
footer h2{display:none;}
footer{position:absolute;bottom:0;}
header{background-color:yellow;}
-->
</style>
<style type="text/css" media="print">
a{color:black;text-decoration:none;}
#A1{page-break-before:always;}
</style>

一部修正
★No.4のHTML中
・＿＿<div class="section answer" id="A1">直前の
＿</ol>
　は削除すること
・印刷用スタイルシート中＿#Q7{page-break-after:always;}
は、＿#A1{page-break-before:always;}
　のほうが良いです。必ず答えのページ直前で改ページされます。

No.5 のHTML5用のスタイルシートです。
★HTML5では原則としてDIVは使いません。
Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate e...続きを読む

他の回答も見る

QjQueryを使った診断チェックシート

チェックシートの事で質問させて頂きます。

ラジオボタンを使って診断結果を表示させたのですが、どう書けばいいのか迷っています。
内容は

Q1.あなたの好きな動物は？（◯はラジオボタンです）
◯犬　◯猫　◯鳥

Q2.あなたの好きな食べ物は？
◯ハンバーグ　◯グラタン　◯スパゲッティ

Q3.あなたの好きな色は？
◯赤　◯青　◯黄色

のような質問を出して、それぞれのラジオボタンのValueに数値を入れておいて
ボタンを押した時、Q1～Q3の合計点によって異なる結果を出したいと思っています。

このような診断チェックのプログラムをご存知の方がいたら
ぜひ教えて頂けないでしょうか。
よろしくお願いします。

Aベストアンサー

jQueryにはラジオボタンのセレクターが用意されているので
それを使うと簡単にラジオボタンだけ処理することができます。

$('input:radio')

すべてのラジオボタンの中からチェックされたものだけ得る場合は:checkedです。

$(':radio:checked')
または
$('input:radio').filter(':checked')

これをmapで処理してvalueを足せば合計点が計算できます。

var total = 0;
$(':radio:checked').map(function(){
total += Number(this.value);
});

診断ボタンを押した後に結果を表示するのなら、
上記の計算と結果の分岐・表示をボタンのクリックイベントで行います。

$('診断ボタン').click(function() {
//合計点の計算
//結果分岐・表示
});

http://jsfiddle.net/Tenderfeel/PFRCQ/

他の回答も見る

Qラジオボタンの値でリンク先を変える

ラジオボタンのvalueの値があり、
submitボタンを押したら、その値によって
リンク先を変えたいのですが、
具体的にソースで教えていただけないでしょうか？

Aベストアンサー

同じ name 値のオブジェクトが複数ある場合、それらは配列扱いとなるので No.1 の方法では処理できません。
このような場合はループでラジオボタンを１つずつ見て、checked プロパティが true のものを探して処理します。

また、HTML に checked が書かれているラジオボタンが１つもなければ、どれもチェックされていない時の処理も必要になります。

それと、リンク先変更関数の呼び出しについてですが、送信処理に関する関数の呼び出しは必ず FORM タグの onSubmit で行うようにします。
でないと、ラジオボタンにフォーカスがある時に Enter キーによって送信されてしまうのをチェックすることができません。

以下、それらを踏まえたサンプルです。

# スクリプト部
（インデントなどに全角空白を使用しているので、コピペの際は注意！）

// ラジオボタンに対応するURLの配列
var actions = new Array(
　　"URL1",
　　"URL2"
);

function setAction(f) {
　　for (var i = 0; i < f.rb1.length; i++) {
　　　　if (f.rb1[i].checked) {
　　　　　　f.action = actions[i];
　　　　　　return true;　　// true を返すと送信される
　　　　}
　　}

　　// ラジオボタンがチェックされていない時の処理
　　※以下参照
}

※エラーにする場合
　　alert("ラジオボタンをチェックしてください。");
　　return false;　　// false を返すと送信されない

※デフォルトの送信先に飛ばせる場合
　　f.action = "デフォルトのURL";
　　return true;
　　
# フォーム部
<FORM onSubmit="return setAction(this)">
<INPUT type="radio" name="rb1" value="a">aaa<br>
<INPUT type="radio" name="rb1" value="b">bbb<br>
<INPUT type="submit">
</FORM>

下記ページも参考になります。
http://tohoho.wakusei.ne.jp/js/form.htm#ElmButton

参考URL：http://tohoho.wakusei.ne.jp/js/form.htm#ElmButton

同じ name 値のオブジェクトが複数ある場合、それらは配列扱いとなるので No.1 の方法では処理できません。
このような場合はループでラジオボタンを１つずつ見て、checked プロパティが true のものを探して処理します。

また、HTML に checked が書かれているラジオボタンが１つもなければ、どれもチェックされていない時の処理も必要になります。

それと、リンク先変更関数の呼び出しについてですが、送信処理に関する関数の呼び出しは必ず FORM タグの onSubmit で行うようにします。
でないと、ラジ...続きを読む

他の回答も見る

QHTML タグ　セル内余白を無くす方法

次の様なプログラムで画像(a.gif 30x30ピクセル)を表示させると、画像とセル枠線との上下の間に余白ができる。この余白を無くす方法？

<table border="1">
<tr><td rowspan="2"><img src="a.gif"></td><td><br></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td><br></td><td>
</table>
テーブル内を２列にして、画像を縦方向に画像高さの半分だけズラして表示したい。
セル結合をしないで、ごく普通に２行２列にすると画像とセル枠との間には余白が生じない。
セル結合した場合に生ずる余白を無くす方法を教えて下さい。エディタは「メモ帖」、ＯＳはWinXP、ブラウザはInternet Explorer６です。

次の様なプログラムで画像(a.gif 30x30ピクセル)を表示させると、画像とセル枠線との上下の間に余白ができる。この余白を無くす方法？

<table border="1">
<tr><td rowspan="2"><img src="a.gif"></td><td><br></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td><br></td><td>
</table>
テーブル内を２列にして、画像を縦方向に画像高さの半分だけズラして表示したい。
セル結合...続きを読む

Aベストアンサー

表を入れ子にしたらどうでしょうか↓

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td><img src="a.gif"></td>
</tr>
<tr>
<td><img src="a.gif"></td>
</tr>
<tr>
<td>　</td>
</tr>
</table>
</td>
<td>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>　</td>
</tr>
<tr>
<td><img src="a.gif"></td>
</tr>
<tr>
<td><img src="a.gif"></td>
</tr>
</table>
</td>
</tr>
</table>

表を入れ子にしたらどうでしょうか↓

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td><img src="a.gif"></td>
</tr>
<tr>
<td><img src="a.gif"></td>
</tr>
<tr>
<td>　</td>
</tr>
</table>
</td>
<td>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>...続きを読む

他の回答も見る

Qテーブルセル余白（例えば左側だけ、上側だけ、など）

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ５ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="ＸＸ"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

１つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

他の回答も見る

QJavaScriptで簡単なクイズを作りたいんですが

今HPを作っていて簡単なクイズを入れたいのですが
JavaScriptを使ってしようと思ったのですが行き詰りました・・・

クイズの形式は問題をあらかじめ書いていて
テキスト部分に答えを書いて
ボタンをクリックすると「正解！」や「不正解！答えは○○」
と表示されるようなものです

いろんなサイトを見たのですがよく理解できませんでした

サンプルのソースなどを書いていただくとありがたいです

宜しくお願いします

Aベストアンサー

いきなり複数では難しいので、一つの問題を出題するプログラムを考えましょう。

先にHTMLの方にJavaScriptから操作できるように手を加えておきましょう。
・答えの入力フィールドのIDに「a1」と指定します。
e.g. <input type="text" id="a1">

・解答ボタンにクリック時にJavaScriptを呼び出すイベントを記入します。
e.g. <input type="button" value="答え合わせ" onclick="check(1)">
この例では、check関数に、引数「1」を渡して呼び出します。

それでは次に、JavaScriptの方です。
まず、答えのリストを持っていなければなりません。ということで、変数「ans」を用意し、答えを入れておきます。
e.g.
var ans = "答え";

次に、ボタンを押されたときに呼び出されるcheck関数を作ります。
function check(num){

return true;
}
この例では、引数をnumで受け取ります。このnumは複数になったときに使うのでしばらく登場しません。

中で処理することは、
「入力された値の取得」→「答えとの比較」→一致したとき「"正解です"と表示」、不一致のとき「"不正解です。答えは○○です"と表示」
ですね。ではスクリプトに起こしていきます。

function check(num){
/*入力された値の取得*/
var input = document.getElementById("a1").value; // ページの中からIDが"a1"であるものを探し、その要素のvalueを参照して取得

/*答えとの比較*/
if( input == ans ){
/*正解*/
alert("正解です");
} else {
/*不正解*/
alert("不正解です。答えは"+ans+"です");
}
return true;
}

これで単品の処理は終了です。
まずはここまでつくってできているか確認しましょう。次に複数に対応します。
HTMLの方では
・入力フィールドのIDを第1問目なら「a1」、第2問目なら「a2」...と設定していきます。
・ボタンの方は、onclickの中身を、1問目なら「check(1)」、2問目なら「check(2)」と設定しておきます。

次にJavaScript。
ansに答えを複数入力します。
var ans = ["1問目の答え", "2問目の答え", "3問目の答え"];

check関数を書き換えます。
修正するポイントは以下
・IDが"a1"ではなく、"a"+numのIDを探すことによって、その問題の回答フィールドを発見する
・ansが配列になったので、配列の要素を参照する。配列は、1,2,3、という数え方ではなく、0,1,2という数え方なので、numを1減らす

function check(num){
/*入力された値の取得*/
var input = document.getElementById("a"+num).value; // ページの中からIDが"a"+numであるものを探し、その要素のvalueを参照して取得。

num = num -1; //配列の参照は0からなので、1減らす

/*答えとの比較*/
if( input == ans[num] ){ //配列の参照は、配列変数名[要素番号]
/*正解*/
alert("正解です");
} else {
/*不正解*/
alert("不正解です。答えは"+ans[num]+"です");
}
return true;
}

本当は半角・全角の違い、ひらがな・カタカナの違いを吸収したりとかする処理はした方が良いのですが、内容が複雑になるので割愛します。
ということで、チャレンジ結果楽しみにしています！

いきなり複数では難しいので、一つの問題を出題するプログラムを考えましょう。

先にHTMLの方にJavaScriptから操作できるように手を加えておきましょう。
・答えの入力フィールドのIDに「a1」と指定します。
e.g. <input type="text" id="a1">

・解答ボタンにクリック時にJavaScriptを呼び出すイベントを記入します。
e.g. <input type="button" value="答え合わせ" onclick="check(1)">
この例では、check関数に、引数「1」を渡して呼び出します。

それでは次に、JavaScriptの方です。
まず、答えのリストを持...続きを読む

他の回答も見る
ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報