Membuat Kuis dengan PHP

Membuat Kuis dengan PHP

Membuat Kuis dengan PHP
Membuat Kuis dengan PHP

Cara Membuat Kuis atau Soal Pilihan Ganda dengan PHP, nah sesuai judulnya tentu ini Berbasis Web yang akan kita buat, nah aplikasi ini bisa menjadi bahan pelajaran kalian, atau bahan tugas kalian bagi yang masih sekolah hahaha, simple - simple aja asal jadi, sekalian jangan lupa ya bilangin ke gurunya dari web ruang coder, hahaha promosi, oke sobat  Ini sangat mudah dibuat. Tapi, bila kalian memiliki pengetahuan tentang PHP. Kuis ini dibuat dengan PHP, HTML &CSS, Mudah dibuat dan dapat digunakan di mana saja. Program ini pada dasarnya didasarkan pada PHP, tetapi kalian tidak perlu repot membuat database untuk itu. admin telah membuat hanya dengan bantuan method = "post"  &  var $ (variabel PHP).

Membuat Kuis atau Soal dengan PHP

admin telah membuat program kuis yang sangat sederhana dan sekarang admin akan membagikan Source Code Kuis ini . Seperti biasa, admin membagikan kode yang bersih, dasar & sederhana . Menurut admin inilah kekuatan blog ini. Ini sangat sederhana. Jadi, mudah dimengerti. Program ini memiliki banyak masalah. admin  telah mengatakan ini dasar untuk pembelajaran dan pemahaman yang lebih baik. Berikut ini pratinjau di bawah ini:


Ada 3 file, "quiz.php" "result.php" & "style.css" . kalian  harus membuat 3 file bernama di sini diberikan.

Pertama kalian , buat file bernama "quiz.php". di file ini kalian harus membuat template kuis dengan tanya jawab. Di bagian <head> </head>  kalian harus menghubungkan nama file CSS "style.css" & Letakkan "result.php" di button submit.
Buat file PHP bernama quiz.php dan masukkan kode-kode yang diberikan di bawah ini.

<!DOCTYPE html>
<!--code by RuangCoder (www.ruangcoder.com) -->
<head>
    <meta charset=UTF-8" />
    
    <title>PHP QUIZ | RuangCoder.com</title>
    
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

    <div id="page-wrap">

        <h1>Simple Quiz Built On PHP</h1>
        
        <form action="result.php" method="post" id="quiz">
        
            <ol>
            
                <li>
                
                    <h3>WordPress is a...</h3>
                    
                    <div>
                        <input type="radio" name="question-1-answers" id="question-1-answers-A" value="A" />
                        <label for="question-1-answers-A">A) Software </label>
                    </div>
                    
                    <div>
                        <input type="radio" name="question-1-answers" id="question-1-answers-B" value="B" />
                        <label for="question-1-answers-B">B) Web App</label>
                    </div>
                    
                    <div>
                        <input type="radio" name="question-1-answers" id="question-1-answers-C" value="C" />
                        <label for="question-1-answers-C">C) CMS</label>
                    </div>
                    
                    <div>
                        <input type="radio" name="question-1-answers" id="question-1-answers-D" value="D" />
                        <label for="question-1-answers-D">D) Other</label>
                    </div>
                
                </li>
                
                <li>
                
                    <h3>SEO is Part Of...</h3>
                    
                    <div>
                        <input type="radio" name="question-2-answers" id="question-2-answers-A" value="A" />
                        <label for="question-2-answers-A">A) Video Editing</label>
                    </div>
                    
                    <div>
                        <input type="radio" name="question-2-answers" id="question-2-answers-B" value="B" />
                        <label for="question-2-answers-B">B) Graphic Designing</label>
                    </div>
                    
                    <div>
                        <input type="radio" name="question-2-answers" id="question-2-answers-C" value="C" />
                        <label for="question-2-answers-C">C) Web Designing</label>
                    </div>
                    
                    <div>
                        <input type="radio" name="question-2-answers" id="question-2-answers-D" value="D" />
                        <label for="question-2-answers-D">D) Digital Marketing</label>
                    </div>
                
                </li>
                
                <li>
                
                    <h3>PHP is a....</h3>
                    
                    <div>
                        <input type="radio" name="question-3-answers" id="question-3-answers-A" value="A" />
                        <label for="question-3-answers-A">A) Server Side Script</label>
                    </div>
                    
                    <div>
                        <input type="radio" name="question-3-answers" id="question-3-answers-B" value="B" />
                        <label for="question-3-answers-B">B) Programming Language</label>
                    </div>
                    
                    <div>
                        <input type="radio" name="question-3-answers" id="question-3-answers-C" value="C" />
                        <label for="question-3-answers-C">C) Markup Language</label>
                    </div>
                    
                    <div>
                        <input type="radio" name="question-3-answers" id="question-3-answers-D" value="D" />
                        <label for="question-3-answers-D">D) None Of Above These</label>
                    </div>
                
                </li>
                
                <li>
                
                    <h3>Localhost IP is..</h3>
                    
                    <div>
                        <input type="radio" name="question-4-answers" id="question-4-answers-A" value="A" />
                        <label for="question-4-answers-A">A) 192.168.0.1</label>
                    </div>
                    
                    <div>
                        <input type="radio" name="question-4-answers" id="question-4-answers-B" value="B" />
                        <label for="question-4-answers-B">B) 127.0.0.0</label>
                    </div>
                    
                    <div>
                        <input type="radio" name="question-4-answers" id="question-4-answers-C" value="C" />
                        <label for="question-4-answers-C">C) 1080:80</label>
                    </div>
                    
                    <div>
                        <input type="radio" name="question-4-answers" id="question-4-answers-D" value="D" />
                        <label for="question-4-answers-D">D) Any Other</label>
                    </div>
                
                </li>
                
                <li>
                
                    <h3>RuangCoder Is For</h3>
                    
                    <div>
                        <input type="radio" name="question-5-answers" id="question-5-answers-A" value="A" />
                        <label for="question-5-answers-A">A) Web Designer</label>
                    </div>
                    
                    <div>
                        <input type="radio" name="question-5-answers" id="question-5-answers-B" value="B" />
                        <label for="question-5-answers-B">B) Web Developer</label>
                    </div>
                    
                    <div>
                        <input type="radio" name="question-5-answers" id="question-5-answers-C" value="C" />
                        <label for="question-5-answers-C">C) Graphic Designer</label>
                    </div>
                    
                    <div>
                        <input type="radio" name="question-5-answers" id="question-5-answers-D" value="D" />
                        <label for="question-5-answers-D">D) All Above These</label>
                    </div>
                
                </li>
            
            </ol>
            
            <input type="submit" value="Submit" class="submitbtn" />
        
        </form>
    
    </div>


