IMG-LOGO
×

Tài Liệu Học

Khoá học lập trình Javascript

Khai báo biến & hàm mặc định trong Javascript

[Video] Tạo dự án JS đầu tiên - Lập Trình JS [Video] Khai báo biến - toán tử - Lập Trình JavaScript [Video] Các hàm sẵn có trong js - Khoá Học Lập Trình JS

Mệnh đề điều kiện

[Video] Cấu trúc điều kiện if else switch - Lập trình Javascript

Vòng lặp for, while, do..while

[Video] Tìm hiểu vòng lặp for, while, do .. while trong Javascript

Array & Function & Object

[Video] Tìm hiểu Function trong Javascript [Video] Tìm hiểu Array trong Javascript [Video] Khai báo Object trong Javascript [Video] Gửi giữ liệu qua các trang html bằng javascript - HTML/CSS [Video] Bài tập - ôn tập mảng - quản lý sinh viên - Lập trình Javascript [Video] Khai báo function trong Object - Lập trình Javascript [Video] Tìm hiểu function trong string - Lập trình Javascript

Xử lý sự kiện & thao tác thẻ HTML

[Video] Event - Lập Trình JS [Video] Tương tác lên tags trong HTML bằng JS [Video] Thêm tags vào tags khác bằng javascript + ví du thêm sinh viên - lập trình JS [Video] Tương tác thẻ HTML bằng Javascript qua ví dụ đặt đơn hàng (Order Entry Form) [Video] Bài tập - Quản lý sản phẩm bằng javascript - lập trình javascript [Video] Quản lý sinh viên - Lập trình Javascript

Lưu trữ Javascript

[Video] Cookie - khoá học lập trình JavaScript [Video] Localstorage - Khoá học lập trình JavaScript [Video] Lưu trữ thông tin sinh viên bằng LocalStorage - Lập trình Javascript

Examination & Ôn Tập Tổng Quát

1000 Bài tập JavaScript - Lập Trình JavaScript




Trang Chủ Học JS GAME - AI LÀ TRIỆU PHÚ - JavaScript

GAME - AI LÀ TRIỆU PHÚ - JavaScript

by GokiSoft.com - 00:27 03/10/2021 3,034 Lượt Xem

GAME - AI LÀ TRIỆU PHÚ

#game.css


