プロが教えるわが家の防犯対策術!

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

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

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

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

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

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

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

「【診断テストの作り方】結果に応じて数字を」の質問画像

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

A 回答 (2件)

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



<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>
    • good
    • 0
この回答へのお礼

DoubtOwl様

再度ご丁寧に記述いただきありがとうございました。
おかげ様で思い通りの仕組みを作ることができました!

記述内容理解しながら進めていけるよう勉強を続けます。
ありがとうございました。

お礼日時:2015/05/26 15:55

//入力数値を取得


var inputPointString = $("#inputPoint").val();
//文字列で取得しているので数値に変換
var inputPoint = parseInt(inputPointString);

合計値はとれているようなので判定するだけですね
var calculateTotal = 0;
if(total >= 80){
calculateTotal = inputPoint* 1.5;
}
if(79 >= total && total >= 60){
calculateTotal = inputPoint* 1.3;
}
if(59 >= total && total >= 40){
calculateTotal = inputPoint* 1.3;
}
...
    • good
    • 0
この回答へのお礼

DoubtOwl様

早々のご回答ありがとうございます。

お答えいただいたところ申し訳ないのですが、
書いてある内容についてはなんとなく理解できるのですが
実際それをどのように組み込めばいいのかがわかりません…。

お手数おかけしますがHTMLへの組み込み例も記載いただけないでしょうか。
何卒よろしくお願い致します。

お礼日時:2015/05/25 14:57

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

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

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

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

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

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

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

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診断サイトの作り方

http://kantei.am/13107/

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

Aベストアンサー

大雑把にこんなかんじ
あとは工夫してください。

<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>

大雑把にこんなかんじ
あとは工夫してください。

<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"><l...続きを読む

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

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

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

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

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

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

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

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

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

Aベストアンサー

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

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];
...続きを読む

Q「Yes,Noチャート」の作成方法

「Yes,Noチャート」の作成方法

はじめて利用させていただきます

仕事でいわゆる「Yes,Noチャート」を作らなければならないのですが、
作り方がわかりません。

以前、質問された方に対する回答も見たのですが、
よくわかりませんでした

私が作りたいのは、質問に対してYes、Noの矢印をたどって答えていくと
A,B,C,Dの4つのタイプのどれかにあてはまる、というものです。
「あなたはAタイプ!」「あなたはBタイプ!」みたいな、
よく雑誌などで見かけるものです。

ちなみに、webでなくて紙媒体に掲載する予定です。

具体的に、わかりやすく教えていただけますよう、
どうか、よろしくお願い申し上げます。

Aベストアンサー

あのね、数学だったら
1+1は?

 に、対して
→0
→1
→2

で、3番目しか矢印は組めないけど、言葉なんだから
1+1は?
に対して
→2
→みかん
→小沢総理


と、何でもいいんですよ、難しく考えるから難しくなっちゃうんです

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フルスクリーンについて・・・

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

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

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

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

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

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

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

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

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

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

そこで、jsや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...続きを読む

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Q初心者です。プログラムを作りたいのですが

YES・NOを選んでいくと診断結果が出るプログラムを組みたいのですが、全くの初心者でどうしていいか分かりません。
調べてみても情報が多くて混乱しています。

作成するのにお勧めのソフトと言語を教えてください。

Aベストアンサー

頭が混乱しているということなので、とりあえず、一番手っ取り早い方法だけ。

マイクロソフトのエクセルかアクセスをインストールして、そこからVisual Basic Editorを起動してください。
そこにYES・NOのロジックを書いて、コンパイルして、後は実行するだけです。

初心者が簡単にプログラムを組む方法はこれ以外にありません。

それができるようになったら次のステップを教えますので、また来てください。

Q心理テストってどうやって作成されているのですか?

よく雑誌やテレビなどで見かける、4者択一のような心理テストって
どうやって作っているのでしょうか?

なんか、適当になのでは?と思ってしまったり・・・・

どうなんでしょうか?

Aベストアンサー

心理学を専門にしていると,お尋ねの“心理テスト”を「心理テスト」と称することに非常に抵抗があります。ここでは「心理ゲーム」とだけ呼びます。

はっきり言えば「適当です」。
心理ゲームは,確かに問題を作成するさいには精神分析学と呼ばれる心理学の一立場の解釈で選択肢を作るのだと思います。しかし現在では精神分析学による解釈には色々と批判がされていますし,仮に精神分析学を使って深層心理を調べようとする人たちも,たった一回の解釈だけではなく「本当にその解釈が正しいのか?」と何度も解釈の結果を検証しようとします。

しかし「心理ゲーム」の場合はたった一回の解釈しかせず,その後本当にその解釈が正しいのか,という検証をしません。
本当に「心理テスト」と呼ばれる,心理学者が用いる検査器具は,検証作業を何度も繰り返してその結果が妥当かどうかを調べた上で,ある程度満足できる水準までに結果に妥当性が出たときに,初めてその器具を「心理テスト」として発表します。

よって心理ゲームは色々な意味で「適当」であり,その解釈が「合っている」というのは,たまたまの場合,あるいは「その解釈が自分に当てはまっていると思いこむ」という場合が多いと思われます。
逆に本当は合っていないにもかかわらず,合っていると思いこむ現象は「バーナム効果」と呼ばれる現象として心理学では研究さえされています。

心理学を専門にしていると,お尋ねの“心理テスト”を「心理テスト」と称することに非常に抵抗があります。ここでは「心理ゲーム」とだけ呼びます。

はっきり言えば「適当です」。
心理ゲームは,確かに問題を作成するさいには精神分析学と呼ばれる心理学の一立場の解釈で選択肢を作るのだと思います。しかし現在では精神分析学による解釈には色々と批判がされていますし,仮に精神分析学を使って深層心理を調べようとする人たちも,たった一回の解釈だけではなく「本当にその解釈が正しいのか?」と何度も解釈...続きを読む


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

人気Q&Aランキング