• Màn hình chính và mã nguồn:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Trang chủ</title>

    <meta name="description" content="Source code generated using layoutit.com">
    <meta name="author" content="LayoutIt!">
    <link href="css/style.css" rel="stylesheet">
    <style type="text/css" media="screen">
        footer{
            Padding-top:20%        
        }
        body{
            background-color:#FFFF99
        }
    </style>
</head>

<body style="margin:0; padding:0; height:100%;">
    <header id="header" style="background-color: #FFFF99;">
        <center><h1>Vocabulary</h1></center>
    </header>
    <center>
    <div class="container">

        <ol>
            <li><a href="2.php?topic=0" style="text-decoration: none;">Relationship</a></li>
            <li><a href="2.php?topic=1" style="text-decoration: none;">Human body</a></li>
            <li><a href="2.php?topic=2" style="text-decoration: none;">Subject</a></li>
            <li><a href="2.php?topic=3" style="text-decoration: none;">Animal</a></li>
            <li><a href="2.php?topic=4" style="text-decoration: none;">Natural</a></li>
            <li><a href="2.php?topic=5" style="text-decoration: none;">Food</a></li>
            <li><a href="2.php?topic=6" style="text-decoration: none;">Country</a></li>
            <li><a href="2.php?topic=7" style="text-decoration: none;">Room</a></li>
            <li><a href="2.php?topic=8" style="text-decoration: none;">Sport</a></li>
            <li><a href="2.php?topic=9" style="text-decoration: none;">School</a></li>
        </ol>

        <div class="footer" >
            </center>
            <center>
                <footer>@C3H, Inc.</footer>
            </center>
        </div>    
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/scripts.js"></script>
</body>
</html>
  • Màn hình câu hỏi và mã nguồn

<?php
$db = array(
    'server' => 'localhost',
    'user' => 'u310963295_root',
    'pass' => '12345678',
    'dbname' => 'u310963295_vocab'
);

$conn = mysqli_connect($db['server'], $db['user'], $db['pass'], $db['dbname']);

if (!$conn) {
    die('ket noi that bai' . mysqli_connect_error($conn));
}

$sql = "select * from db order by Id asc";
$result = mysqli_query($conn, $sql);

if (!$result) {
    die('Error' . mysqli_error($conn));    
}

if (mysqli_num_rows($result) > 0) {
    $count = 0;
    $word = array();
    $meaning = array();
    while ($row = mysqli_fetch_row($result)) {
        $id[$count] = $row[0];
        $word[$count] = $row[1];
        $meaning[$count] = $row[2];
        $count++;
    }
}

session_start();
$temp = $_SESSION['tId'];
?>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>3</title>

        <meta name="description" content="Source code generated using layoutit.com">
        <meta name="author" content="LayoutIt!">

        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <style type="text/css" media="screen">
            footer{
                Padding-top:35%
            }
            body{
                background-color: #FFFF99;
            }
        </style>
    </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <header id="header" style="background-color: #FFFF99;">
                        <center>
                            <h1 style="color: Red" ><?php echo $_SESSION['tTopic'] ?></h1>
                        </center>
                    </header>
                    <div class="col-md-12">
                        <div id="clockdiv">
                            <center>
                                <div> 
                                    <div class="smalltext"><a> <span class="seconds"></span> Seconds</a></div>
                                </div>
                            </center>
                            <script>
                                function getTimeRemaining(endtime) {
                                var t = Date.parse(endtime) - Date.parse(new Date());
                                var seconds = Math.floor((t / 1000) % 60);
                                var minutes = Math.floor((t / 1000 / 60) % 60);

                                return {
                                    'total': t,
                                    'seconds': seconds
                                };
                                }

                                function initializeClock(id, endtime) {
                                    var clock = document.getElementById(id);
                                    var secondsSpan = clock.querySelector('.seconds');

                                function updateClock() {
                                    var t = getTimeRemaining(endtime);
                                    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
                                    if (t.total <= 0) {
                                        clearInterval(timeinterval);
                                        window.location = "4.php";
                                    }
                                }
                                updateClock();
                                var timeinterval = setInterval(updateClock, 1000);
                                }
                                var deadline = new Date(Date.parse(new Date()) + 10 * 1000);
                                initializeClock('clockdiv', deadline);
                            </script>
                        </div>    
                        <?php
                        $arr = array(
                            $temp*10+$_SESSION["dem"]%10,
                            $temp*10+(rand(5,9)+$_SESSION["dem"])%10,
                            $temp*10+(rand(1,4)+$_SESSION["dem"])%10
                        );
                        $r = rand(0,2);
                        $a = $arr[$r];
                        $b = $arr[($r+1)%3];
                        $c = $arr[($r+2)%3];
                        $check = array (false,false,false);
                        if ($a==$temp*10+$_SESSION["dem"]%10) {$check[0]=true;}
                            else if ($b==$temp*10+$_SESSION["dem"]%10) {$check[1]=true;}
                                else {$check[2]=true;};
                        ?>
                        <div class="col-md-12">
                            <center> <h2><?php echo $word[$temp*10+$_SESSION["dem"]%10] ?> </h2> </center>
                        </div>
                        <div class="col-md-12">
                            <center>
                                <label class="btn-warning element-animation4 btn-block">
                                    <?php 
                                        if ($check[0]) {echo '<a href="3.php">'.$meaning[$a].'</a>';} 
                                        else {echo '<a href="4.php">'.$meaning[$a].'</a>';}
                                    ?>
                                </label>
                                <label class="btn-warning element-animation4 btn-block">
                                    <?php 
                                        if ($check[1]) {echo '<a href="3.php">'.$meaning[$b].'</a>';} 
                                        else {echo '<a href="4.php">'.$meaning[$b].'</a>';}
                                    ?>
                                </label>
                                <label class="btn-warning element-animation4 btn-block">
                                    <?php 
                                        if ($check[2]) {echo '<a href="3.php">'.$meaning[$c].'</a>';} 
                                        else {echo '<a href="4.php">'.$meaning[$c].'</a>';}
                                    ?>
                                </label>
                            </center>
                        </div>    
                        <?php
                        $_SESSION["dem"]++
                        ?>
                    </div>
                    <div class="footer" >
                        <center>
                            <footer>@C3H, Inc.</footer>
                        </center>
                    </div>    
                </div>
            </div>

            <script src="js/jquery.min.js"></script>
            <script src="js/bootstrap.min.js"></script>
            <script src="js/scripts.js"></script>
    </body>