body {
    margin: 50px;
}
h1 {
    text-align: center;
}
.char {
    float: left;
    color: #3498db;
    font-size: 30px;
    line-height: 45px;
    margin-left: 2px;
    margin-top: 2px;
    background-color:#FFFFFF;
    border-radius: 50%;
    height: 45px;
    width: 45px;
}
#page {
    color:red;
    margin-bottom:20px;
}
#question-number {
    background-color: #ffffff;
    color: #27ae60;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    line-height: 30px;
    margin-right: 10px;
    padding: 5px 10px;
}
#question {
    margin-bottom:20px;
    color: #FFFFFF;
    border-radius: 4em 0px 4em 0px;
    -moz-border-radius: 4em 0px 4em 0px;
    -webkit-border-radius: 4em 0px 4em 0px;
    border: 0px solid #000000;
    line-height: 100px;
    height:100px;
    width:100%;
    text-align: center;
    font-weight: bold;
    background-color:#27ae60;
    text-transform: capitalize;
}
#question:hover {
    background-color: #2ecc71;
}
#point {
    display: block;
    font-size: 20px;
    font-weight:bold;
}
#a, #b, #c, #d {
    font-weight: bold;
    text-transform: uppercase;
}
#win {
    display:none;
}
#each-question {
    max-width:800px;
    text-align: center;
    margin: 0 auto;
}
#characterBox {
    text-align: center;
    margin: 10px;
}
.container {
    padding-top: 30px;
}
.box {
    display: inline-block;
    background-color : #3498db;
    color: #FFFFFF;
    border-radius: 2em 2em;
    line-height: 50px;
    height:50px;
    width:100%;
    font-weight:bold;
}
.boxWrong {
    display: inline-block;
    background-color : #3498db;
    color: #3498db;
    border-radius: 2em 2em;
    line-height: 50px;
    height:50px;
    width:100%;
    font-weight:bold;
    pointer-events:none;
}
.answerBox {
    display: inline-block;
    background-color : #3498db;
    color: #FFFFFF;
    border-radius: 2em 2em;
    line-height: 50px;
    height:50px;
    width:100%;
    font-weight:bold;
}
td {
    padding: 2px 2px;
    width: 500px;
}
#footer {
    margin-top: 30px;
}
.character {
    position: absolute;
    display:block;
    line-height: 30px;
    height:30px;
    width:30px;
    font-weight: bold;
    z-index:-1;
}
.box:hover {
    background-color: #2980b9;
}
#answer {
    margin: 20px;
}
#submit-button {
    float: right;
}
#sellector {
}
#button {
    margin: 30px;
}
#next-question, #restart-game {
    margin: 10px;
    text-align: center;
}
#submit-answer {
    float: left;
    margin-top: 30px;
}
#withdraw-button {
    float:right;
    margin-top: 30px;
    margin-left:10px;
}
#help5050-button {
    float:right;
    margin-top: 30px;
    margin-left:10px;
}
#helpSurvey-button {
    float:right;
    margin-top: 30px;
    margin-left:10px;
}
.rewardStep {
    height: 100px;
    width: 40px;
    background-color: #3498db;
    color: #ffffff;
    margin-top: 30px;
    margin-left: 1px;
    display: inline-block;
}
.specialRewardStep {
    height: 100px;
    width: 40px;
    background-color: #2980b9;
    color: #ffffff;
    margin-top: 30px;
    margin-left: 1px;
    display: inline-block;
}
.rewardStep:hover {
    background-color: #2980b9;
    color: #ffffff;
}
.specialRewardStep:hover {
    background-color: #3498db;
    color: #ffffff;
}
.number {
    position: absolute;
    color: #FFFFFF;
    font-size:30px;
    font-weight:bold;
    margin: 4px;
    z-index:2;
}
.specialNumber {
    position: absolute;
    color: yellow;
    font-size:30px;
    line-height: 30px;
    font-weight:bold;
    margin: 4px;
    z-index:2;
}
#reward {
    text-align: center;
}
#survey-region {
    text-align: center;
    border: 5px #3498db solid;
    margin-top: 30px;
    background-color: #ecf0f1;
}
.surveyBoard {
    text-align: left;
    margin: 20px;
}
.percent {
    width : 0.7%;
    height : 28px;
    background-color: #3498db;
    display: inline-block;
}
.startPercent {
    width : 2px;
    height : 28px;
    background-color: #000000;
    display: inline-block;
}
.ABCD {
    font-weight: bold;
    height:28px;
    line-height:28px;
    margin-right: 20px;
}
.percentNumber {
    font-weight: bold;
    height : 28px;
    display: inline-block;
    color: #000000;
    float: right;
    margin-left: 20px;
    margin-right:20px;
}
#chartA, #chartB, #chartC, #chartD {
    height:30px;
    line-height:30px;
}


#game.html


<title>GokiSoft - AI LA TRIEU PHU</title>
<link rel="stylesheet" type="text/css" href="game.css">

<body>
<div class="container">
    <!-- <h1><img src="https://res.cloudinary.com/ziczacgroup/image/upload/v1587623413/qhwncq3wtjkrsyke6ayw.png" style="height: 100px; width: auto;"></h1> -->
    <h1>Chương Trình <strong style="color: red">AI LÀ TRIỆU PHÚ</strong> - PHIÊN BẢN GOKISOFT</h1>
    <div id="each-question" class="row">
        <table>
            <thead>
                <tr>
                    <div id="question"> <span id="question-number"></span>
 <span id="display-question"></span>

                    </div>
                    <tr>
            </thead>
            <tbody id="sellector">
                <tr>
                    <td>
                        <div id="boxA" class="box"></div>
                    </td>
                    <td>
                        <div id="boxB" class="box"></div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div id="boxC" class="box"></div>
                    </td>
                    <td>
                        <div id="boxD" class="box"></div>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="form-group" id="board-button">
            <button class="btn btn-info" id="submit-answer">Xác Nhận Trả Lời</button>
            <button class="btn btn-default" id="withdraw-button">Dừng Cuộc Chơi</button>
            <button class="btn btn-info" id="help5050-button">50 : 50</button>
            <button class="btn btn-primary" id="helpSurvey-button">Khảo Sát</button>
        </div>
        <div class="form-group" id="result-button">
            <button class="btn btn-success" id="next-question">Câu Hỏi Tiếp Theo</button>
            <button class="btn btn-danger" id="restart-game">Chơi Lại</button>
        </div>
        <div class="notice">
            <div class="alert" id="alert"></div>
        </div>
    </div>
    <button class="btn btn-success" id="create-game-button" style="display: none;">Create Game</button>
    <div class="raw" id="reward"></div>
    <div class="raw" id="survey-region">
        <div class="surveyBoard">
            <div class="raw" id="chartA"></div>
            <div class="raw" id="chartB"></div>
            <div class="raw" id="chartC"></div>
            <div class="raw" id="chartD"></div>
        </div>
    </div>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="game.js"></script>
