<!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.0">
    <title>Combination</title>
    <link rel="stylesheet" href="css/style.css">
    <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
    <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;500&display=swap" rel="stylesheet">
</head>

<body> 
    <audio id="sound_Error"><source src="music/error.mp3" type="audio/mp3"></audio> 
    <audio id="sound_Lose"><source src="music/Lose.mp3" type="audio/mp3"></audio> 
    <audio id="sound_Reset"><source src="music/reset.mp3" type="audio/mp3"></audio> 
    <audio id="sound_Start"><source src="music/Start.mp3" type="audio/mp3"></audio> 
    <audio id="sound_Text"><source src="music/Text.mp3" type="audio/mp3"></audio> 
    <audio id="sound_Victory"><source src="music/Victory.mp3" type="audio/mp3"></audio> 

    <div class="container">
        <div class="top">
            <div class="Permutation">
                <a href="http://141.11.158.206/Project/Project101_1vs1/Permutation/ui.html">Permutation</a>
            </div>
            <div class="Combination">
                <a href="http://141.11.158.206/Project/Project101_1vs1/Combination/ui.html">Combination</a>
            </div>            
        </div>

        <div class="box">
            <p><i class='bx bx-code-alt'></i> Combination</p></p>
        </div>

        <div class="box-number" id="combination-box">$$ C(n, r) = \frac{n!}{r!(n - r)!} = 0 $$</div>

        <div class="container_2">
            <div class="check">
                <button id="check" onclick="Check()">เฉลย</button>
            </div>
            <div class="play">
                <div id = "input-play">
                    <div class="text-n">ค่า n</div>
                    <input type="number" id="n" placeholder="0" min="1" max="8">
                    <div class="text-r">ค่า r</div>
                    <input type="number" id="r" placeholder="0" min="1" max="8">
                    <div class="text-count">ระบุจำนวนรหัสผ่านที่ถูกต้อง</div>
                    <input type="number" id="count" placeholder="0" min="1">
                </div>
                    <button id="play" onclick="generateCombination()">เริ่มเกม</button>
                </div>
            </div>
            <div class="reset">
                <button id="reset" onclick="resetGame()">เริ่มใหม่</button>
            </div>
            <div class="submit">
                <div id="input-submit">
                    <div class="text-submit">เขียนคำตอบ</div>
                    <input type="text" id="user-combination" placeholder="ตัวอย่าง : {1, 2, 3}">
                    <button id="submit" onclick="checkCombination()">ตอบ</button>
                </div>
            </div>
        </div>

        <div id="output"></div>

        <div class="lock-container">
            <img id="lock" src="images/lock.png" alt="Lock" class="lock-image">
        </div>

        <div class="news">
            <div class="header">วิธีการเล่น</div>
            <all-news>
                <div class="bodyNews">
                    <div class="head"><div class="titleNews"><i class='bx bxs-megaphone' ></i>Combination</div><button class="options" onclick="toggleDetail(1)">กดเพื่ออ่านต่อ</button></div>
                    <div class="detailNews" id="newsDetail-1">
                        <p><span class="pink">*</span> เกมนี้เป็นเกมที่ผู้เล่นต้องปลดล็อกกุญแจโดยการใส่รหัสผ่านที่ถูกต้อง ซึ่งรหัสผ่านจะมาจากการคำนวณ Combination เพื่อสร้างชุดลำดับที่เป็นไปได้ทั้งหมด จากการคำนวณนี้ ผู้เล่นจะต้องเลือกชุดลำดับใดลำดับหนึ่งที่คาดว่าถูกต้องและใช้มันเป็นรหัสผ่านเพื่อปลดล็อกกุญแจ <span class="pink">*</span></p>  
                        <p><span class="commond">></span> ใส่ค่า n (ตั้งแต่ 1 ถึง 8), ใส่ค่า r (ตั้งแต่ 1 ถึง 8), ระบุจำนวนรหัสผ่านที่ถูกต้อง (ต้องน้อยกว่าผลลัพธ์ที่คำนวณได้จากสมการทางด้านขวา) เเละกดปุ่ม <span class="green">เริ่มเกม</span> **ระบุจำนวนรหัสผ่านที่ถูกต้อง คือ จะมีรหัสผ่านที่ถูกต้องทั้งหมดกี่ชุดลำดับ**</p>
                        <p><span class="commond">></span> พิมพ์รหัสผ่านในช่องเขียนคำตอบ จากชุดลำดับที่เป็นไปได้ ทางด้านขวา หรือ เลือกรหัสผ่านจากชุดลำดับที่เป็นไปได้ ทางด้านขวา (เพียงเเค่ คลิ๊กคำตอบ)</p>       
                        <p><span class="commond">></span> หลังจากเลือกรหัสผ่านที่คิดว่าถูกต้องแล้ว ให้กดปุ่ม <span class="red">ตอบ</span> เพื่อปลดล็อคกุญเเจ </p>
                        <p><span class="commond">></span> หากกุญเเจยังไม่ปลดล็อค เลือกรหัสผ่านใหม่จากชุดลำดับที่เป็นไปได้ที่เหลืออยู่ และทำเช่นนี้ต่อไปจนกว่ากุญเเจจะปลดล็อค </p>  
                        <p><span class="commond">></span> หากเลือกรหัสผ่านไม่ถูกต้อง กุญแจจะไม่ปลดล็อค </p>  
                        <p><span class="commond">></span> หากเลือกรหัสผ่านที่ถูกต้อง กุญแจจะถูกปลดล็อค </p>       
                        <p><span class="commond">></span> หากต้องการเล่นอีกครั้ง กดปุ่ม <span class="blue">เริ่มใหม่</span> เพื่อเริ่มเกมตั้งแต่ต้น </p>       
                        <p><span class="commond">></span> หากคุณยังสงสัยเกี่ยวกับรหัสผ่านที่เลือก และไม่แน่ใจว่าถูกต้องหรือไม่ สามารถกดปุ่ม <span class="yellow">เฉลย</span> เพื่อดูรหัสผ่านที่ถูกต้อง </p>  
                        <p><span class="pink">*</span>  "เกมนี้ถูกสร้างขึ้นเพื่อช่วยให้ทุกคนเข้าใจถึงที่มาของ Combination ในเกมนี้เราได้แสดงสูตรทางคณิตศาสตร์ พร้อมทั้งกระบวนการหาค่าอย่างละเอียด เพื่อช่วยให้ผู้เล่นมองเห็นความสัมพันธ์ระหว่างสูตรและผลลัพธ์ที่ได้ นอกจากนี้เกมยังแสดงผลลัพธ์ทั้งหมดที่สามารถคำนวณได้จากสูตร เพื่อให้ทุกคนได้ศึกษาและตรวจสอบความถูกต้อง พร้อมเรียนรู้กระบวนการทำงานอย่างเป็นระบบ <span class="pink">*</span></p>       
                        <p><span class="pink">**</span> เป้าหมายของเกมนี้ คือการทำให้เนื้อหาที่ซับซ้อนดูเข้าใจง่าย สนุกสนาน และช่วยส่งเสริมความรู้ในรูปแบบที่เป็นประโยชน์ต่อการเรียนรู้ Combination ในชีวิตประจำวันหรือการศึกษา <span class="pink">**</span></p>  
                    </div>
                </div>
            </all-news>
            </div>
        </div>
        
        <div id="floating-alert" class="alert" ></div>
        <div class="video-background">
            <iframe class="videoContainer__video" height="120%" width="130%" src="https://www.youtube-nocookie.com/embed/LG1FB6oFoV4?start=23&amp;showinfo=0&amp;rel=0&amp;autoplay=1&amp;loop=1&amp;mute=1&playlist=LG1FB6oFoV4" frameborder="0"></iframe>
        </div>
    </div>
    <script src="java/script.js"></script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</body>
</html>