|
@@ -0,0 +1,473 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
|
+ <title>English Reading Comprehension Test</title>
|
|
|
+ <style>
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ color: #333;
|
|
|
+ line-height: 1.6;
|
|
|
+ padding: 15px;
|
|
|
+ max-width: 100%;
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 20px;
|
|
|
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ h1 {
|
|
|
+ font-size: 22px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ color: #333;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .passage {
|
|
|
+ background-color: #f9f9f9;
|
|
|
+ padding: 15px;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 1.7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .question {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding-bottom: 15px;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ }
|
|
|
+
|
|
|
+ .question-text {
|
|
|
+ font-size: 18px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .options {
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .option {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: #f9f9f9;
|
|
|
+ transition: all 0.2s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .option input {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .option label {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .score-display {
|
|
|
+ text-align: center;
|
|
|
+ padding: 15px;
|
|
|
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
|
|
|
+ color: white;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin: 20px 0;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ padding: 14px;
|
|
|
+ border: none;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-primary {
|
|
|
+ background-color: #4a6cf7;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-primary:hover {
|
|
|
+ background-color: #3a5ce4;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-secondary {
|
|
|
+ background-color: #f0f0f0;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-secondary:hover {
|
|
|
+ background-color: #e0e0e0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal {
|
|
|
+ display: none;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ z-index: 1000;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-content {
|
|
|
+ background-color: white;
|
|
|
+ width: 90%;
|
|
|
+ max-width: 400px;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 20px;
|
|
|
+ animation: modalFadeIn 0.3s;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes modalFadeIn {
|
|
|
+ from {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translateY(-20px);
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ opacity: 1;
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-header {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-body {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-group {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-group label {
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-control {
|
|
|
+ width: 100%;
|
|
|
+ padding: 12px;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-footer .btn {
|
|
|
+ width: 48%;
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .correct {
|
|
|
+ background-color: #e6f7e6;
|
|
|
+ border-left: 4px solid #4CAF50;
|
|
|
+ }
|
|
|
+
|
|
|
+ .incorrect {
|
|
|
+ background-color: #ffebee;
|
|
|
+ border-left: 4px solid #F44336;
|
|
|
+ }
|
|
|
+
|
|
|
+ .explanation {
|
|
|
+ display: none;
|
|
|
+ margin-top: 10px;
|
|
|
+ padding: 10px;
|
|
|
+ background-color: #f0f7ff;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="container">
|
|
|
+ <h1>English Reading Comprehension Test</h1>
|
|
|
+
|
|
|
+ <div class="passage">
|
|
|
+ <p><strong>Read the following passage and answer the questions:</strong></p>
|
|
|
+ <p>The rapid development of artificial intelligence (AI) has sparked both excitement and concern worldwide. While AI promises to revolutionize industries from healthcare to transportation, experts warn about potential job displacement and ethical challenges. A recent study by Oxford University suggests that 47% of U.S. jobs could be automated within the next two decades. However, many economists argue that AI will create new types of jobs even as it eliminates others, similar to previous technological revolutions.</p>
|
|
|
+ <p>Ethical considerations are equally important. As AI systems make more decisions affecting human lives, questions arise about accountability and bias. Tech companies are now establishing AI ethics boards to address these concerns, but critics say more government regulation is needed to ensure responsible development.</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="question">
|
|
|
+ <div class="question-text">1. What is the main idea of the passage?</div>
|
|
|
+ <div class="options">
|
|
|
+ <div class="option">
|
|
|
+ <input type="radio" name="q1" id="q1a" value="A">
|
|
|
+ <label for="q1a">A. The benefits and challenges of AI development</label>
|
|
|
+ </div>
|
|
|
+ <div class="option">
|
|
|
+ <input type="radio" name="q1" id="q1b" value="B">
|
|
|
+ <label for="q1b">B. The history of computer technology</label>
|
|
|
+ </div>
|
|
|
+ <div class="option">
|
|
|
+ <input type="radio" name="q1" id="q1c" value="C">
|
|
|
+ <label for="q1c">C. How to build an AI system</label>
|
|
|
+ </div>
|
|
|
+ <div class="option">
|
|
|
+ <input type="radio" name="q1" id="q1d" value="D">
|
|
|
+ <label for="q1d">D. Job opportunities in the tech industry</label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="explanation" id="explanation1">
|
|
|
+ <strong>Explanation:</strong> The passage discusses both the potential benefits (revolutionizing industries) and challenges (job displacement, ethical concerns) of AI development, making option A the correct answer.
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="question">
|
|
|
+ <div class="question-text">2. According to the Oxford University study mentioned, what percentage of U.S. jobs could be automated?</div>
|
|
|
+ <div class="options">
|
|
|
+ <div class="option">
|
|
|
+ <input type="radio" name="q2" id="q2a" value="A">
|
|
|
+ <label for="q2a">A. 25%</label>
|
|
|
+ </div>
|
|
|
+ <div class="option">
|
|
|
+ <input type="radio" name="q2" id="q2b" value="B">
|
|
|
+ <label for="q2b">B. 37%</label>
|
|
|
+ </div>
|
|
|
+ <div class="option">
|
|
|
+ <input type="radio" name="q2" id="q2c" value="C">
|
|
|
+ <label for="q2c">C. 47%</label>
|
|
|
+ </div>
|
|
|
+ <div class="option">
|
|
|
+ <input type="radio" name="q2" id="q2d" value="D">
|
|
|
+ <label for="q2d">D. 52%</label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="explanation" id="explanation2">
|
|
|
+ <strong>Explanation:</strong> The passage clearly states that "47% of U.S. jobs could be automated within the next two decades" according to the Oxford University study.
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="question">
|
|
|
+ <div class="question-text">3. What do critics say about current AI ethics efforts by tech companies?</div>
|
|
|
+ <div class="options">
|
|
|
+ <div class="option">
|
|
|
+ <input type="radio" name="q3" id="q3a" value="A">
|
|
|
+ <label for="q3a">A. They are completely sufficient</label>
|
|
|
+ </div>
|
|
|
+ <div class="option">
|
|
|
+ <input type="radio" name="q3" id="q3b" value="B">
|
|
|
+ <label for="q3b">B. More government regulation is needed</label>
|
|
|
+ </div>
|
|
|
+ <div class="option">
|
|
|
+ <input type="radio" name="q3" id="q3c" value="C">
|
|
|
+ <label for="q3c">C. AI doesn't need any ethical guidelines</label>
|
|
|
+ </div>
|
|
|
+ <div class="option">
|
|
|
+ <input type="radio" name="q3" id="q3d" value="D">
|
|
|
+ <label for="q3d">D. Ethics boards should be eliminated</label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="explanation" id="explanation3">
|
|
|
+ <strong>Explanation:</strong> The passage mentions that "critics say more government regulation is needed to ensure responsible development," which matches option B.
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <button id="submit-btn" class="btn btn-primary">Submit Answers</button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div id="result-section" style="display: none;">
|
|
|
+ <div class="container">
|
|
|
+ <div class="score-display">
|
|
|
+ Your Score: <span id="total-score">0</span>/3
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <button id="analysis-btn" class="btn btn-primary">
|
|
|
+ View Answer Explanations
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <button id="retry-btn" class="btn btn-secondary">
|
|
|
+ Try Again
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div id="analysis-modal" class="modal">
|
|
|
+ <div class="modal-content">
|
|
|
+ <div class="modal-header">
|
|
|
+ Unlock Full Analysis
|
|
|
+ </div>
|
|
|
+ <div class="modal-body">
|
|
|
+ <p>Enter your phone number to register and view detailed answer explanations and full passage analysis.</p>
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="phone">Phone Number</label>
|
|
|
+ <input type="tel" id="phone" class="form-control" placeholder="Enter your phone number">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="code">Verification Code</label>
|
|
|
+ <div style="display: flex;">
|
|
|
+ <input type="text" id="code" class="form-control" placeholder="Enter verification code" style="flex: 1; margin-right: 10px;">
|
|
|
+ <button id="get-code-btn" class="btn btn-secondary" style="width: 120px; padding: 0;">Get Code</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="modal-footer">
|
|
|
+ <button id="cancel-btn" class="btn btn-secondary">Cancel</button>
|
|
|
+ <button id="confirm-btn" class="btn btn-primary">Continue</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ document.getElementById('submit-btn').addEventListener('click', function() {
|
|
|
+ // Calculate score
|
|
|
+ let score = 0;
|
|
|
+
|
|
|
+ // Check question 1 (correct answer: A)
|
|
|
+ const q1Answer = document.querySelector('input[name="q1"]:checked');
|
|
|
+ if (q1Answer && q1Answer.value === 'A') {
|
|
|
+ score++;
|
|
|
+ document.querySelector('input[name="q1"][value="A"]').parentElement.classList.add('correct');
|
|
|
+ } else {
|
|
|
+ if (q1Answer) {
|
|
|
+ q1Answer.parentElement.classList.add('incorrect');
|
|
|
+ }
|
|
|
+ document.querySelector('input[name="q1"][value="A"]').parentElement.classList.add('correct');
|
|
|
+ }
|
|
|
+
|
|
|
+ // Check question 2 (correct answer: C)
|
|
|
+ const q2Answer = document.querySelector('input[name="q2"]:checked');
|
|
|
+ if (q2Answer && q2Answer.value === 'C') {
|
|
|
+ score++;
|
|
|
+ document.querySelector('input[name="q2"][value="C"]').parentElement.classList.add('correct');
|
|
|
+ } else {
|
|
|
+ if (q2Answer) {
|
|
|
+ q2Answer.parentElement.classList.add('incorrect');
|
|
|
+ }
|
|
|
+ document.querySelector('input[name="q2"][value="C"]').parentElement.classList.add('correct');
|
|
|
+ }
|
|
|
+
|
|
|
+ // Check question 3 (correct answer: B)
|
|
|
+ const q3Answer = document.querySelector('input[name="q3"]:checked');
|
|
|
+ if (q3Answer && q3Answer.value === 'B') {
|
|
|
+ score++;
|
|
|
+ document.querySelector('input[name="q3"][value="B"]').parentElement.classList.add('correct');
|
|
|
+ } else {
|
|
|
+ if (q3Answer) {
|
|
|
+ q3Answer.parentElement.classList.add('incorrect');
|
|
|
+ }
|
|
|
+ document.querySelector('input[name="q3"][value="B"]').parentElement.classList.add('correct');
|
|
|
+ }
|
|
|
+
|
|
|
+ // Display score
|
|
|
+ document.getElementById('total-score').textContent = score;
|
|
|
+ document.getElementById('result-section').style.display = 'block';
|
|
|
+
|
|
|
+ // Scroll to results
|
|
|
+ document.getElementById('result-section').scrollIntoView({ behavior: 'smooth' });
|
|
|
+ });
|
|
|
+
|
|
|
+ // Show answer explanations modal
|
|
|
+ document.getElementById('analysis-btn').addEventListener('click', function() {
|
|
|
+ document.getElementById('analysis-modal').style.display = 'flex';
|
|
|
+ });
|
|
|
+
|
|
|
+ // Close modal
|
|
|
+ document.getElementById('cancel-btn').addEventListener('click', function() {
|
|
|
+ document.getElementById('analysis-modal').style.display = 'none';
|
|
|
+ });
|
|
|
+
|
|
|
+ // Try again button
|
|
|
+ document.getElementById('retry-btn').addEventListener('click', function() {
|
|
|
+ // Reset all selections
|
|
|
+ document.querySelectorAll('input[type="radio"]').forEach(radio => {
|
|
|
+ radio.checked = false;
|
|
|
+ radio.parentElement.classList.remove('correct', 'incorrect');
|
|
|
+ });
|
|
|
+
|
|
|
+ // Hide results and scroll to top
|
|
|
+ document.getElementById('result-section').style.display = 'none';
|
|
|
+ window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
|
+ });
|
|
|
+
|
|
|
+ // Get verification code
|
|
|
+ document.getElementById('get-code-btn').addEventListener('click', function() {
|
|
|
+ const phone = document.getElementById('phone').value;
|
|
|
+ if (!phone) {
|
|
|
+ alert('Please enter your phone number first');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Simulate sending verification code
|
|
|
+ this.textContent = 'Sending...';
|
|
|
+ this.disabled = true;
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ this.textContent = 'Sent!';
|
|
|
+ setTimeout(() => {
|
|
|
+ this.textContent = 'Get Code';
|
|
|
+ this.disabled = false;
|
|
|
+ }, 2000);
|
|
|
+ }, 1500);
|
|
|
+ });
|
|
|
+
|
|
|
+ // Confirm button
|
|
|
+ document.getElementById('confirm-btn').addEventListener('click', function() {
|
|
|
+ const phone = document.getElementById('phone').value;
|
|
|
+ const code = document.getElementById('code').value;
|
|
|
+
|
|
|
+ if (!phone) {
|
|
|
+ alert('Please enter your phone number');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!code) {
|
|
|
+ alert('Please enter the verification code');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Simulate verification
|
|
|
+ alert('Verification successful! Loading detailed explanations...');
|
|
|
+ document.getElementById('analysis-modal').style.display = 'none';
|
|
|
+
|
|
|
+ // Show all explanations
|
|
|
+ document.querySelectorAll('.explanation').forEach(exp => {
|
|
|
+ exp.style.display = 'block';
|
|
|
+ });
|
|
|
+
|
|
|
+ // Scroll to first question
|
|
|
+ document.querySelector('.question').scrollIntoView({ behavior: 'smooth' });
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|