仕様書

　・JavaScriptでチェックボタンの有り無しで、条件分岐させて処理させる
　・チェックボタンは2つ用意し、4パターン条件をかく
　・診断ボタンを押すと、診断結果を新らしく表示させる
　・診断ボタンの下にidやクラスのみ記述し、そこに文章が追加されるようにする
　・診断ボタン及び、追加で新しく表示させる文章にanimate.cssを使用

実装画面

昨日の睡眠時間は？っという質問にすればよかった・・・・あとで気づきました。

コード（HTML,CSS,JavaScript書いてます）


<!DOCTYPE html>
<html lang="ja">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link
    rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
  </head>
  <body>
    <div id="sleeping">睡眠時間についてお聞きいたします<br>

    <form name="form1" action="" class="form1">
      <input id="Checkbox1" type="checkbox"/><label for="Checkbox1">睡眠時間6時間未満</label><br/>
      <input id="Checkbox2" type="checkbox"/><label for="Checkbox2">睡眠時間6時間以上</label><br/>
      <input type="button" value="診断" onclick="onButtonClick();" class ="animate__animated animate__rubberBand"/>
    </form>
    <div id="output" class="animate__animated animate__heartBeat output"></div>
  </div>
  </body>

  <style>
    #sleeping{
      font-size: 25px;
      text-align: center;
    }
    #sleeping .form1{
      font-size: 15px;
    }
    #output{
      font-size: 30px;
    }
    .animate__rubberBand,
    .output
    {
      animation-iteration-count: infinite;
    }

  </style>

  <script type="text/javascript" language="javascript">
    function onButtonClick() {
        check1 = document.form1.Checkbox1.checked;
        check2 = document.form1.Checkbox2.checked;
        target = document.getElementById("output");
   
    if (check1 == true && check2 == false) {
          target.innerHTML = "寝ろ！脳が疲れとるかもしれん（千鳥のノブ風）";
       }  else if(check1 == true && check2 == true){
        target.innerHTML = "両方選択すなー！（千鳥のノブ風）";
       } else if(check1 == false && check2 == false){
        target.innerHTML = "どちらかを選択せぇ（千鳥のノブ風）";
    };

    if (check2 == true && check1 == false) {
          target.innerHTML = "よだれダコくん睡眠は十分、明日も頑張れ";
    };
    }
  </script>
</html>

なんだかノブの声が聞こえてくるような・・・・

簡単な解説

診断ボタンにonclick属性を追加


<input type="button" value="診断" onclick="onButtonClick();" 
class ="animate__animated animate__rubberBand"/>

↑onclickに記述しているのはJavaScriptで実装する関数名ですね。これ便利。

ちなみに、このanimate__animatedと記述しているのは、animate.cssを使用する際に必要となります。
バージョン4になってからの情報が少ないため、animate.cssが動かなかった場合公式ページをみるといいかもしれませんね。

animate__rubberBandはanimate.cssのアニメーションの効果です。色々用意されているので、公式ページより選んでみてください。

超簡単にanimate.cssを実装する方法を詳しく

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>

を<head>に追加。

アニメーションしたい箇所にクラスを設けて、クラス名に
animate__animated ○○
○○には追加したいアニメーション名を記述する（デフォルトの設定が動きます）

実装した感想

チェックの有無を簡単なJavaScriptで実装できるのは良いなと思いました。
あと、チェックボタンが押された瞬間に動作するような実装やJQueryで書いてみたりしてみるともっと面白いものができそうだなぁと思いました。

PS.
アニメーションでノブのツッコミの画像が出てくると面白そうですね。
あと読み上げソフトで発火した文章を読み上げてくれるか、ノブの声に近づけた声を作って読み上げさせたり、やりたいこと挙げると私はきりがありません。。。

animate.cssで出来ると思うので、ご興味ある方追加して遊んでみてください。

また、ここは違う、ここはこうしたほうが良いかも？等々ございましたら、ご指摘いただけますと幸いです。
最後までみていただき、ありがとうございました。