</div>
</body>


#game.js


Array.prototype.clone = function () {
    return this.slice(0);
};


$(document).ready(function () {

    Millionaire = (function () {
        function Millionaire() {
            this._questionArray = [];
            this._questionContent = [];
            this._answerArray = [];

            var questionList = getValueByKey('questionList')
            count = 0;
            for (;questionList.length > 0;) {
                rad = Math.floor(Math.random() * questionList.length)
                q = questionList[rad]
                this._questionContent.push(q.question)
                this._questionArray.push(q.answerA)
                this._questionArray.push(q.answerB)
                this._questionArray.push(q.answerC)
                this._questionArray.push(q.answerD)
                this._questionArray.push(q.answer)
                this._answerArray.push('box' + q.answer)

                questionList.splice(rad, 1)
                count++
                if(count >= 15) {
                    break;
                }
            }

            this._selectArray = [];
            this._color = '#3498db';
            this._boardPage = 0;
            this.hide($('#next-question'));
            this.hide($('#restart-game'));
            this.hide($("#survey-region"));
            this._number5050 = 0;
            this._keep = 0;
            _this = this;

        }

        Millionaire.prototype.startGame = function () {
            this._use5050 = false;
            this._useSurvey = false;
            // this.hide($("#question-form"));
            // this.hide($("#button"));
            this.show($("#board-button"));
            this.show($('#each-question'));
            this.hide($("#submit-answer"));
            this.hide($('#next-question'));
            this.hide($("#restart-game"));
            this.hide($("#alert"));
            this._boardPage = 0;
        };

        Millionaire.prototype.setMaxCharacter = function () {
            var maxABCD = 40;
            $("#a").attr('maxlength', maxABCD);
            $("#b").attr('maxlength', maxABCD);
            $("#c").attr('maxlength', maxABCD);
            $("#d").attr('maxlength', maxABCD);
            $("#inputQ").attr('maxlength', '255');
        };


        Millionaire.prototype.showBoard = function () {
            var index = this._boardPage * 5;
            this.show($("#withdraw-button"));
            this.showEditButton();
            $("#question-number").html(this._boardPage + 1);
            $("#display-question").html(this._questionContent[this._boardPage]);
            $("#boxA").append("<span class='char'>A</span>" + this._questionArray[index]);
            $("#boxB").append("<span class='char'>B</span>" + this._questionArray[index + 1]);
            $("#boxC").append("<span class='char'>C</span>" + this._questionArray[index + 2]);
            $("#boxD").append("<span class='char'>D</span>" + this._questionArray[index + 3]);
            var answerID = "#" + _this._answerArray[this._boardPage];
            $(answerID).attr('class', 'answerBox');
            this.show($("#reward"));
            this.hide($("#survey-region"));
            this.show5050();
            this.showSurvey();
        };

        Millionaire.prototype.restartGame = function () {
            this._boardPage = 0;
            $("#question-number").html(this._boardPage + 1);
            $("#display-question").html(this._questionContent[this._boardPage]);
            ($("#reward")).empty();
            this.show($('#board-button'));
            this.hide($("#submit-answer"));
            this.hide($('#restart-game'));
            this.hide($('#next-question'));
            this.hide($('#alert'));
            this._use5050 = false;
            this._useSurvey = false;
            this._number5050 = 0;
            this.showBoard();


        };


        Millionaire.prototype.drawMap = function () {
            var countQuestion = this._answerArray.length;

            for (var i = 1; i <= countQuestion; i++) {
                if (i % 5 !== 0) {
                    $("#reward").append("<div class='rewardStep' id='" + i + "'><p class='number'>" + i + "</p></div>")
                } else {
                    $("#reward").append("<div class='specialRewardStep' id='" + i + "'><p class='specialNumber'>" + i + "</p></div>")
                }
            }

        };

        Millionaire.prototype.changeStepColor = function () {
            var currentStep = this._boardPage + 1;
            for (var i = 1; i < currentStep; i++) {
                var id = "#" + i;
                $(id).css('background-color', '#2ecc71');
            }
            currentStep = "#" + currentStep;
            $(currentStep).css('background-color', '#f39c12');


        };


        Millionaire.prototype.nextQ = function () {
            this._boardPage++;
            var step = this._boardPage + 1;
            this.hide($('#submit-answer'));
            this.hide($('#restart-game'));
            this.hide($('#next-question'));
            this.show($('#board-button'));
            this.hide($('#alert'));

            $("#question-number").html(this._boardPage + 1);
            if (step % 5 == 0) {
                $("#question-number").css("background-color", "yellow");
                $("#display-question").css("color", "yellow");
            } else {
                $("#question-number").css("background-color", "#ffffff");
                $("#display-question").css("color", "#ffffff");
            }

            $("#display-question").html(this._questionContent[this._boardPage]);


        };


        Millionaire.prototype.validate = function () {

            if ($("#a").val() == "" || $("#b").val() == "" || $("#c").val() == "" || $("#d").val() == "" || $("#input-letter").val() == "" || $("#inputQ").val() == ""

            ) {

                if (alert("Please fill all blanks before save and continue, Press Create Game to skip this question"));
                return false
            }
            return true;

        };


        Millionaire.prototype.updateValue = function () {
            // var index = (this._boardPage) * 5;

            // _this._questionContent[this._boardPage] = $("#inputQ").val().charAt(0).toUpperCase() + $("#inputQ").val().slice(1);
            // _this._answerArray[this._boardPage] = "box" + $("#input-letter").val();
            // this._questionArray[index] = $("#a").val().charAt(0).toUpperCase() + $("#a").val().slice(1);
            // this._questionArray[index + 1] = $("#b").val().charAt(0).toUpperCase() + $("#b").val().slice(1);
            // this._questionArray[index + 2] = $("#c").val().charAt(0).toUpperCase() + $("#c").val().slice(1);
            // this._questionArray[index + 3] = $("#d").val().charAt(0).toUpperCase() + $("#d").val().slice(1);
            // this._questionArray[index + 4] = $("#input-letter").val();
        };


        Millionaire.prototype.showForm = function () {

            var index = (this._boardPage) * 5;
            // this.show($("#question-form"));
            // this.show($("#button"));
            // this.hide($('#each-question'));
            // this.hide($('#survey-region'));
            $("#inputQ").val(_this._questionContent[this._boardPage]);
            $("#a").val(this._questionArray[index]);
            $("#b").val(this._questionArray[index + 1]);
            $("#c").val(this._questionArray[index + 2]);
            $("#d").val(this._questionArray[index + 3]);

            if (_this._questionArray[index + 4]) {
                $("#input-letter").val(_this._questionArray[index + 4]);
            } else {
                $("#input-letter").val("A");
            }

            if (this._boardPage === 0) {
                document.getElementById("prev-button").disabled = true;
            } else {
                document.getElementById("prev-button").disabled = false;
            }
            if (this._boardPage === 14) {
                document.getElementById("next-button").disabled = true;
            } else {
                document.getElementById("next-button").disabled = false;
            }
            ($("#reward")).empty();
        };

        Millionaire.prototype.hide = function (elementDom) {
            this._elementDom = elementDom;
            this._elementDom.css('display', 'none');

        };

        Millionaire.prototype.show = function (elementDom) {
            this._elementDom = elementDom;
            this._elementDom.css('display', 'block');
        };

        Millionaire.prototype.resetForm = function () {
            var index = (this._boardPage) * 5;
            $("#inputQ").val(_this._questionContent[this._page - 1]);
            $("#a").val(this._questionArray[index]);
            $("#b").val(this._questionArray[index + 1]);
            $("#c").val(this._questionArray[index + 2]);
            $("#d").val(this._questionArray[index + 3]);
            $("#input-letter").val(this._questionArray[index + 4]);


        };

        Millionaire.prototype.showCreateButton = function () {
            this.show($("#create-game-button"));
            this.hide($("#edit-button"));

        };

        Millionaire.prototype.showEditButton = function () {
            this.hide($("#create-game-button"));
            this.show($("#edit-button"));

        };

        Millionaire.prototype.changeSubmitAnswerButton = function () {
            !this.checkResult(this._boardPage) ? this.show($("#restart-game")) : this.show($("#next-question"));

        };

        Millionaire.prototype.withdraw = function () {
            this.show($('#alert'));
            this.hide($("#submit-answer"));
            this.hide($("#withdraw-button"));
            this.show($("#restart-game"));
            var message = "You've already withdraw and keep the reward for Question " + this._boardPage;
            $("#alert").attr("class", "alert alert-info");
            $("#alert").html(message);

        };

        Millionaire.prototype.resetBoardStatus = function () {
            $("#boxA").css('background-color', '#3498db');
            $("#boxB").css('background-color', '#3498db');
            $("#boxC").css('background-color', '#3498db');
            $("#boxD").css('background-color', '#3498db');
            $("#boxA").empty();
            $("#boxB").empty();
            $("#boxC").empty();
            $("#boxD").empty();
            $("#chartA").empty();
            $("#chartB").empty();
            $("#chartC").empty();
            $("#chartD").empty();

            $('.answerBox').css('pointer-events', 'auto');
            $('.boxWrong').css('pointer-events', 'auto');
            $('#sellector').css('pointer-events', 'auto');
            $('.box').css('pointer-events', 'auto');
            $('.answerBox').attr('class', 'box');
            $('.boxWrong').attr('class', 'box');



            this._color = '#3498db';
            clearInterval(this._interval);
            this._number5050 = 0;

        };

        Millionaire.prototype.selectBox = function (boxID) {
            var id = "#" + boxID;


            if (boxID == "boxA" || boxID == "boxB" || boxID == "boxC" || boxID == "boxD") {

                $("#boxA").css('background-color', '#3498db');
                $("#boxB").css('background-color', '#3498db');
                $("#boxC").css('background-color', '#3498db');
                $("#boxD").css('background-color', '#3498db');

                $(id).css('background-color', '#f1c40f');
                this.show($('#submit-answer'));
                this._selectArray[this._boardPage] = boxID;
            }

        };


        Millionaire.prototype.nextPage = function () {
            this._boardPage++;
            var page = this._boardPage + 1;
            $("#number").html("Question " + page);
        };

        Millionaire.prototype.prevPage = function () {
            this._boardPage--;
            var page = this._boardPage + 1;
            $("#number").html("Question " + page);
        };


        Millionaire.prototype.checkResult = function (number) {
            if (this._answerArray[number] === this._selectArray[number]) {
                return true;
            } else {
                return false
            }
        };

        Millionaire.prototype.nextOrStop = function () {
            var page = this._boardPage;
            if (this.checkResult(this._boardPage)) {
                console.log(page);
                console.log(_this._answerArray.length);
                $("#alert").attr("class", "alert alert-success");
                $("#alert").html("Chúc mừng bạn! Bạn trả lời chính xác câu hỏi.");
                _this._color = '#f1c40f';
                if (page + 1 == _this._answerArray.length) {
                    $("#alert").attr("class", "alert alert-success");
                    $("#alert").html("Chúc mừng bạn! Bạn đã vượt qua " + _this._answerArray.length + " câu hỏi chương trình AI LÀ TRIỆU PHÚ");
                    this.show($('#restart-game'));
                    this.hide($('#next-question'));

                }

            } else {
                var message = "";
                $("#alert").attr("class", "alert alert-danger");
                if (page >= 10) {
                    message = "Hummm, Phần thưởng là 10 câu hỏi"
                } else if (page >= 5) {
                    message = "Hú hồn, Trả lời được 5 câu hỏi"
                } else {
                    message = "Tèo rồi, không có tiền mang về :( :("
                }


                $("#alert").html(message);

            }

            this.hide($("#submit-answer"))

        };

        Millionaire.prototype.congrats = function () {
            this._interval = setInterval(function () {
                if (_this._hover) {
                    $('.answerBox').css('background-color', '#2ecc71');
                    $('.answerBox').css('pointer-events', 'none');
                    $('#sellector').css('pointer-events', 'none');
                    $('.box').css('pointer-events', 'none');
                } else {
                    $('.answerBox').css('background-color', _this._color);
                    $('.answerBox').css('pointer-events', 'none');
                    $('#sellector').css('pointer-events', 'none');
                    $('.box').css('pointer-events', 'none');
                }
                _this._hover = !_this._hover;

            }, 150);
        };

        Millionaire.prototype.random = function (min, max) {
            this._use5050 = true;
            return Math.floor(Math.random() * (max - min + 1)) + min;

        };

        Millionaire.prototype.NumberBoxNameChanger = function (value) {

            if (value == "boxA") {
                return 1;
            } else if (value == "boxB") {
                return 2;
            } else if (value == "boxC") {
                return 3;
            } else if (value == "boxD") {
                return 4;
            } else if (value == 1) {
                return "boxA"
            } else if (value == 2) {
                return "boxB"
            } else if (value == 3) {
                return "boxC"
            } else {
                return "boxD"
            }

        };

        Millionaire.prototype.clearWrong = function (boxName1, boxName2) {

            boxName1 = "#" + boxName1;
            boxName2 = "#" + boxName2;
            $(boxName1).attr('class', 'boxWrong');
            $(boxName2).attr('class', 'boxWrong');
            $(boxName1).css('pointer-events', 'none');
            $(boxName2).css('pointer-events', 'none');
            $(boxName1).css('background-color', '#3498db');
            $(boxName2).css('background-color', '#3498db');

        };

        Millionaire.prototype.boxWrong = function (boxName, random1, random2) {
            var boxID = this.NumberBoxNameChanger(boxName);

            if (random1 == random2) {
                if (random1 !== 1) {
                    random1--
                } else {
                    random1++
                }
            }

            var number1 = (boxID + random1) % 4;
            if (number1 == 0)(number1 = 4);
            var number2 = (boxID + random2) % 4;
            if (number2 == 0)(number2 = 4);
            var boxWrong1 = this.NumberBoxNameChanger(number1);
            var boxWrong2 = this.NumberBoxNameChanger(number2);

            for (var i = 1; i <= 4; i++) {
                if (i !== number1 && i !== number2 && i !== boxID) _this._keep = i;
            }


            this.clearWrong(boxWrong1, boxWrong2);

        };

        Millionaire.prototype.help5050 = function () {
            var answerBox = this._answerArray[this._boardPage];


            var random1 = this.random(1, 3);
            var random2 = this.random(1, 3);
            this.boxWrong(answerBox, random1, random2);
            this._use5050 = true;
            this._number5050 = this._boardPage + 1;
            console.log(_this._keep);
            console.log(answerBox);
        };

        Millionaire.prototype.show5050 = function () {
            if (!this._use5050) {
                this.show($("#help5050-button"))
            } else {
                this.hide($("#help5050-button"))
            }
        };

        Millionaire.prototype.showSurvey = function () {
            if (!this._useSurvey) {
                this.show($("#helpSurvey-button"))
            } else {
                this.hide($("#helpSurvey-button"))
            }
        };

        Millionaire.prototype.helpSurvey = function () {
            var answerBox = this._answerArray[this._boardPage];


            var sum = 76;
            var value1 = this.random(0, sum);
            var value2 = this.random(0, sum - value1);
            var value3 = this.random(0, sum - value1 - value2);
            var value4 = sum - value1 - value2 - value3;
            var valueA = this.random(1, 4);
            var valueB = 0;
            var valueC = 0;
            var valueD = 0;


            if (valueA === 1) {
                valueA = value1;
                valueB = value2;
                valueC = value3;
                valueD = value4;
            } else if (valueA === 2) {
                valueA = value2;
                valueB = value3;
                valueC = value4;
                valueD = value1;
            } else if (valueA === 3) {
                valueA = value3;
                valueB = value4;
                valueC = value1;
                valueD = value2;
            } else {
                valueA = value4;
                valueB = value1;
                valueC = value2;
                valueD = value3;
            }


            if (answerBox === "boxA") {
                valueA = valueA + 24;

            } else if (answerBox === "boxB") {
                valueB = valueB + 24;

            } else if (answerBox === "boxC") {
                valueC = valueC + 24;
            } else {
                valueD = valueD + 24;
            }


            if (this._number5050 == this._boardPage + 1) {

                var sumRemove = 0;


                if (_this._keep !== 1 || answerBox !== "boxA") {

                    sumRemove += valueA;
                    valueA = 0;
                }
                if (_this._keep !== 2 && answerBox !== "boxB") {
                    sumRemove += valueB;
                    valueB = 0;

                }
                if (_this._keep !== 3 && answerBox !== "boxC") {
                    sumRemove += valueC;
                    valueC = 0;

                }
                if (_this._keep !== 4 && answerBox !== "boxD") {
                    sumRemove += valueD;
                    valueD = 0;

                }


                if (answerBox === "boxA") {
                    valueA = valueA + sumRemove;

                } else if (answerBox === "boxB") {
                    valueB = valueB + sumRemove;

                } else if (answerBox === "boxC") {
                    valueC = valueC + sumRemove;
                } else {
                    valueD = valueD + sumRemove;
                }


            }


            this.drawChart(valueA, valueB, valueC, valueD);
            this._useSurvey = true;


        };


        Millionaire.prototype.drawChart = function (valueA, valueB, valueC, valueD) {
            this.hide($("#reward"));
            this.show($("#survey-region"));
            var i = 0;

            $("#chartA").append("<span class='ABCD'>A</span><span class='startPercent'></span>");
            $("#chartB").append("<span class='ABCD'>B</span><span class='startPercent'></span>");
            $("#chartC").append("<span class='ABCD'>C</span><span class='startPercent'></span>");
            $("#chartD").append("<span class='ABCD'>D</span><span class='startPercent'></span>");

            for (i = 1; i <= valueA; i++) {
                setTimeout(function () {
                    $("#chartA").append("<span class='percent'></span>")
                }, 100)
            }
            for (i = 1; i <= valueB; i++) {
                setTimeout(function () {
                    $("#chartB").append("<span class='percent'></span>")

                }, 100)
            }
            for (i = 1; i <= valueC; i++) {
                setTimeout(function () {
                    $("#chartC").append("<span class='percent'></span>")

                }, 100)
            }
            for (i = 1; i <= valueD; i++) {
                setTimeout(function () {
                    $("#chartD").append("<span class='percent'></span>")

                }, 100)
            }

            setTimeout(function () {
                $("#chartA").append("<span class='percentNumber'> " + valueA + "%</span>")

            }, 900);

            setTimeout(function () {
                $("#chartB").append("<span class='percentNumber'> " + valueB + "%</span>")

            }, 900);

            setTimeout(function () {
                $("#chartC").append("<span class='percentNumber'> " + valueC + "%</span>")

            }, 900);

            setTimeout(function () {
                $("#chartD").append("<span class='percentNumber'> " + valueD + "%</span>")

            }, 900)

        };


        Millionaire.prototype.constructor = Millionaire;

        return Millionaire;


    })();


    $("#sellector").click(function (e) {
        var Millionaire = window.Millionaire;
        if (e.target.id !== "characterBox" && e.target.id !== "sellector") {
            _this.targetID = e.target.id;
            Millionaire.selectBox(_this.targetID);
        }

    });

    $("#help5050-button").click(function (e) {
        var Millionaire = window.Millionaire;
        Millionaire.help5050();
        Millionaire.show5050();
    });

    $("#helpSurvey-button").click(function (e) {
        var Millionaire = window.Millionaire;
        Millionaire.helpSurvey();
        Millionaire.showSurvey();


    });

    $("#next-question").click(function (e) {
        var Millionaire = window.Millionaire;
        Millionaire.resetBoardStatus();
        Millionaire.nextQ();
        Millionaire.showBoard();
        Millionaire.changeStepColor();
    });

    $("#reset-button").click(function () {
        var Millionaire = window.Millionaire;
        Millionaire.resetForm();
    });


    $("#restart-game").click(function (e) {
        e.preventDefault();
        var Millionaire = window.Millionaire;

        Millionaire.resetBoardStatus();

        Millionaire.restartGame();
        Millionaire.drawMap();
        Millionaire.changeStepColor();

    });


    $("#create-game-button").click(function (e) {
        e.preventDefault();
        var Millionaire = window.Millionaire;
        if (Millionaire.validate()) {

            Millionaire.resetBoardStatus();
            Millionaire.updateValue();
            Millionaire.startGame();
            Millionaire.showBoard();
            Millionaire.drawMap();
            Millionaire.changeStepColor();
        }
    });

    $("#edit-button").click(function (e) {
        e.preventDefault();
        var Millionaire = window.Millionaire;


        Millionaire.showForm();
        Millionaire.showCreateButton();


    });

    $("#submit-answer").click(function (e) {
        e.preventDefault();
        var Millionaire = window.Millionaire;
        Millionaire.changeSubmitAnswerButton();
        Millionaire.nextOrStop();
        Millionaire.congrats();
        Millionaire.hide($('#board-button'));
        Millionaire.show($('#alert'));

    });

    $("#withdraw-button").click(function (e) {
        e.preventDefault();
        var Millionaire = window.Millionaire;
        Millionaire.congrats();
        Millionaire.withdraw();
        Millionaire.show5050();
        Millionaire.showSurvey();

    });

    var Millionaire = new Millionaire();
    window.Millionaire = Millionaire;
    // Millionaire.show($('#question-form'));
    // Millionaire.hide($('#each-question'));
    // Millionaire.hide($('#edit-button'));
    Millionaire.setMaxCharacter();
    // document.getElementById("prev-button").disabled = true;

    $("#create-game-button").click()
});


