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

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

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

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

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で書いてみることも大切ですね。

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

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

まとめ

この記事を書いた人

Category

Tags

Archive

Search

まとめ

Related Entries

この記事を書いた人

Category

Tags

Archive

Search