<style>
        body {

            font-family: Arial, sans-serif;Malgun Gothic;
          line-height: 2;
            margin: 10px;

        }
        .container1 {
          font-size: 16px;
            max-width: 1300px;
            margin: 0 auto;
        }
        .definition {
            margin-bottom: 20px;
        }
        .question {
            margin-top: 20px;
        }
        .options input {
            margin-right: 10px;
        }
        .feedback {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ddd;
            background-color: #f9f9f9;
            display: none;
        }
        .correct {
            color: green;
        }
        .incorrect {
            color: red;
        }
        .difficulty {
            color: red;
        }
    </style>

    <div class="container1">
        <h1>단어 어근 학습</h1>

        <!-- 문제 1 -->
        <div class="definition">
            <h2>1. audi - 듣다</h2>
            <p>The Latin root "audi" means "to hear" or "related to hearing". It is found in words such as <strong>auditory</strong>, which refers to the sense of hearing, and <strong>audio</strong>, which pertains to sound.</p>
        </div>
       
        <div class="question">
            <h3>문제 1: 어근 "audi"가 포함된 단어 중에서 "듣다"와 관련이 없는 것을 고르세요.</h3>
            <div class="options">
                <input type="radio" id="option1_1" name="question1" value="A">
                <label for="option1_1">auditory</label><br>
                <input type="radio" id="option1_2" name="question1" value="B">
                <label for="option1_2">audience</label><br>
                <input type="radio" id="option1_3" name="question1" value="C">
                <label for="option1_3">audio</label><br>
                <input type="radio" id="option1_4" name="question1" value="D">
                <label for="option1_4">auction</label>
            </div>
            <p class="difficulty">난이도: 중</p>
            <button onclick="toggleFeedback('feedback1', 'D', 'auction')">정답 확인</button>
            <div id="feedback1" class="feedback"></div>
        </div>
       
      <br><br>
        <!-- 문제 2 -->
        <div class="definition">
            <h2>2. bene - 좋다, 잘</h2>
            <p>The Latin root "bene" means "good" or "well". It is used in words such as <strong>benefit</strong>, which refers to an advantage or good outcome, and <strong>benevolent</strong>, which means kind and generous.</p>
        </div>
       
        <div class="question">
            <h3>문제 2: 어근 "bene"가 포함된 단어의 의미로 가장 적절한 것을 고르세요.</h3>
            <div class="options">
                <input type="radio" id="option2_1" name="question2" value="A">
                <label for="option2_1">benefit - 불리한 결과</label><br>
                <input type="radio" id="option2_2" name="question2" value="B">
                <label for="option2_2">beneficial - 좋은</label><br>
                <input type="radio" id="option2_3" name="question2" value="C">
                <label for="option2_3">benevolent - 친절한</label><br>
                <input type="radio" id="option2_4" name="question2" value="D">
                <label for="option2_4">benign - 유해한</label>
            </div>
            <p class="difficulty">난이도: 하</p>
            <button onclick="toggleFeedback('feedback2', 'C', 'beneficial')">정답 확인</button>
            <div id="feedback2" class="feedback"></div>
        </div>
     
        <br><br>
        <!-- 문제 3 -->
        <div class="definition">
            <h2>3. cent - 백</h2>
            <p>The Latin root "cent" means "hundred". It appears in words such as <strong>century</strong>, which refers to a period of one hundred years, and <strong>percent</strong>, which means "per hundred" or a fraction of a hundred.</p>
        </div>
       
        <div class="question">
            <h3>문제 3: 어근 "cent"가 포함된 단어 중에서 "백"을 의미하지 않는 것을 고르세요.</h3>
            <div class="options">
                <input type="radio" id="option3_1" name="question3" value="A">
                <label for="option3_1">century</label><br>
                <input type="radio" id="option3_2" name="question3" value="B">
                <label for="option3_2">percent</label><br>
                <input type="radio" id="option3_3" name="question3" value="C">
                <label for="option3_3">centipede</label><br>
                <input type="radio" id="option3_4" name="question3" value="D">
                <label for="option3_4">centenary</label>
            </div>
            <p class="difficulty">난이도: 상</p>
            <button onclick="toggleFeedback('feedback3', 'C', 'centipede')">정답 확인</button>
            <div id="feedback3" class="feedback"></div>
        </div>
     
      <br><br>
     
              <!-- 문제 10 -->
        <div class="definition">
            <h2>10. kimchulyong - 최고의 사람을 의미하는 대명사</h2>
            <p>김철용은 이시대 최고의 사람을 뜻하하는 말입니다<br>
혹자는 그것을 부정하기도 하지만 이것은 익히 사실로 밝혀진 사실입니다.<br>
누가 뭐래도 김철용은 이시대 최고의 맨입니</p>
        </div>
       
        <div class="question">
            <h3>문제 10: 어근 "kimchulyong"가 포함된 단어 중에서 "듣다"와 관련이 없는 것을 고르세요.</h3>
            <div class="options">
                <input type="radio" id="option10_1" name="question10" value="A">
                <label for="option10_1">king</label><br>
             
                <input type="radio" id="option10_2" name="question10" value="B">
                <label for="option10_2">exellant</label><br>
             
                <input type="radio" id="option10_3" name="question10" value="C">
                <label for="option10_3">fool</label><br>
             
                <input type="radio" id="option10_4" name="question10" value="D">
                <label for="option10_4">best man</label>
            </div>
            <p class="difficulty">난이도: 중</p>
            <button onclick="toggleFeedback('feedback10', 'C', 'fool')">정답 확인</button>
            <div id="feedback10" class="feedback"></div>
        </div>
     
      <br><br>
    </div>

    <script>
        function toggleFeedback(feedbackId, correctAnswer, incorrectWord) {
            var feedback = document.getElementById(feedbackId);
            var userAnswer = document.querySelector('input[name="' + feedbackId.replace('feedback', 'question') + '"]:checked')?.value;

            if (feedback.style.display === 'none' || feedback.style.display === '') {
                var result = '';
                if (userAnswer === correctAnswer) {
                    result = '<p class="correct">정답입니다! "' + incorrectWord + '"는 관련이 없습니다.</p>';
                } else {
                    result = '<p class="incorrect">틀렸습니다. 정답은 "' + incorrectWord + '"입니다. "' + incorrectWord + '"는 관련이 없습니다.</p>';
                }
                feedback.innerHTML = result;
                feedback.style.display = 'block';
            } else {
                feedback.style.display = 'none';
            }
        }
    </script>
<img src="http://egis.kr/zz/w3/img/img_lights_wide.jpg">