#questions.html


<!DOCTYPE html>
<html>
<head>
	<title>AI LÀ TRIỆU PHÚ - Nhập Câu Hỏi</title>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

	<!-- jQuery library -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

	<!-- Popper JS -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

	<!-- Latest compiled JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="panel panel-primary">
			<div class="panel-heading">
				Thêm Câu Hỏi Vào Bộ Đề <strong style="color: red">AI LÀ TRIỆU PHÚ</strong>
			</div>
			<div class="panel-heading">
				<div class="row">
					<div class="col-md-12">
						<div class="form-group">
						  <label for="question">Câu Hỏi:</label>
						  <input type="text" class="form-control" id="question">
						</div>
					</div>
					<div class="col-md-3">
						<div class="form-group">
						  <label for="question">Lựa Chọn A:</label>
						  <input type="text" class="form-control" id="answerA">
						</div>
					</div>
					<div class="col-md-3">
						<div class="form-group">
						  <label for="question">Lựa Chọn B:</label>
						  <input type="text" class="form-control" id="answerB">
						</div>
					</div>
					<div class="col-md-3">
						<div class="form-group">
						  <label for="question">Lựa Chọn C:</label>
						  <input type="text" class="form-control" id="answerC">
						</div>
					</div>
					<div class="col-md-3">
						<div class="form-group">
						  <label for="question">Lựa Chọn D:</label>
						  <input type="text" class="form-control" id="answerD">
						</div>
					</div>
					<div class="col-md-12">
						<div class="form-group">
						  <label for="question">Đáp Án Chính Xác:</label>
						  <select class="form-control" id="answer">
						  	<option class="A">A</option>
						  	<option class="B">B</option>
						  	<option class="C">C</option>
						  	<option class="D">D</option>
						  </select>
						</div>
					</div>
					<div class="col-md-12">
						<button class="btn btn-success" onclick="saveQuestion()">Lưu Câu Hỏi</button>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript">
		function saveQuestion() {
			question = $('#question').val()
			answerA = $('#answerA').val()
			answerB = $('#answerB').val()
			answerC = $('#answerC').val()
			answerD = $('#answerD').val()
			answer = $('#answer').val()

			obj = {
				'question': question,
				'answerA':answerA,
				'answerB':answerB,
				'answerC':answerC,
				'answerD':answerD,
				'answer':answer
			}

			questionList = getValueByKey('questionList')
			if(questionList == undefined) {
				questionList = []
			}
			questionList.push(obj)
			saveKeyValue('questionList', questionList)

			$('#question').val('')
			$('#answerA').val('')
			$('#answerB').val('')
			$('#answerC').val('')
			$('#answerD').val('')
			$('#answer').val('')
		}
	</script>
</body>
</html>


Bình luận



Chia sẻ từ lớp học

Phân Loại Bài Viết

Tài Liệu Tham Khảo

Đã sao chép!!!