恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

  1. HOME
  2. >
  3. CSS

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

【javascript】jQueryを使わない診断テスト

投稿日：2021-07-01 更新日：




【javascript】診断テスト サムネイル

今回は、jQueryを使わず診断テストを作っていきたいと思います。

早速ですが、今回作成した診断テストのデモになります。

DEMO

以下、コードになります。

HTML


<ol id="question">
  <li>
    <span>Q1</span>
    <p>～？</p>
    <input id="q1-y" class="btn" name="q1" type="radio" value="1"><label class="label" for="q1-y">YES</label>
    <input id="q1-n" class="btn" name="q1" type="radio" value="0"><label class="label" for="q1-n">NO</label>
  </li>
  <li>
    <span>Q2</span>
    <p>～？</p>
    <input id="q2-y" class="btn" name="q2" type="radio" value="1"><label class="label" for="q2-y">YES</label>
    <input id="q2-n" class="btn" name="q2" type="radio" value="0"><label class="label" for="q2-n">NO</label>
  </li>
  <li>
    <span>Q3</span>
    <p>～？</p>
    <input id="q3-y" class="btn" name="q3" type="radio" value="1"><label class="label" for="q3-y">YES</label>
    <input id="q3-n" class="btn" name="q3" type="radio" value="0"><label class="label" for="q3-n">NO</label>
  </li>
  <li>
    <span>Q4</span>
    <p>～？</p>
    <input id="q4-y" class="btn" name="q4" type="radio" value="1"><label class="label" for="q4-y">YES</label>
    <input id="q4-n" class="btn" name="q4" type="radio" value="0"><label class="label" for="q4-n">NO</label>
  </li>
  <li>
    <span>Q5</span>
    <p>～？</p>
    <input id="q5-y" class="btn" name="q5" type="radio" value="1"><label class="label" for="q5-y">YES</label>
    <input id="q5-n" class="btn" name="q5" type="radio" value="0"><label class="label" for="q5-n">NO</label>
  </li>
</ol>
<section id="result">
  <h2 id="type_title"></h2>
  <p id="type_desc"></p>
</section>
<button type="button" id="resultBtn">結果を見る</button>
<button type="button" id="backBtn" class="hide">戻る</button>
<p id="error"></p>

今回は、同ページ内で結果と質問が切り替わるようにしています。

CSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wrap{
  margin: 50px;
}
h1{
  font-size: 20px;
  margin-bottom: 20px;
  border-bottom: 2px solid #111;
  display: inline-block;
}
li{
  display: flex;
  margin-bottom: 20px;
}
p{
  margin-left: 30px;
  margin-right: 30px;
}
input{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}
.btn{display:none;}
.label{
  background-color:#fff;
  border: 2px solid #111;
  box-shadow: 3px 3px #111;
  width: 65px;
  margin-left: 10px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  cursor: pointer;
}
.btn:checked+.label{
  background-color:#f8ee62;
  transform: translate(3px ,3px);
  box-shadow: none;
}
#error{
  font-size: 14px;
  margin-top: 10px;
  color: #bf3030;
}

CSSはお好みで編集してください。

最後にJSです。

const question = document.getElementById('question');
const result = document.getElementById('result');
const resultBtn = document.getElementById('resultBtn');
const backBtn = document.getElementById('backBtn');
const error = document.getElementById('error');
let btn = document.getElementsByClassName("btn");
backBtn.style.display = 'none';
result.style.display = 'none';
var typeResult = [
  {"type_title":"Aタイプ","type_desc":"A-タイプの説明が入ります。"},
  {"type_title":"Bタイプ","type_desc":"B-タイプの説明が入ります。"},
  {"type_title":"Cタイプ","type_desc":"C-タイプの説明が入ります。"}
]

resultBtn.addEventListener('click', () => {
  let count = 0;
  var sum = 0;
  for (let i = 0; i < btn.length; i++) {
    if (btn[i].checked) {
      count++;
      let countVal = btn[i].value;
      sum += parseInt(countVal);
    }
  }
  if(count<5){
    error.innerHTML = "選択されていない項目があります。";
  }else{
    backBtn.style.display = 'block';
    result.style.display = 'block';
    question.style.display = 'none';
    resultBtn.style.display = 'none';
    error.innerHTML = "";
    if(sum < 2){
      sessionStorage.setItem("type_num", 0);
    }else if(sum < 4){
      sessionStorage.setItem("type_num", 1);
    }else{
      sessionStorage.setItem("type_num", 2);
    }
    let type_num = sessionStorage.getItem('type_num');
    let type_title = typeResult[type_num]["type_title"];
    let type_desc = typeResult[type_num]["type_desc"];
    document.getElementById("type_title").innerHTML = type_title;
    document.getElementById("type_desc").innerHTML = type_desc;
  }
});
backBtn.addEventListener('click', () => {
  backBtn.style.display = 'none';
  result.style.display = 'none';
  question.style.display = 'block';
  resultBtn.style.display = 'block';
  let count = 0;
  for (let i = 0; i < btn.length; i++) {
    if (btn[i].checked) {
      btn[i].checked = false;
    }
  }
});

