Webアプリでクイズを作ろう ～前半：見た目を作る～

プログラミング
2022.02.21

こんにちはるりです。

Webアプリと聞いてパッとどんなものか思い浮かびますか？
「アプリ」だけならよく聞くが「Web」がつくのはあまり聞かないのではないでしょうか。

Webアプリって？

まず、Webアプリとは何なのか。
Webアプリとは、「インターネットに接続して、インストールせずにできるアプリのこと。(Acro visionより引用)」
代表的なもので言うとTwitterやYouTube、最近ではGoogleカレンダーやGoogleスプレッドシートをはじめとしたGoogle製品を多く使ったりするのでは？

スマホアプリと名前こそ区別されますが、違いはダウンロードするかしないかのみで基本的に目的は一緒です。

クイズを作っていく

では早速クイズを作っていこう!
ちなみに今回は4択クイズを作っっていきます。

今回は、HTML・CSSでページのレイアウトを整えJavaScriptでボタンなどの動きを足していく。
サーバーとの通信など少し難しいことはこのクイズでは取り入れないです(というか現段階で僕が十分に知識が無いだけなのは触れないでおこう)

前半の記事では、クイズの仕組みの紹介とHTML・CSSでページレイアウトを完成させるところまでやっていきます。
実際にクイズらしい動きをさせるのは後半の記事なのでよければそちらも見てね。

クイズの仕組み

このクイズの仕組みとしては、まず「クイズ出題ページ」「正解のページ」「不正解のページ」「結果画面」の4枚のページを用意する。

クイズ出題ページには問題文と解答のボタンが4つ用意されており、正解のボタンを押せば正解のページへ、不正解のボタンを押せば不正化のページへ飛ぶようにし、最後に結果画面で点数(正解数)を表示するといったものです。

これではクイズが1つしか出せないって？
NO Problem!

後々詳しく説明しますが、ページ自体は同じ出題ページを使い、中の問題文や解答の選択肢だけを変えて表示するようにするんです!
そうすることでページは1つでクイズは好きなだけ出題することができます。
おもしろそうでしょ？

ページを作っていく

では早速各ページを作っていきますが、正解のページと不正解のページはレイアウトが同じなので実際に作る必要があるのは3つになります。

クイズ出題ページ

まずは出題ページを作っていきましょう。
ここは一番大事だといってもよいのでは？
なので、シンプルかつ見やすいレイアウトにしていきましょう。

出題ページ サンプル

水色の所に問題が表示され、その下のグレーの4つのボタンにそれぞれ回答の選択肢がかかれるといった感じですね。

<!DOCTYPE html>
<html lang="ja">

    <head>
        <meta charset="utf-8">
        <title>Quiz</title>
        <meta name="quiz">
        <link href="main.css" rel="stylesheet">
    </head>

    <body>

        <div class="content">
            
            <div class="left-content"></div>
            
            <div class="center-content">

                <div class="top"></div>

                <div id="question" class="round">
                    This is question
                </div>

                <div class="answers">
                    <button type="button" class="btn round">answer A</button>
                    <button type="button" class="btn round">answer B</button>
                    <button type="button" class="btn round">answer C</button>
                    <button type="button" class="btn round">answer D</button>
                </div>

            </div>

            <div class="right-content"></div>

        </div>
    </body>
</html>
@charset "UTF-8";

.content {
    display: flex;
    height: 100vh;
}

.left-content {
    order: 1;
    width: 20%;
    /* background-color: red; */
    margin: 0.5%;
    padding: 0.5%;
}

.center-content {
    order: 2;
    width: 60%;
    text-align: center;
}
.right-content {
    order: 3;
    width: 20%;
    /* background-color: red; */
    margin: 0.5%;
    padding: 0.5%;
}

/* 角を丸くするclass */
.round {
    border-radius: 10px 10px 10px 10px;
}

.top {
    height: 20%;
}

#question {
    background-color: rgb(125, 209, 248);
    margin-left: 5%;
    margin-right: 5%;
    text-align: center;
    font-size: 30px;
    color: rgb(0, 110, 255);
    height: auto;
}

.answers {
    margin-top: 20px;
    text-align: center;
}
.btn {
    margin-right: 1%;
    margin-left: 1%;
    height: 100px;
    width: 20%;
    font-size: 15px;
    border: none;
    outline: none;
}
.btn {  /* ボタンを押した時に立体感を出す */
    box-shadow: 0 3px rgb(156, 156, 156);
    transform: translateY(-3px);
    transition: 0.175s all;
}
.btn:hover {
    box-shadow: 0 1px rgb(156, 156, 156);
    top: 1px;
    transform: translateY(3px);
}

.right-content {
    padding-top: 3%;
}

コードはこんな感じになっています。