</body>

</html>

Sekarang buat file PHP bernama result.php dan masukkan kode ini.

<!DOCTYPE html>
<!--code by RuangCoder (www.ruangcoder.com) -->
<html>

<head>
    <meta charset=UTF-8" />
    
    <title>PHP Quiz</title>
    
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

    <div id="page-wrap">

        <h1>Result | RuangCoder.com</h1>
        
        <?php
            
            $answer1 = $_POST['question-1-answers'];
            $answer2 = $_POST['question-2-answers'];
            $answer3 = $_POST['question-3-answers'];
            $answer4 = $_POST['question-4-answers'];
            $answer5 = $_POST['question-5-answers'];
        
            $totalCorrect = 0;
            
            if ($answer1 == "C") { $totalCorrect++; }
            if ($answer2 == "D") { $totalCorrect++; }
            if ($answer3 == "A") { $totalCorrect++; }
            if ($answer4 == "B") { $totalCorrect++; }
            if ($answer5 == "D") { $totalCorrect++; }
            
            echo "<div id='results'>$totalCorrect / 5 correct</div>";
            
        ?>
    
    </div>

</body>

</html>

Langkah terakhir, Buat file CSS bernama style.css dan masukkan kodenya.

/*
    Code By RuangCoder (https://www.ruangcoder.com)
*/


body{ font: 14px Georgia, serif; }

#page-wrap { width: 500px; margin: 0 auto;}

h1  { margin: 25px 0; font: 18px Georgia, Serif; text-transform: uppercase; letter-spacing: 3px; }

#quiz input {
    vertical-align: middle;
}

#quiz ol {
   margin: 0 0 10px 20px;
}

#quiz ol li {
   margin: 0 0 20px 0;
}

#quiz ol li div {
   padding: 4px 0;
}

#quiz h3 {
   font-size: 17px; margin: 0 0 1px 0; color: #666;
}

#results {
    font: 44px Georgia, Serif;
}


Penutup

Nah sampai disini kalian telah berhasil Membuat Aplikasi Kuis atau Soal dengan PHP, mungkin artikel nya sampai disini saja, semoga bermanfaat buat kalian, dan terimakasih sudah berkunjung, jangan bosan - bosan untuk berkunjung.

Anda mungkin menyukai postingan ini