<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Math Quiz</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0; /* 배경 색상 추가 */
        }

        input,
        label,
        select {
            margin-bottom: 10px;
        }

        button {
            margin-top: 5px;
            padding: 10px;
            font-size: 16px;
        }

        #input-container {
            align-self: flex-start;
            width: 100%; /* input-container의 너비를 설정하여 inputMin이 이 너비의 100%가 되도록 함 */
        }

        #inputMin {
            width: 80px; /* inputMin의 너비를 80px로 설정 */
            box-sizing: border-box; /* padding과 border를 너비에 포함시킴 */
        }
  #inputMin {
            width: 80px; /* inputMin의 너비를 80px로 설정 */
            box-sizing: border-box; /* padding과 border를 너비에 포함시킴 */
        }

        #inputMax {
            width: 80px; 
            box-sizing: border-box; 
        }
  #inputMax {
            width: 80px; 
            box-sizing: border-box; 
        }


        #question-container {
            text-align: center;
            margin-top: auto;
            width: 100%;
            cursor: pointer; /* 클릭 가능하게 표시 */
        }

        #hi-message {
            width: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 24px;
        }

        #question {
            font-size: 3em;
        }

        #additional-messages {
            position: fixed; 
            bottom: 5px;
            right: 5px;
            text-align: right;
            text-align: bottom;
        }

        #additional-messages div {
            font-size: 0.5em;
        }

        #show-stats,
        #reset-counts-btn,
        #memo-btn {
            position: fixed;
            font-size: 14px;
            padding: 5px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
        }

        #show-stats {
            bottom: 10px;
            left: 10px;
            background-color: #007BFF;
            color: #FFF;
        }

        #reset-counts-btn {
            top: 35px;
            right: 10px;
            background-color: #DC3545;
            color: #FFF;
        }

        #memo-btn {
            top: 0px;
            right: 10px;
            background-color: #28a745;
            color: #FFF;
        }

        #memo-modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #FFF;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            z-index: 2;
            width: 600px;
        }

        #memo-modal textarea {
            width: 100%;
            height: 450px;
            box-sizing: border-box;
        }

        #memo-modal button {
            margin-top: 10px;
            padding: 10px;
            font-size: 16px;
            background-color: #007BFF;
            color: #FFF;
            border: none;
            border-radius: 5px;
        }
    </style>