僕は、3カラムのホームページがキレイだと思っている(実際の効果などは知りませんが)のでleft-content・center-content・right-contentの３つを用意し、center-contentにクイズを作っていきます。
htmlの21～23行目で問題文(初期値は「This is question」)を作り、25～30行目でボタンを4つ(初期値は「answer A」～「answer D」)配置しています。
ボタンなどの要素は四角の形をしていますが、角を少し丸めた方がボタンっぽくなるのではないかということで、cssの31行目(border-radius)で四つ角をすべて丸めています。

cssの61～65行目で、ボタンの下3pxに暗めの色を付けることでボタンに立体感を出しています。
また、66～70行目でカーソルが触れたときはボタンが下にズレることでボタンが押されたようなアニメーションにしています。

下の「サンプルページ」から見てみてください。
クイズ出題ページサンプル

正解・不正解のページ

続いて正解、不正解したときに表示されるページです。
今回は正解の方を使っていきます。

正解の時のページ

一番上に赤文字で大きく「正解」と表示され、その下に答えが表示されます。「a＝b」と書かれているところには問題の解説を入れます。
「次へ」と書かれたボタンを押すと次の問題にいくようになっています。
不正解のページは「正解」の部分を「不正解」に変えるだけです。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Quiz</title>
        <meta name="quiz">
        <link href="main.css" rel="stylesheet">
    </head>

    <body>

        <div class="content">

            <div class="left-content"></div>

            <div class="center-content">
                
                <div class="top"></div>

                <div class="judge">正解!!!</div>
                <div id="answer-text">This is Answer</div>

                <div id="explanation">a = b</div>

                <button type="button" id="btn-next" class="round">次へ</button>

            </div>
            
            <div class="right-content"></div>

        </div>
    </body>
</html>
.judge {
    margin: 0% 5% 0% 5%;
    text-align: center;
    font-size: 40px;
    color: red;
    height: auto;
}

#answer-text {
    margin-left: 5%;
    margin-right: 5%;
    text-align: center;
    font-size: 30px;
    color:rgb(0, 110, 255);
    height: auto;
}

#explanation {
    margin-top: 3%;
    margin-left: 5%;
    margin-right: 5%;
    text-align: center;
    font-size: 25px;
    color: rgb(100, 100, 100);
    height: auto;
}

#btn-next {
    width: 10%;
    margin-top: 5%;
    margin-left: auto;
    text-align: center;
    font-size: 15px;
    border: none;
    outline: none;
}
#btn-next {
    box-shadow: 0 2px rgb(156, 156, 156);
    transform: translateY(-2px);
    transition: 0.175s all;
}
#btn-next:hover {
    box-shadow: 0 0.5px rgb(156, 156, 156);
    top: 0.5px;
    transform: translateY(2px);
}

基本的に変わったことはしておらず、ボタンも先ほどと同様に立体感を出しています。
1～26行目で表示される文字の色や大きさを指定しています。

正解ページサンプル

結果画面

クイズを何問も出す場合は、最後に正解数が表示された方がクイズを受ける側は楽しいでしょう。
なので、全てのクイズが終了した後に表示される結果画面も必要になります。

結果画面

「result」と書かれているところに点数が表示されますが、これはJabaScriptで表示するため今が点数が出ません。詳しくは後半の記事で解説します。
その下の「最初に戻る」ボタンで1問目に戻るようになっています。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>CorrectSample</title>
        <meta name="quiz">
        <link href="main.css" rel="stylesheet">
    </head>

    <body>

        <div class="content">

            <div class="left-content"></div>

            <div class="center-content">
                
                <div class="top"></div>

                <div class="judge">正解!!!</div>
                <div id="answer-text">This is Answer</div>

                <div id="explanation">a = b</div>

                <button type="button" id="btn-next" class="round">次へ</button>

            </div>
            
            <div class="right-content"></div>
        </div>
    </body>
</html>
/* 結果画面 */
#result {
    height: auto;
    padding-bottom: 5%;
    font-size: 30px;
}

#restart {
    width: 20%;
    height: 5%;
    outline: none;
    border: none;
    background-color:rgb(212, 212, 212);
    color: black;
}
#restart:hover {
    background-color:rgb(100, 100, 100);
    color: rgb(255, 255, 255);
}

今回のボタンは今までのと違い、カーソルが上に来たら色が濃くなるようになっています。
これはcssの16～19行目で指定しています。

結果画面サンプル

終わり

どうでしたでしょうか。
各ページの見た目は特に奇抜なものにはしていません。
特徴があるとしたら、ボタンに立体感を出しているところです。(ここは頑張ったので是非参考にしてほしい)

後半では実際にこれらのページにクイズを入れて、動きを付けていきますのでそちらもぜひご覧ください。

実際の完成例を載せておきますので、一度見てみてください。
クイズ完成例

それではまた。

Twitter
YouTube

コメント