</html>
  • Mã nguồn chức năng đồng hồ đếm ngược trong lúc trả lời câu hỏi
function getTimeRemaining(endtime) {
            var t = Date.parse(endtime) - Date.parse(new Date());
            var seconds = Math.floor((t / 1000) % 60);
            var minutes = Math.floor((t / 1000 / 60) % 60);
            return {
                'total': t,
                'seconds': seconds
                };
                }

function initializeClock(id, endtime) {
            var clock = document.getElementById(id);
            var secondsSpan = clock.querySelector('.seconds');
            function updateClock() {
                    var t = getTimeRemaining(endtime);
                    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
                    if (t.total <= 0) {
                        clearInterval(timeinterval);
                        window.location = "4.php";
                            }
                        }
                    updateClock();
                    var timeinterval = setInterval(updateClock, 1000);
                        }
                    var deadline = new Date(Date.parse(new Date()) + 10 * 1000);
                    initializeClock('clockdiv', deadline);
  • Màn hình chọn Back hoặc Start game và mã nguồn

<?php
$db = array(
    'server' => 'localhost',
    'user' => 'u310963295_root',
    'pass' => '12345678',
    'dbname' => 'u310963295_vocab'
);

$conn = mysqli_connect($db['server'], $db['user'], $db['pass'], $db['dbname']);

if (!$conn) {
    die('ket noi that bai' . mysqli_connect_error($conn));
}

$sql = "select * from topic order by Id asc";
$result = mysqli_query($conn, $sql);

if (!$result) {
    die('Error' . mysqli_error($conn));
}

if (mysqli_num_rows($result) > 0) {
    $count = 0;
    $topic = array();
    while ($row = mysqli_fetch_row($result)) {
        $topic[$count] = $row[1];
        $count++;
    }
}

session_start();
$_SESSION['dem']=0;

if(isset($_GET['topic'])){
    $_SESSION['tId']=$_GET['topic'];
    $_SESSION['tTopic']=$topic[$_GET['topic']];
    } 
else {
    $_SESSION['tId']=0;
    $_SESSION['tTopic']=$topic[0];
}
?>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>2</title>

    <meta name="description" content="Source code generated using layoutit.com">
    <meta name="author" content="LayoutIt!">
    <link href="css/style.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css" media="screen">
        footer{
            Padding-top:10%
        }
        body{
            background-color: #FFFF99;
        }
    </style>

  </head>
  <body>
    <center>
    <h2 id="" style="color: Red"><?php echo $_SESSION['tTopic'] ?><h2>
    <div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <button type="button" class="btn btn-default">
                <a href = "index.php" style="text-decoration: none;"> Back </a>
            </button> 
            <button type="button" class="btn btn-default">                
                <a href = "3.php" style="text-decoration: none;">Start Game</a>
            </button>

        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <br><img alt="Bootstrap Image Preview" src="http://www.accollege.edu.au/wp-content/uploads/2016/10/english-1.jpg" />
        </div>
    </div>
</div>
</center>
    <footer style="text-align: center">
    © C3H, Inc.
    </footer>


    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/scripts.js"></script>
  </body>
</html>

  • Kiểm thử tự động: trong quá trình làm xuất hiện 1 số lỗi nên vẫn không kiểm thử tự động được.

  • Đã kiểm thử bằng tay các chức năng của web: chức năng chọn chủ đề, chức năng Back, chức năng Start game, chức năng trả lời câu hỏi, chức năng Play again. Tất cả các chức năng đều hoạt động bình thường và ổn định

  • Kịch bản kiểm thử bằng tay:

    • Trang chủ -> chọn chủ đề (Relationship) -> Chọn Start game -> chọn đáp án sai -> chọn Play again.

    • Trang chủ -> chọn chủ đề (Relationship) -> chọn Back.

    • Trang chủ -> chọn chủ đề (Relationship) -> Chọn Start game -> chọn đáp án sai -> chọn Menu.

results matching ""

    No results matching ""