</head>
<body>

    <div id="input-container">
        <label for="inputMin">Min :</label>
        <input type="number" id="inputMin" placeholder="min" value="10">
          
        <label for="numberSelect">계산 개수</label>
        <select id="numberSelect">
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>
        <label>　x<input type="checkbox" id="multiply"></label>
        <label>/<input type="checkbox" id="divide"></label>
        <br>

        <label for="inputMax">Max :</label>
        <input type="number" id="inputMax" placeholder="max" value="99">

        <label for="fontSizeSelect">글자 크기</label>
        <select id="fontSizeSelect" onchange="changeFontSize()">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4" selected>4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select>

        <label>+<input type="checkbox" id="add" checked></label>
        <label>-<input type="checkbox" id="subtract"></label>

        <br>
    </div>
    <hr>
    <div id="question-container">
        <div id="hi-message">
            <div id="question"></div>
        </div>
    </div>

    <div id="additional-messages">
        <div id="today-message">Today: 0</div>
        <div id="total-message">Total: 0</div>
    </div>

    <button id="show-stats" onclick="showStats()">Show Stats</button>
    <button id="reset-counts-btn" onclick="resetCounts()">Reset Counts</button>
    <button id="memo-btn" onclick="openMemoModal()">메모</button>

    <div id="memo-modal">
        <textarea id="memo-text"></textarea>
        <button onclick="saveMemo()">Save</button>
        <button onclick="closeMemoModal()">Close</button>
    </div>

    <script>
        var todayCount = parseInt(localStorage.getItem('todayCount')) || 0;
        var totalCount = parseInt(localStorage.getItem('totalCount')) || 0;
        var addCount = parseInt(localStorage.getItem('addCount')) || 0;
        var subtractCount = parseInt(localStorage.getItem('subtractCount')) || 0;
        var multiplyCount = parseInt(localStorage.getItem('multiplyCount')) || 0;
        var divideCount = parseInt(localStorage.getItem('divideCount')) || 0;

        var currentQuestion = null;
        var questionShown = false;

        function generateRandomNumbers(min, max, numOperands, operations) {
            var numbers = [];
            var result = '';

            for (var i = 0; i < numOperands; i++) {
                numbers.push(Math.floor(Math.random() * (max - min + 1)) + min);

                if (i > 0) {
                    var randomOperation = operations[Math.floor(Math.random() * operations.length)];
                    result += ` ${randomOperation} `;
                }

                result += numbers[i];
            }

            return {
                numbers: numbers,
                expression: result,
                answer: eval(result)
            };
        }

        function showQuestionOrAnswer() {
            if (!questionShown) {
                var min = parseInt(document.getElementById("inputMin").value) || 1;
                var max = parseInt(document.getElementById("inputMax").value) || 100;
                var numOperands = parseInt(document.getElementById("numberSelect").value) || 2;
                var fontSize = parseInt(document.getElementById("fontSizeSelect").value) || 3;

                var addChecked = document.getElementById("add").checked;
                var subtractChecked = document.getElementById("subtract").checked;
                var multiplyChecked = document.getElementById("multiply").checked;
                var divideChecked = document.getElementById("divide").checked;

                if (!(addChecked || subtractChecked || multiplyChecked || divideChecked)) {
                    alert("Please select at least one operation.");
                    return;
                }

                var operators = [];
                if (addChecked) {
                    operators.push('+');
                    addCount++;
                    localStorage.setItem('addCount', addCount);
                }
                if (subtractChecked) {
                    operators.push('-');
                    subtractCount++;
                    localStorage.setItem('subtractCount', subtractCount);
                }
                if (multiplyChecked) {
                    operators.push('*');
                    multiplyCount++;
                    localStorage.setItem('multiplyCount', multiplyCount);
                }
                if (divideChecked) {
                    operators.push('/');
                    divideCount++;
                    localStorage.setItem('divideCount', divideCount);
                }

                var numbersObj = generateRandomNumbers(min, max, numOperands, operators);
                currentQuestion = numbersObj;
                document.getElementById("question").innerHTML = `${numbersObj.expression}<br>　`;
                questionShown = true;

                var todayMessageElement = document.getElementById("today-message");
                todayMessageElement.innerHTML = "Today: " + todayCount;

            } else {
                document.getElementById("question").innerHTML = `${currentQuestion.expression} <br>= ${currentQuestion.answer}`;
                currentQuestion = null;
                questionShown = false;

                todayCount++;
                totalCount++;
                localStorage.setItem('todayCount', todayCount);
                localStorage.setItem('totalCount', totalCount);

                var todayMessageElement = document.getElementById("today-message");
                todayMessageElement.innerHTML = "Today: " + todayCount;

                var totalMessageElement = document.getElementById("total-message");
                totalMessageElement.innerHTML = "Total: " + totalCount;
            }
        }

        function changeFontSize() {
            var fontSize = parseInt(document.getElementById("fontSizeSelect").value) || 3;
            document.getElementById("question").style.fontSize = `${fontSize}em`;
        }

        function showStats() {
            alert(`
                Addition Count: ${addCount}\n
                Subtraction Count: ${subtractCount}\n
                Multiplication Count: ${multiplyCount}\n
                Division Count: ${divideCount}
            `);
        }

        function resetCounts() {
            localStorage.removeItem('todayCount');
            localStorage.removeItem('totalCount');
            localStorage.removeItem('addCount');
            localStorage.removeItem('subtractCount');
            localStorage.removeItem('multiplyCount');
            localStorage.removeItem('divideCount');
            
            todayCount = 0;
            totalCount = 0;
            addCount = 0;
            subtractCount = 0;
            multiplyCount = 0;
            divideCount = 0;

            var todayMessageElement = document.getElementById("today-message");
            todayMessageElement.innerHTML = "Today: " + todayCount;

            var totalMessageElement = document.getElementById("total-message");
            totalMessageElement.innerHTML = "Total: " + totalCount;
        }

        function openMemoModal() {
            var memoModal = document.getElementById("memo-modal");
            var memoText = document.getElementById("memo-text");

            var savedMemo = localStorage.getItem('memo');
            memoText.value = savedMemo || '';

            memoModal.style.display = "block";
        }

        function saveMemo() {
            var memoText = document.getElementById("memo-text").value;

            localStorage.setItem('memo', memoText);

            closeMemoModal();
        }

        function closeMemoModal() {
            var memoModal = document.getElementById("memo-modal");
            memoModal.style.display = "none";
        }

        function checkAndResetTodayCount() {
            var now = new Date();
            var lastResetDate = localStorage.getItem('lastResetDate');

            if (lastResetDate) {
                lastResetDate = new Date(lastResetDate);
            }

            var todayMidnight = new Date(now.getFullYear(), now.getMonth(), now.getDate());

            if (!lastResetDate || lastResetDate < todayMidnight) {
                todayCount = 0;
                localStorage.setItem('todayCount', todayCount);
                localStorage.setItem('lastResetDate', todayMidnight);

                var todayMessageElement = document.getElementById("today-message");
                todayMessageElement.innerHTML = "Today: " + todayCount;
            }

            var resetTime = todayMidnight.getTime() + 24 * 60 * 60 * 1000;
            var timeUntilReset = resetTime - now.getTime();

            setTimeout(function() {
                resetTodayCount();
                checkAndResetTodayCount();
            }, timeUntilReset);
        }

        function resetTodayCount() {
            todayCount = 0;
            localStorage.setItem('todayCount', todayCount);

            var todayMessageElement = document.getElementById("today-message");
            todayMessageElement.innerHTML = "Today: " + todayCount;
        }

        document.body.addEventListener('keydown', function(event) {
            if (event.code === 'Space') {
                event.preventDefault();
                showQuestionOrAnswer();
            }
        });

        document.body.addEventListener('click', function(event) {
            // 전체 높이의 2/3 위치를 계산
            var viewportHeight = window.innerHeight;
            var clickY = event.clientY;

            // 클릭 위치가 전체 화면의 아래쪽 2/3 이상인지 확인
            if (clickY > (viewportHeight / 3) * 1) {
                showQuestionOrAnswer();
            }
        });

        checkAndResetTodayCount();
    </script>
</body>
</html>