出産前後の痔にはご注意!

http://www.geocities.jp/net_t3/color/personal04. …
http://beauty.hotpepper.jp/doc/bn/071026kaogata/

上記の診断のように、質問項目にチェックを入れると該当するボックスが変化するような診断を作成したいのですが、これらはどういった仕組みなのでしょうか?
また、htmlやcssのみで簡単にすることは可能ですか?CGIもしくはJavaなんかが必要でしょうか?

ご回答よろしくおねがいします。

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

A 回答 (3件)

HTML+Javascriptです。



またはPHP/CGIを使用して作成することも可能。

自分なら
HTML+CSS3+Javascript(最近ではjQuery)+PHP+MySQL

でユーザの診断結果のとかMySQLに保存とかして
グラフで統計とか。色々できる。
    • good
    • 0

HTMLがシンプルに組むにはいいんではないでしょうか?

この回答への補足

シンプルに組む組み方がわからないのでアドバイスいただけると助かります。

補足日時:2014/01/01 11:42
    • good
    • 0

htmlです。



ソースを見れば判りますよ

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="ja">

<head>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<title>Personal color/パーソナル・カラー診断</title>
<script type="text/javascript" src="day.js"></script>
<link href="contets.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="favicon.ico">
<meta name="description" content="カラーコーディネート、ファッションイメージのサイト。イラストによる色彩/パーソナルカラー/ファッションイメージの解説。">
<meta name="keywords" content="カラーコーディネート, パーソナルカラー, 色彩, イラスト, 色名, 色彩検定, 色彩心理, ファッションイメージ, ファッションスタイル, ファッションカラー, 流行色">
<csscriptdict import>
<script type="text/javascript" src="GeneratedItems/CSScriptLib.js"></script>
</csscriptdict>
<csactiondict>
<script type="text/javascript"><!--
CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'button25',/*URL*/'main-menu/top01.jpg',/*URL*/'main-menu/top02.jpg',/*URL*/'main-menu/top01.jpg','');
CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'button26',/*URL*/'main-menu/what01.jpg',/*URL*/'main-menu/what02.jpg',/*URL*/'main-menu/what01.jpg','');
CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'button27',/*URL*/'main-menu/harmony01.jpg',/*URL*/'main-menu/harmony02.jpg',/*URL*/'main-menu/harmony01.jpg','');
CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'button28',/*URL*/'main-menu/personal01.jpg',/*URL*/'main-menu/personal02.jpg',/*URL*/'main-menu/personal01.jpg','');
CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'button29',/*URL*/'main-menu/image01.jpg',/*URL*/'main-menu/image02.jpg',/*URL*/'main-menu/image01.jpg','');
CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'button30',/*URL*/'main-menu/co01.jpg',/*URL*/'main-menu/co02.jpg',/*URL*/'main-menu/co01.jpg','');
CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'button31',/*URL*/'main-menu/history01.jpg',/*URL*/'main-menu/history02.jpg',/*URL*/'main-menu/history01.jpg','');
CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'button32',/*URL*/'main-menu/column01.jpg',/*URL*/'main-menu/column02.jpg',/*URL*/'main-menu/column01.jpg','');
CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'button33',/*URL*/'main-menu/data01.jpg',/*URL*/'main-menu/data02.jpg',/*URL*/'main-menu/data01.jpg','');
CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'button34',/*URL*/'main-menu/link01.jpg',/*URL*/'main-menu/link02.jpg',/*URL*/'main-menu/link01.jpg','');
CSAct[/*CMP*/ 'C4175BA787'] = new Array(CSSetImageURL,/*CMP*/ 'sp2',/*URL*/ 'personal/pi-qp-on.gif');
CSAct[/*CMP*/ 'C4175BA789'] = new Array(CSSetImageURL,/*CMP*/ 'sp7',/*URL*/ 'personal/pi-qp-on.gif');
CSAct[/*CMP*/ 'C4175BA791'] = new Array(CSSetImageURL,/*CMP*/ 'sp12',/*URL*/ 'personal/pi-qp-on.gif');
CSAct[/*CMP*/ 'C4175BA793'] = new Array(CSSetImageURL,/*CMP*/ 'sp17',/*URL*/ 'personal/pi-qp-on.gif');
CSAct[/*CMP*/ 'C4175BA795'] = new Array(CSSetImageURL,/*CMP*/ 'sp3',/*URL*/ 'personal/pi-qp-on.gif');
CSAct[/*CMP*/ 'C4175BA797'] = new Array(CSSetImageURL,/*CMP*/ 'sp8',/*URL*/ 'personal/pi-qp-on.gif');
CSAct[/*CMP*/ 'C4175BA799'] = new Array(CSSetImageURL,/*CMP*/ 'sp13',/*URL*/ 'personal/pi-qp-on.gif');
CSAct[/*CMP*/ 'C4175BA7101'] = new Array(CSSetImageURL,/*CMP*/ 'sp18',/*URL*/ 'personal/pi-qp-on.gif');
CSAct[/*CMP*/ 'C4175BA7103'] = new Array(CSSetImageURL,/*CMP*/ 'sp4',/*URL*/ 'personal/pi-qp-on.gif');
CSAct[/*CMP*/ 'C4175BA7105'] = new Array(CSSetImageURL,/*CMP*/ 'sp9',/*URL*/ 'personal/pi-qp-on.gif');
CSAct[/*CMP*/ 'C4175BA7107'] = new Array(CSSetImageURL,/*CMP*/ 'sp14',/*URL*/ 'personal/pi-qp-on.gif');
CSAct[/*CMP*/ 'C4175BA7109'] = new Array(CSSetImageURL,/*CMP*/ 'sp19',/*URL*/ 'personal/pi-qp-on.gif');
CSAct[/*CMP*/ 'C4175BA7111'] = new Array(CSSetImageURL,/*CMP*/ 'sp5',/*URL*/ 'personal/pi-qp-on.gif');
CSAct[/*CMP*/ 'C4175BA7113'] = new Array(CSSetImageURL,/*CMP*/ 'sp10',/*URL*/ 'personal/pi-qp-on.gif');
CSAct[/*CMP*/ 'C4175BA7115'] = new Array(CSSetImageURL,/*CMP*/ 'sp15',/*URL*/ 'personal/pi-qp-on.gif');
CSAct[/*CMP*/ 'C4175BA7117'] = new Array(CSSetImageURL,/*CMP*/ 'sp20',/*URL*/ 'p

この回答への補足

タグを見たところ<script>タグでjavascriptを読み込んでいますし、yesの部分に
<a onclick="CSAction(new Array(/*CMP*/'C4175BC8151'));return CSClickReturn();" href="personal04.html" csclick="C4175BC8151">&lt;yes&gt;</a>
こういった記述があるので恐らくjavascriptではないかと思うんですが…

補足日時:2014/01/01 11:42
    • good
    • 0

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

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

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

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

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です。

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

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

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

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

Aベストアンサー

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

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&Aランキング