順に説明していきます！

const question = document.getElementById('question');
const result = document.getElementById('result');
const resultBtn = document.getElementById('resultBtn');
const backBtn = document.getElementById('backBtn');
const error = document.getElementById('error');
let btn = document.getElementsByClassName("btn");
backBtn.style.display = 'none';
result.style.display = 'none';
var typeResult = [
  {"type_title":"Aタイプ","type_desc":"A-タイプの説明が入ります。"},
  {"type_title":"Bタイプ","type_desc":"B-タイプの説明が入ります。"},
  {"type_title":"Cタイプ","type_desc":"C-タイプの説明が入ります。"}
]

色々と変数を定義していきます。

結果出力にはjson配列を利用しました。結果出力の仕方もお好みで変更してください。

resultBtn.addEventListener('click', () => {
//ボタンの数チェックと選択されたボタンのvalue値を足していきます。
  let count = 0;
  var sum = 0;
  for (let i = 0; i < btn.length; i++) {
    if (btn[i].checked) {
      count++;
      let countVal = btn[i].value;
      sum += parseInt(countVal);
    }
  }
  if(count<5){
    error.innerHTML = "選択されていない項目があります。";
  }else{
    backBtn.style.display = 'block';
    result.style.display = 'block';
    question.style.display = 'none';
    resultBtn.style.display = 'none';
    error.innerHTML = "";
    if(sum < 2){
      sessionStorage.setItem("type_num", 0);
    }else if(sum < 4){
      sessionStorage.setItem("type_num", 1);
    }else{
      sessionStorage.setItem("type_num", 2);
    }
    let type_num = sessionStorage.getItem('type_num');
    let type_title = typeResult[type_num]["type_title"];
    let type_desc = typeResult[type_num]["type_desc"];
    document.getElementById("type_title").innerHTML = type_title;
    document.getElementById("type_desc").innerHTML = type_desc;
  }
});

次は結果を見るボタンを押した時の動作です。

ボタンがいくつ選択されたか、選択されたボタンのvalue値を取得して、足していきます。

選択されたボタンの数が5未満の場合は、エラー文を表示。

5個選択されたら、質問を非表示・結果を表示にします。

sessionStorageを利用して、選択した合計値で該当のタイプをjson配列から呼び出し#result内に出力しています。

sessionStorageを使うことで、別ページに結果を表示する場合でも、ブラウザを閉じない限りデータをしまっておけるので、便利です。

backBtn.addEventListener('click', () => {
  backBtn.style.display = 'none';
  result.style.display = 'none';
  question.style.display = 'block';
  resultBtn.style.display = 'block';
  let count = 0;
  for (let i = 0; i < btn.length; i++) {
    if (btn[i].checked) {
      btn[i].checked = false;
    }
  }
});

最後に戻るボタンです。

チェックした項目を解除し、表示非表示を変更しました。

ここの動作もお好みで変更してください。

まとめ

いかがでしたでしょうか？

jQueryだともっと簡単にできたかもしれませんがその分重くなりがちなので、javascriptで書いてみることも大切ですね。

方法はいくらでもあると思うので、色々と試してみてください！




この記事をシェアする

  • Twitter
  • Facebook
  • BookmarkB!
  • Pocket

Related Entries

JavaScriptで発生したイベントの種類を確認する方法

CSS（linear-gradient）や画像を使った効果的なグラデーションの表現

Webサイトで3D表現のコンテンツを作成する

JavaScriptで、画像や要素が下からふわっと現れるアニメーションを実装する方法

Tabキーによる要素の選択順を変えたり、要素への選択を許可・拒否する属性

【超簡単】CSSだけで動きのあるナビを作成しよう

この記事を書いた人

noda

noda

めざせ万能デザイナー。HTML/CSS、JavaScript、PHP、JSON、Photoshop、Illustratorを扱っています。好きな食べものはラーメン、うどん。

Category

Tags

CSS (27) Gulp (1) HTML (20) JavaScript (18) jQuery (6) Node.js (3) npm (3) PC操作 (2) Photoshop (3) PHP (5) pickup (8) SEO (2) Vue.js (1) Web design (8) Webサービス (4) WordPress (7) コマンドプロンプト (5) タスクランナー (2) フロントエンド (7) ブログ (1) 高速化 (2)

Archive

Search