<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@600&display=swap" rel="stylesheet">
<title>IELTS Full Reading Practice</title>
<style>
/* All CSS styles remain exactly the same as in the original code */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #ffffff;
line-height: 1.4;
font-size: 16px;
}
.header {
background-color: #ffffff;
padding: 12px 20px;
border-bottom: 1px solid #e0e0e0;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
height: 60px;
}
.ielts-logo {
display: none;
}
.test-info {
display: flex;
align-items: center;
gap: 30px;
font-size: 14px;
color: #333;
}
.audio-indicator {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
}
.audio-icon {
width: 16px;
height: 16px;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon></svg>') no-repeat center;
}
.header-icons {
display: flex;
gap: 10px;
align-items: center;
}
#volume-slider {
-webkit-appearance: none;
width: 80px;
height: 4px;
background: #ddd;
outline: none;
border-radius: 2px;
cursor: pointer;
}
#volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: #333;
cursor: pointer;
}
#volume-slider::-moz-range-thumb {
width: 14px;
height: 14px;
border-radius: 50%;
background: #333;
cursor: pointer;
border: none;
}
.icon {
width: 20px;
height: 20px;
cursor: pointer;
opacity: 0.7;
color: #333;
display: flex;
align-items: center;
justify-content: center;
}
.icon:hover {
opacity: 1;
}
#play-pause-btn {
background: none;
border: none;
padding: 0;
}
.main-container {
margin-top: 60px;
display: flex;
flex-direction: column;
background: #ffffff;
height: calc(100vh - 60px); /* Full height minus header */
}
.panels-container {
display: flex;
flex: 1;
overflow: hidden;
}
.passage-panel {
flex: 1;
padding: 20px 20px 100px;
overflow-y: auto;
min-width: 200px; /* Minimum width */
}
/* Passage Content */
.text-center {
text-align: center;
}
.reading-passage h4 {
font-family: 'Merriweather', serif; /* Oqlangan serif shrift */
font-size: 22px; /* Biroz kattaroq */
font-weight: 600; /* O‘rtacha qalinlik */
color: #2c3e50; /* To‘q kulrang ko‘k rang */
line-height: 1.4; /* Qulay satr oralig‘i */
margin-bottom: 20px; /* Ko‘proq bo‘shliq */
text-align: center;
border-bottom: 2px solid #4a90e2; /* Ko‘k chegara */
padding-bottom: 5px; /* Chegara bilan matn oralig‘i */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Engil soya */
}
.reading-passage p {
margin-bottom: 1.2em;
}
.question ul li label {
display: block;
margin-top: 8px;
cursor: pointer;
}
.questions-panel {
flex: 1;
padding: 20px 20px 100px;
overflow-y: auto;
min-width: 200px; /* Minimum width */
border-left: 1px solid #e0e0e0;
}
.resizer {
width: 10px;
cursor: col-resize;
background-color: #f0f0f0;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="30" viewBox="0 0 10 30"><path d="M4 11h2v2H4zM4 15h2v2H4zM4 19h2v2H4z" fill="%23888"/></svg>');
background-repeat: no-repeat;
background-position: center;
flex-shrink: 0;
flex-grow: 0;
}
/* Left Panel */
.left-panel {
width: 100%;
padding: 20px;
}
/* Right Panel */
.right-panel {
display: none;
width: 50%;
padding: 20px;
position: relative;
}
.help-button {
background: #4a90e2;
color: white;
border: none;
padding: 6px 12px;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 5px;
margin-bottom: 20px;
}
.help-button:hover {
background: #357abd;
}
.section-title {
font-weight: bold;
margin-bottom: 15px;
font-size: 18px;
}
.people-section {
margin-bottom: 30px;
}
.people-table {
width: 100%;
border-collapse: collapse;
border: 1px solid #ccc;
}
.people-table th {
text-align: left;
padding: 10px;
font-weight: bold;
border: 1px solid #ddd;
}
.people-table td {
padding: 8px 10px;
border: 1px solid #ddd;
}
.person-name {
font-size: 16px;
}
.question-number {
background: white;
border: 1px solid #4a90e2;
padding: 4px 8px;
border-radius: 3px;
font-weight: bold;
font-size: 14px;
color: #4a90e2;
min-width: 30px;
text-align: center;
}
.assigned-responsibility {
background: #f0f0f0;
padding: 4px 8px;
border-radius: 3px;
font-size: 14px;
border: 1px solid #ddd;
}
.responsibilities-section {
margin-bottom: 30px;
}
.responsibility-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 20px;
}
.responsibility-item {
background: #f8f9fa;
border: 1px solid #ddd;
padding: 8px 12px;
border-radius: 4px;
cursor: move;
font-size: 16px;
text-align: center;
transition: all 0.2s;
}
.responsibility-item:hover {
background: #e9ecef;
transform: translateY(-1px);
}
.responsibility-item.dragging {
opacity: 0.5;
}
.questions-section {
margin-bottom: 20px;
}
.question-title {
font-weight: bold;
margin-bottom: 10px;
font-size: 16px;
}
.instruction {
margin-bottom: 20px;
font-size: 16px;
color: #666;
}
/* Map Styles */
.map-container {
position: relative;
margin: 20px 0;
display: flex;
justify-content: center;
}
.map-svg {
border: 2px solid #333;
background: white;
}
.map-room {
fill: #f9f9f9;
stroke: #333;
stroke-width: 1;
}
.map-text {
font-family: Arial, sans-serif;
font-size: 13px;
text-anchor: middle;
fill: #333;
}
.map-number {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
text-anchor: middle;
fill: #333;
}
.room-labels {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin: 20px 0;
}
.room-label {
background: #f8f9fa;
border: 1px solid #ddd;
padding: 8px 12px;
border-radius: 4px;
cursor: move;
font-size: 16px;
text-align: center;
transition: all 0.2s;
}
.room-label:hover {
background: #e9ecef;
transform: translateY(-1px);
}
.room-label.dragging {
opacity: 0.5;
}
/* Navigation Arrows */
.nav-arrows {
position: fixed;
bottom: 100px;
right: 20px;
display: flex;
gap: 5px;
z-index: 101;
}
.nav-arrow {
width: 50px;
height: 50px;
background: #333;
color: white;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: bold;
}
.nav-arrow:hover {
background: #555;
}
.nav-arrow:disabled {
background: #ccc;
cursor: not-allowed;
}
/* Bottom Navigation - Exact Match */
.nav-row {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #ffffff;
padding: 0;
display: flex;
align-items: center;
height: 80px;
z-index: 100;
}
.footer__questionWrapper___1tZ46 {
display: flex;
align-items: center;
margin-right: 20px;
}
.footer__questionNo___3WNct {
background: none;
border: none;
padding: 10px 15px;
font-size: 16px;
font-weight: 600;
color: #333;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
transition: background-color 0.2s;
}
.footer__questionNo___3WNct:hover {
background-color: #f8f9fa;
}
.section-prefix {
font-size: 16px;
}
.sectionNr {
font-size: 16px;
font-weight: bold;
}
.attemptedCount {
font-size: 14px;
color: #666;
margin-left: 5px;
font-weight: 400; /* Normal weight */
}
@media (max-width: 768px) {
.attemptedCount {
display: none;
}
}
.footer__questionWrapper___1tZ46.selected .attemptedCount {
display: none;
}
.footer__subquestionWrapper___9GgoP {
display: none;
gap: 2px;
margin-left: 10px;
}
.footer__questionWrapper___1tZ46.selected .footer__subquestionWrapper___9GgoP {
display: flex;
}
.subQuestion {
width: 32px;
height: 32px;
border: 1px solid #ccc;
background: white;
color: #333;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
border-radius: 2px;
}
.subQuestion.answered {
background-color: #e9ecef;
border-color: #ddd;
}
.subQuestion.correct {
background-color: #28a745;
color: white;
border-color: #28a745;
}
.subQuestion.incorrect {
background-color: #dc3545;
color: white;
border-color: #dc3545;
}
.subQuestion:hover {
background-color: #f0f0f0;
border-color: #999;
}
.subQuestion.active {
background-color: #4a90e2;
color: white;
border-color: #4a90e2;
}
.subQuestion.completed {
background-color: #28a745;
color: white;
border-color: #28a745;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.footer__deliverButton___3FM07 {
margin-left: auto;
margin-right: 20px;
background-color: #f0f0f0;
color: #333;
border: 1px solid #ccc;
padding: 12px 20px;
border-radius: 4px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: background-color 0.2s, border-color 0.2s;
min-width: 170px;
justify-content: center;
}
.footer__deliverButton___3FM07:hover {
background-color: #e0e0e0;
border-color: #bbb;
}
.footer__deliverButton___3FM07:disabled {
background: #e9ecef;
color: #6c757d;
cursor: not-allowed;
border-color: #ddd;
}
.fa-check::before {
content: "✓";
}
.hidden {
display: none !important;
}
/* Context Menu */
.context-menu {
position: absolute;
background: white;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 1000;
display: none;
min-width: 140px;
}
.context-menu-item {
padding: 12px 16px;
cursor: pointer;
font-size: 16px;
border-bottom: 1px solid #f0f0f0;
transition: background-color 0.2s;
display: flex;
align-items: center;
gap: 8px;
}
.context-menu-item:hover {
background-color: #f8f9fa;
}
.context-menu-item:last-child {
border-bottom: none;
}
.highlight {
background-color: #ffff00;
}
.comment-highlight {
background-color: #90EE90;
position: relative;
cursor: help;
}
.comment-tooltip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: white;
padding: 8px 12px;
border-radius: 4px;
font-size: 14px;
white-space: nowrap;
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.comment-highlight:hover .comment-tooltip {
opacity: 1;
}
.question {
margin-bottom: 40px;
}
.question p {
margin-bottom: 10px;
}
.question ul, .question .people-table {
margin-top: 0;
}
.question-prompt {
margin-bottom: 20px;
}
.question ul {
list-style: none;
padding-left: 0;
}
.question ul li {
margin-bottom: 5px;
}
.answer-input {
border: 1px solid #888;
border-radius: 4px;
background-color: #fff;
padding: 2px 5px;
font-size: 16px;
text-align: center;
margin-right: 4px;
margin-left: 4px;
transition: border-color 0.3s, box-shadow 0.3s;
height: 28px; /* Standard height */
width: 150px; /* Standard width */
}
.answer-input.active-input {
border-color: #4a90e2;
box-shadow: 0 0 3px 1px rgba(74, 144, 226, 0.5);
}
.answer-input::placeholder {
color: #999;
font-weight: bold;
text-align: center;
}
.answer-input.correct {
border-color: #28a745;
background-color: #e9f7ef;
}
.answer-input.incorrect {
border-color: #dc3545;
background-color: #f8d7da;
color: #721c24;
}
.answer-input {
z-index: 10;
position: relative;
pointer-events: auto;
}
.drag-drop-container {
display: flex;
gap: 30px;
margin-top: 20px;
align-items: flex-start;
}
.recommendations-box {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
min-height: 200px;
}
.drag-item {
background: white;
border: 1px solid #ddd;
padding: 8px 12px;
border-radius: 4px;
cursor: move;
font-size: 16px;
transition: all 0.2s;
user-select: none;
}
.drag-item:hover {
background: #e9ecef;
}
.drag-item.dragging {
opacity: 0.5;
}
.drag-item.selected {
border-color: #4a90e2;
box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.5);
}
.drop-zone {
border: 2px dashed #aaa;
border-radius: 4px;
width: 50%;
margin-top: 19px;
margin-bottom: 5px;
transition: background-color 0.2s, border-color 0.2s;
padding: 0.5px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.drop-zone.drag-over {
background-color: #e6f4ff;
border-color: #4a90e2;
}
.drop-zone.correct {
background-color: #e9f7ef;
border-color: #28a745;
border-style: solid;
}
.drop-zone.incorrect {
background-color: #f8d7da;
border-color: #dc3545;
border-style: solid;
}
.drop-zone.disabled {
pointer-events: none;
}
.drop-zone .drag-item {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
padding: 2px;
}
.drag-options-container {
margin-top: 10px;
}
.drag-options-container .drag-item {
display: block;
width: fit-content;
font-size: 15px;
padding: 0.5px 10px;
margin-bottom: 5px;
}
.drag-options-container .drag-item:last-child {
margin-bottom: 0;
}
.q-number {
color: #888;
font-size: 14px;
font-weight: bold;
}
.questions-container {
width: 100%;
}
audio {
width: 100%;
margin-bottom: 20px;
}
.part-header {
background-color: #f1f2ec;
padding: 15px 20px;
border: 1px solid #e0e0e0;
text-align: left;
margin: 10px 20px;
border-radius: 5px;
}
.part-header p {
margin: 0;
}
.part-header p:first-child {
margin-bottom: 5px;
}
.question li.correct {
color: #155724;
font-weight: bold;
}
.question li.incorrect {
color: #721c24;
}
.question li.correct::before {
content: '✔ ';
color: #28a745;
}
.question li.incorrect::before {
content: '✖ ';
color: #dc3545;
}
.example-box {
border: 1px solid #ddd;
background-color: #f9f9f9;
padding: 15px;
border-radius: 5px;
margin: 20px 0;
}
.timer-container {
display: flex;
position: relative;
cursor: default;
color: #333;
font-size: 16px;
font-weight: 500;
align-items: center;
}
.timer-container .timer-tooltip {
display: none;
}
.timer-controls {
display: flex;
align-items: center;
gap: 8px;
margin-left: 15px;
}
.timer-controls button {
background: #f0f0f0;
border: 1px solid #ccc;
border-radius: 50%;
padding: 0;
cursor: pointer;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s;
}
.timer-controls button:hover {
background: #e0e0e0;
}
.timer-controls button svg {
width: 20px;
height: 20px;
fill: #333;
}
.audio-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(40, 40, 40, 0.9);
z-index: 2000;
display: flex;
justify-content: center;
align-items: center;
color: white;
text-align: center;
}
.audio-modal-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
max-width: 500px;
padding: 20px;
}
.audio-modal-content p {
font-size: 16px;
line-height: 1.5;
color: #eee;
}
.audio-modal-icon {
margin-bottom: 20px;
}
.modal-play-btn {
background-color: #000;
color: white;
border: 1px solid white;
padding: 12px 24px;
border-radius: 6px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: background-color 0.2s;
}
.modal-play-btn:hover {
background-color: #333;
}
#goto-widget {
display: flex;
align-items: center;
gap: 5px;
}
#goto-input {
width: 80px;
padding: 4px 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
#goto-btn {
padding: 4px 10px;
border: 1px solid #ccc;
background-color: #f0f0f0;
border-radius: 4px;
cursor: pointer;
}
/* Styles for TRUE/FALSE/NOT GIVEN questions */
.tf-question {
margin-bottom: 25px;
padding: 10px 0px;
border-radius: 4px;
transition: border-color 0.3s, background-color 0.3s;
}
.tf-question-line {
display: flex;
align-items: flex-start;
margin-bottom: 15px;
padding: 5px 0px;
border-radius: 4px;
}
.tf-question-number, .question-number-box {
border: 2px solid #ccc;
padding: 2px 8px;
margin-right: 10px;
border-radius: 3px;
font-weight: bold;
transition: border-color 0.3s;
display: inline-block;
}
.tf-question-text {
padding-top: 3px;
}
.tf-options {
padding-left: 5px;
}
.tf-option {
display: block;
margin-bottom: 12px;
cursor: pointer;
display: flex;
align-items: center;
}
.tf-option input[type="radio"] {
margin-right: 10px;
transform: scale(1.2);
}
.tf-question.correct .tf-question-line {
background-color: #e9f7ef;
}
.tf-question.incorrect .tf-question-line {
background-color: #f8d7da;
}
.matching-question-container {
display: flex;
gap: 20px;
margin-top: 15px;
}
.matching-options-bank {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.matching-questions {
flex: 1.5;
display: flex;
flex-direction: column;
gap: 15px;
}
.matching-question-item {
display: flex;
align-items: center;
gap: 15px;
border: 2px solid transparent;
border-radius: 4px;
transition: border-color 0.3s;
}
.matching-question-item > span {
flex: 1;
}
.matching-question-item.correct {
background-color: #e9f7ef;
border-color: #28a745 !important;
}
.matching-question-item.incorrect {
background-color: #f8d7da;
border-color: #dc3545 !important;
}
.matching-question-item .drop-zone {
width: 200px;
flex-shrink: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #aaa;
}
.matching-options-bank .drag-item {
font-size: 15px;
text-align: center;
border: 1px solid #ccc;
background: #f9f9f9;
}
.questions-panel {
flex: 1;
padding: 20px 20px 100px;
overflow-y: auto;
min-width: 200px; /* Minimum width */
border-left: 1px solid #e0e0e0;
}
.matching-question-item.incorrect {
background-color: #f8d7da;
border-color: #dc3545 !important;
}
.summary-completion-container {
margin-top: 20px;
}
.summary-text p {
line-height: 2.5;
font-size: 16px;
}
.summary-drop-zone {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
max-width:200px;
height: 25px;
border: 2px dashed #999;
border-radius: 4px;
margin: 0 5px;
padding: 0 5px;
transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
color: #aaa;
font-weight: bold;
}
.summary-drop-zone.filled {
border-color: #4a90e2;
}
.summary-drop-zone.active-input {
border-color: #4a90e2;
box-shadow: none;
}
.summary-drop-zone .drag-item {
font-size: 15px;
font-weight: bold;
background-color: transparent;
border: none;
padding: 0;
text-align: center;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.summary-options-bank {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.summary-options-bank .drag-item {
flex-grow: 1;
min-width: 100px;
text-align: center;
}
.multi-choice-question {
margin-bottom: 20px;
padding: 10px;
border-radius: 4px;
border: 3px solid transparent;
transition: border-color 0.3s, background-color 0.3s;
}
.multi-choice-option {
margin-bottom: 10px;
padding: 8px;
border-radius: 4px;
transition: background-color 0.3s;
}
.multi-choice-option label {
display: flex;
align-items: center;
cursor: pointer;
font-size: 16px;
}
.multi-choice-option input[type="checkbox"],
.multi-choice-option input[type="radio"] {
margin-right: 12px;
transform: scale(1.3);
accent-color: #4a90e2;
}
.multi-choice-option.correct {
background-color: #e9f7ef;
}
.multi-choice-option.incorrect {
background-color: #f8d7da;
}
.matching-question-item.incorrect {
background-color: #f8d7da;
border-color: #dc3545 !important;
}
.matching-question-item .drop-zone.filled {
border-color: #4a90e2;
}
.matching-question-item .drop-zone {
width: 200px;
height: 40px;
}
.paragraph-matching-question {
align-items: center;
justify-content: space-between;
gap: 15px;
margin-bottom: 12px;
}
.paragraph-matching-question .answer-input {
width: 80px;
flex-shrink: 0;
}
.matching-form-container {
margin-top: 20px;
}
.matching-form-row {
display: flex;
align-items: center;
margin-bottom: 12px;
}
.matching-form-label {
width: 180px;
flex-shrink: 0;
}
/* Results Modal */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 2000;
display: flex;
justify-content: center;
align-items: center;
}
.modal-overlay.hidden {
display: none;
}
.modal-content {
background: white;
padding: 25px;
border-radius: 8px;
width: 90%;
max-width: 600px;
max-height: 80vh;
display: flex;
flex-direction: column;
position: relative;
}
.modal-close-btn {
position: absolute;
top: 10px;
right: 15px;
background: none;
border: none;
font-size: 28px;
cursor: pointer;
color: #888;
}
.modal-content h2 {
text-align: center;
margin-bottom: 15px;
color: #333;
}
.results-summary {
display: flex;
justify-content: space-around;
margin-bottom: 20px;
font-size: 18px;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #eee;
padding-bottom: 15px;
}
.results-details-container {
overflow-y: auto;
padding-right: 10px; /* For scrollbar */
}
.result-row {
display: grid;
grid-template-columns: 40px 1fr 1fr;
gap: 15px;
padding: 8px 5px;
border-bottom: 1px solid #f0f0f0;
font-size: 15px;
}
.result-row.incorrect {
background-color: #f8d7da;
}
.result-row .q-num {
font-weight: bold;
}
.result-row .user-ans {
color: #555;
}
.result-row .correct-ans {
color: #155724;
font-weight: 500;
}
.correct-answer-display {
font-weight: bold;
color: #28a745;
margin-left: 10px;
font-size: 14px;
}
.correct-answer-highlight, .tf-option.correct-answer-highlight, .multi-choice-option.correct-answer-highlight {
background-color: #d4edda !important;
border: 1px solid #c3e6cb !important;
border-radius: 4px;
padding: 4px;
}
.correct-answer-highlight {
background-color: #d4edda;
border: 1px solid #c3e6cb;
border-radius: 4px;
}
.centered-title {
text-align: center;
font-size: 50px;
font-weight: bold;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div class="header">
<div class="timer-container">
<span class="timer-display">60:00</span>
<div class="timer-controls">
<button id="timer-toggle-btn" title="Pause/Resume Timer">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8 5v14l11-7L8 5z"/></svg>
</button>
<button id="timer-reset-btn" title="Reset Timer">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/></svg>
</button>
</div>
</div>
<a href="https://www.facebook.com/HavenWoodZuy" target="_blank" class="telegram-link">
Full Exam Materials
</a>
</div>
<div class="main-container" id="main-container">
<div id="passage-header-container">
<div id="part-header-1" class="part-header">
<p><strong>Part 1</strong></p>
<p>Read the text and answer questions 1-13.</p>
</div>
<div id="part-header-2" class="part-header hidden">
<p><strong>Part 2</strong></p>
<p>Read the text and answer questions 14-26.</p>
</div>
<div id="part-header-3" class="part-header hidden">
<p><strong>Part 3</strong></p>
<p>Read the text and answer questions 27-40.</p>
</div>
</div>
<div class="panels-container">
<div class="passage-panel" id="passage-panel">
<div id="passage-text-1" class="reading-passage">
<h4 class="text-center">The "Extinct" Grass in Britain</h4>
<p>Bromus interruptus, commonly known as the interrupted brome, is a plant in the true grass family. Called interrupted brome because of its gappy seed-head, this unprepossessing grass was found nowhere else in the world. Sharp-eyed Victorian botanists were the first to notice it, and by the 1920s the odd-looking grass had been found across much of southern England. Yet its decline was just as dramatic. By 1972 it had vanished from its last toehold—two hay fields at Pampisford, near Cambridge. Even the seeds stored at the Cambridge University Botanic Garden as an insurance policy were dead, having been mistakenly kept at room temperature. Botanists mourned: a unique living entity was gone forever.</p>
<p>Yet reports of its demise proved premature. Interrupted brome has come back from the dead, and not through any fancy genetic engineering. Thanks to one green-fingered botanist, interrupted brome is alive and well living as a pot plant. It's Britain's dodo, which is about to become a phoenix, as conservationists set about relaunching its career in the wild.</p>
<p>At first, Philip Smith was unaware that the scrawny pots of grass on his bench were all that remained of a uniquely British species. But when news of the "extinction" of Bromus interruptus finally reached him, he decided to astonish his colleagues. He seized his opportunity at a meeting of the Botanical Society of the British Isles in Manchester in 1979, where he was booked to talk about his research on the evolution of the brome grasses. It was sad, he said, that interrupted brome had become extinct. Then he whipped out two enormous pots of it. The extinct grass was very much alive. It turned out that Smith had collected seeds from the brome's last refuge at Pampisford in 1963, shortly before the species disappeared from the wild altogether. Ever since then, Smith had grown the grass on, year after year. So in the end the hapless grass survived not through some high-powered conservation scheme or fancy genetic manipulation, but simply because one man was interested in it. As Smith points out, interrupted brome isn't particularly attractive and has no commercial value.</p>
<p>The brome's future, at least in cultivation, now seems assured. Seeds from Smith's plants have been securely stored in the state-of-the-art Millennium Seed Bank at Wakehurst Place in Sussex. And living plants thrive at the botanic gardens at Kew, Edinburgh and Cambridge. This year, "bulking up" is under way to make sure there are plenty of plants in all the gardens, and sacksful of seeds are being stockpiled at strategic sites throughout the country. The brome's relaunch into the British countryside is next on the agenda. English Nature has included interrupted brome in its Species Recovery Programme, and it is on track to be reintroduced into the agricultural landscape, if friendly farmers can be found. The brome was probably never common enough to irritate farmers, but no one would value it today for its productivity or its nutritious qualities. As a grass, it leaves agriculturalists cold.</p>
<p>So where did it come from? Smith's research into the taxonomy of the brome grasses suggests that interrupts almost certainly mutated from another weedy grass, soft brome, hordeaceus. So close is the relationship that interrupted brome was originally deemed to be a mere variety of soft brome by the great Victorian taxonomist Professor Hackel. But in 1895, George Claridge Druce, a 45-year-old Oxford pharmacist with a shop on the High Street, decided that it deserved species status, and convinced the botanical world. Druce was by then well on his way to fame as an Oxford don, mayor of the city, and a fellow of the Royal Society.</p>
<p>The brome's parentage may be clear, but the timing of its birth is more obscure. A clue lies in its penchant for growing as a weed in fields sown with a fodder crop—particularly nitrogen-fixing legumes such as sainfoin, lucerne or clover. According to agricultural historian Joan Thirsk, sainfoin and its friends made their first modest appearance in Britain in the early 1600s. Seeds brought in from the Continent were sown in pastures to feed horses and other livestock. And by 1650 the legumes were increasingly introduced into arable rotations, to serve as "green nature" to boost grain yields. A bestseller of its day, Nathaniel Fiennes's Sainfoin Improved, published in 1671, helped to spread the word.</p>
<p>Although the credit for the "discovery" of interrupted brome goes to a Miss A.M. Barnard, who collected the first specimens at Odsey, Bedfordshire, in 1849, the grass had probably lurked undetected in the English countryside for at least a hundred years. Smith thinks the botanical dodo probably evolved in the late 17th or early 18th century, once sainfoin became established. The brome's fortunes then declined dramatically over the 20th century, not least because the advent of the motor car destroyed the market for fodder crops for horses.</p>
<p>Like many once-common arable weeds, such as the corncockle, the seeds of interrupted brome cannot survive long in the soil. Each spring, the brome relied on farmers to resow its seeds; in the days before weedkillers and sophisticated seed sieves, an ample supply would have contaminated stocks of crop seed. But fragile seeds are not the brome's only problem: this species is also reluctant to release its seeds as they ripen. Show it a ploughed field today and this grass will struggle to survive, says Smith. It will be difficult to establish in today's "improved" agricultural landscape, inhabited by notoriously vigorous competitors.</p>
<p>Interrupted brome's reluctance to spread under its own steam could have advantages, however. Any farmer willing to foster this unique contribution to the world's flora can rest assured that the grass will never become an invasive pest. Restoring interrupted brome to its rightful home could bring positive benefits too, once this quirky grass wins recognition as a unique national monument. British farmers made it possible for interrupted brome to evolve in the first place. Let the grass grow once again in its "natural" habitat, say the conservationists, and it could become a badge of honour for a new breed of eco-friendly farmer.</p>
</div>
<div id="passage-text-2" class="reading-passage hidden">
<h4 class="text-center">Wealth in a cold climate</h4>
<p><strong>A</strong> Dr William Masters was reading a book about mosquitoes when inspiration struck. "There was this anecdote about the great yellow fever epidemic that hit Philadelphia in 1793," Masters recalls. "This epidemic decimated the city until the first frost came." The inclement weather froze out the insects, allowing Philadelphia to recover.</p>
<p><strong>B</strong> If weather could be the key to a city's fortunes, Masters thought, then why not to the historical fortunes of nations? And could frost lie at the heart of one of the most enduring economic mysteries of all — why are almost all the wealthy, industrialised nations to be found at latitudes above 40 degrees? After two years of research, he thinks that he has found a piece of the puzzle. Masters, an agricultural economist from Purdue University in Indiana, and Margaret McMillan at Tufts University, Boston, show that annual frosts are among the factors that distinguish rich nations from poor ones. Their study is published this month in the Journal of Economic Growth. The pair speculates that cold snaps have two main benefits — they freeze pests that would otherwise destroy crops, and also freeze organisms, such as mosquitoes, that carry disease. The result is agricultural abundance a big workforce.</p>
<p><strong>C</strong> The academics took two sets of information. The first was average income for countries, the second climate data from the University of East Anglia. They found a curious tally between the sets. Countries having five or more frosty days a month are uniformly rich; those with fewer than five are impoverished. The authors speculate that the five-day figure is important; it could be the minimum time needed to kill pests in the soil. Masters says: "For example, Finland is a small country that is growing quickly, but Bolivia is a small country that isn't growing at all. Perhaps climate has something to do with that." In fact, limited frosts bring huge benefits to farmers. The chills kill insects or render them inactive; cold weather slows the break-up of plant and animal material in the soil, allowing it to become richer; and frosts ensure a build-up of moisture in the ground for spring, reducing dependence on seasonal rains. There are exceptions to the "cold equals rich" argument. There are well-heeled tropical countries such as Hong Kong and Singapore (both city-states, Masters notes), a result of their superior trading positions. Likewise, not all European countries axe moneyed — in the former communist colonies, economic potential was crushed by politics.</p>
<p><strong>D</strong> Masters stresses that climate will never be the overriding factor 一 the wealth of nations is too complicated to be attributable to just one factor. Climate, he feels, somehow combines with other factors — such as the presence of institutions, including governments, and access to trading routes — to determine whether a country will do well. Traditionally, Masters says, economists thought that institutions had the biggest effect on the economy, because they brought order to a country in the form of, for example, laws and property rights. With order, so the thinking went, came affluence. "But there are some problems that even countries with institutions have not been able to get around," he says. "My feeling is that, as countries get richer, they get better institutions. And the accumulation of wealth and improvement in governing institutions are both helped by a favourable environment, including climate."</p>
<p><strong>E</strong> This does not mean, he insists, that tropical countries are beyond economic help and destined to remain penniless. Instead, richer countries should change the way in which foreign aid is given. Instead of aid being geared towards improving governance, it should be spent on technology to improve agriculture and to combat disease. Masters cites one example: "There are regions in India that have been provided with irrigation — agricultural productivity has gone up and there has been an improvement in health." Supplying vaccines against tropical diseases and developing crop varieties that can grow in the tropics would break the poverty cycle.</p>
<p><strong>F</strong> Other minds have applied themselves to the split between poor and rich nations, citing anthropological, climatic and zoological reasons for why temperate nations are the most affluent. In 350BC, Aristotle observed that "those who live in a cold climate… are full of spirit". Jared Diamond, from the University of California at Los Angeles, pointed out in his book Guns, Germs and Steel that Eurasia is broadly aligned east-west, while Africa and the Americas are aligned north-south. So, in Europe, crops can spread quickly across latitudes because climates are similar. One of the first domesticated crops, einkorn wheat, spread quickly from the Middle East into Europe; it took twice as long for corn to spread from Mexico to what is now the eastern United States. This easy movement along similar latitudes in Eurasia would also have meant a faster dissemination of other technologies such as the wheel and writing, Diamond speculates. The region also boasted domesticated livestock, which could provide meat, wool and motive power in the fields. Blessed with such natural advantages, Eurasia was bound to take off economically.</p>
<p><strong>G</strong> John Gallup and Jeffrey Sachs, two US economists, have also pointed out striking correlations between the geographical location of countries and their wealth. They note that tropical countries between 23.45 degrees north and south of the equator are nearly all poor. In an article for the Harvard International Review, they concluded that "development surely seems to favour the temperate-zone economies, especially those in the northern hemisphere, and those that have managed to avoid both socialism and the ravages of war". But Masters cautions against geographical determinism, the idea that tropical countries are beyond hope: "Human health and agriculture can be made better through scientific and technological research," he says, "so we shouldn't be writing off these countries. Take Singapore: without air conditioning, it wouldn't be rich."</p>
</div>
<div id="passage-text-3" class="reading-passage hidden">
<h4 class="text-center">Personality and appearance</h4>
<p>When Charles Darwin applied to be the "energetic young man" that Robert Fitzroy, the Beagle's captain, sought as his gentleman companion, he was almost let down by a woeful shortcoming that was as plain as the nose on his face. Fitzroy believed in physiognomy—the idea that you can tell a person's character from their appearance. As Darwin's daughter Henrietta later recalled, Fitzroy had "made up his mind that no man with such a nose could have energy". This was hardly the case. Fortunately, the rest of Darwin's visage compensated for his sluggardly proboscis: "His brow saved him."</p>
<p>The idea that a person's character can be glimpsed in their face dates back to the ancient Greeks. It was most famously popularised in the late 18th century by the Swiss poet Johann Lavater, whose ideas became a talking point in intellectual circles. In Darwin's day, they were more or less taken as given. It was only after the subject became associated with phrenology, which fell into disrepute in the late 19th century, that physiognomy was written off as pseudoscience.</p>
<p>First impressions are highly influential, despite the well-worn admonition not to judge a book by its cover. Within a tenth of a second of seeing an unfamiliar face we have already made a judgement about its owner's character—caring, trustworthy, aggressive, extrovert, competent and so on. Once that snap judgement has formed, it is surprisingly hard to budge. People also act on these snap judgements. Politicians with competent-looking faces have a greater chance of being elected, and CEOs who look dominant are more likely to run a profitable company. There is also a well-established "attractiveness halo". People seen as good-looking not only get the most valentines but are also judged to be more outgoing, socially competent, powerful, intelligent and healthy.</p>
<p>In 1966, psychologists at the University of Michigan asked 84 undergraduates who had never met before to rate each other on five personality traits, based entirely on appearance, as they sat for 15 minutes in silence. For three traits—extroversion, conscientiousness and openness—the observers' rapid judgements matched real personality scores significantly more often than chance. More recently, researchers have re-examined the link between appearance and personality, notably Anthony Little of the University of Stirling and David Perrett of the University of St Andrews, both in the UK. They pointed out that the Michigan studies were not tightly controlled for confounding factors. But when Little and Perrett re-ran the experiment using mugshots rather than live subjects, they also found a link between facial appearance and personality—though only for extroversion and conscientiousness. Little and Perrett claimed that they only found a correlation at the extremes of personality.</p>
<p>Justin Carre and Cheryl McCormick of Brock University in Ontario, Canada studied 90 ice-hockey players. They found that a wider face in which the cheekbone-to-cheekbone distance was unusually large relative to the distance between brow and upper lip was linked in a statistically significant way with the number of penalty minutes a player was given for violent acts including slashing, elbowing, checking from behind and fighting. The kernel of truth idea isn't the only explanation on offer for our readiness to make facial judgements. Leslie Zebrowitz, a psychologist at Brandeis University in Waltham, Massachusetts, says that in many cases snap judgements are not accurate. The snap judgement, she says, is often an "overgeneralisation" of a more fundamental response. A classic example of overgeneralisation can be seen in predators' response to eye spots, the conspicuous circular markings seen on some moths, butterflies and fish. These act as a deterrent to predators because they mimic the eyes of other creatures that the potential predators might see as a threat.</p>
<p>Another researcher who leans towards overgeneralisation is Alexander Todorov. With Princeton colleague Nikolaas Oosterhof, he recently put forward a theory which he says explains our snap judgements of faces in terms of how threatening they appear. Todorov and Oosterhof asked people for their gut reactions to pictures of emotionally neutral faces, sifted through all the responses, and boiled them down to two underlying factors: how trustworthy the face looks, and how dominant. Todorov and Oosterhof conclude that personality judgements based on people's faces are an overgeneralisation of our evolved ability to infer emotions from facial expressions, and hence a person's intention to cause us harm and their ability to carry it out. Todorov, however, stresses that overgeneralisation does not rule out the idea that there is sometimes a kernel of truth in these assessments of personality.</p>
<p>So if there is a kernel of truth, where does it come from? Perrett has a hunch that the link arises when our prejudices about faces turn into self-fulfilling prophecies—an idea that was investigated by other researchers back in 1977. Our expectations can lead us to influence people to behave in ways that confirm those expectations: consistently treat someone as untrustworthy and they end up behaving that way. This effect sometimes works the other way round, however, especially for those who look cute. The Nobel prize-winning ethologist Konrad Lorenz once suggested that baby-faced features evoke a nurturing response. Support for this has come from work by Zebrowitz, who has found that baby-faced boys and men stimulate an emotional centre of the brain, the amygdala, in a similar way. But there's a twist. Babyfaced men are, on average, better educated, more assertive and apt to win more military medals than their mature-looking counterparts. They are also more likely to be criminals; think Al Capone. Similarly, Zebrowitz found baby-faced boys to be quarrelsome and hostile, and more likely to be academic highfliers. She calls this the "self-defeating prophecy effect": a man with a baby face strives to confound expectations and ends up overcompensating.</p>
<p>There is another theory that recalls the old parental warning not to pull faces because they might freeze that way. According to this theory, our personality moulds the way our faces look. It is supported by a study two decades ago which found that angry old people tend to look cross even when asked to strike a neutral expression. A lifetime of scowling, grumpiness and grimaces seemed to have left its mark.</p>
</div>
</div>
<div class="resizer" id="resizer"></div>
<div class="questions-panel" id="questions-panel">
<div id="questions-1" class="question-set">
<div class="questions-container">
<div class="question" data-q-start="1" data-q-end="8">
<div class="question-prompt">
<p><strong>Questions 1-8</strong><br>Do the following statements agree with the information given in Reading Passage 1?</p>
<p>In boxes 1-8 on your answer sheet, write</p>
<ul style="list-style: none; padding-left: 0;">
<li><strong>TRUE</strong> if the statement is true</li>
<li><strong>FALSE</strong> if the statement is false</li>
<li><strong>NOT GIVEN</strong> if the statement is not given in the passage</li>
</ul>
</div>
<div class="tf-question" data-q-start="1" data-q-end="1">
<div class="tf-question-line"><span class="tf-question-number">1</span><span class="tf-question-text">The name of interrupted brome comes from the fact that the unprepossessing grass disappeared from places in the world for a period.</span></div>
<div class="tf-options"><label class="tf-option"><input type="radio" name="q1" value="TRUE"> TRUE</label><label class="tf-option"><input type="radio" name="q1" value="FALSE"> FALSE</label><label class="tf-option"><input type="radio" name="q1" value="NOT GIVEN"> NOT GIVEN</label></div>
</div>
<div class="tf-question" data-q-start="2" data-q-end="2">
<div class="tf-question-line"><span class="tf-question-number">2</span><span class="tf-question-text">Interrupted brome became extinct because they were kept accidentally at room temperature.</span></div>
<div class="tf-options"><label class="tf-option"><input type="radio" name="q2" value="TRUE"> TRUE</label><label class="tf-option"><input type="radio" name="q2" value="FALSE"> FALSE</label><label class="tf-option"><input type="radio" name="q2" value="NOT GIVEN"> NOT GIVEN</label></div>
</div>
<div class="tf-question" data-q-start="3" data-q-end="3">
<div class="tf-question-line"><span class="tf-question-number">3</span><span class="tf-question-text">Philip Smith worked at the University of Manchester.</span></div>
<div class="tf-options"><label class="tf-option"><input type="radio" name="q3" value="TRUE"> TRUE</label><label class="tf-option"><input type="radio" name="q3" value="FALSE"> FALSE</label><label class="tf-option"><input type="radio" name="q3" value="NOT GIVEN"> NOT GIVEN</label></div>
</div>
<div class="tf-question" data-q-start="4" data-q-end="4">
<div class="tf-question-line"><span class="tf-question-number">4</span><span class="tf-question-text">English Nature has planned to recover the interrupted brome with seeds from Kew Botanic Gardens.</span></div>
<div class="tf-options"><label class="tf-option"><input type="radio" name="q4" value="TRUE"> TRUE</label><label class="tf-option"><input type="radio" name="q4" value="FALSE"> FALSE</label><label class="tf-option"><input type="radio" name="q4" value="NOT GIVEN"> NOT GIVEN</label></div>
</div>
<div class="tf-question" data-q-start="5" data-q-end="5">
<div class="tf-question-line"><span class="tf-question-number">5</span><span class="tf-question-text">Farmers in the British countryside were pleased to grow interrupted brome for the agricultural landscape.</span></div>
<div class="tf-options"><label class="tf-option"><input type="radio" name="q5" value="TRUE"> TRUE</label><label class="tf-option"><input type="radio" name="q5" value="FALSE"> FALSE</label><label class="tf-option"><input type="radio" name="q5" value="NOT GIVEN"> NOT GIVEN</label></div>
</div>
<div class="tf-question" data-q-start="6" data-q-end="6">
<div class="tf-question-line"><span class="tf-question-number">6</span><span class="tf-question-text">Legumes were used for feeding livestock and enriching the soil.</span></div>
<div class="tf-options"><label class="tf-option"><input type="radio" name="q6" value="TRUE"> TRUE</label><label class="tf-option"><input type="radio" name="q6" value="FALSE"> FALSE</label><label class="tf-option"><input type="radio" name="q6" value="NOT GIVEN"> NOT GIVEN</label></div>
</div>
<div class="tf-question" data-q-start="7" data-q-end="7">
<div class="tf-question-line"><span class="tf-question-number">7</span><span class="tf-question-text">Interrupted brome grows poorly when competing with other energetic plants.</span></div>
<div class="tf-options"><label class="tf-option"><input type="radio" name="q7" value="TRUE"> TRUE</label><label class="tf-option"><input type="radio" name="q7" value="FALSE"> FALSE</label><label class="tf-option"><input type="radio" name="q7" value="NOT GIVEN"> NOT GIVEN</label></div>
</div>
<div class="tf-question" data-q-start="8" data-q-end="8">
<div class="tf-question-line"><span class="tf-question-number">8</span><span class="tf-question-text">Only weedkillers can stop interrupted brome becoming an invasive pest.</span></div>
<div class="tf-options"><label class="tf-option"><input type="radio" name="q8" value="TRUE"> TRUE</label><label class="tf-option"><input type="radio" name="q8" value="FALSE"> FALSE</label><label class="tf-option"><input type="radio" name="q8" value="NOT GIVEN"> NOT GIVEN</label></div>
</div>
</div>
<div class="question" data-q-start="9" data-q-end="13">
<div class="question-prompt">
<p><strong>Questions 9-13</strong><br>Use the information in the passage to match the people (listed A-F) with opinions or deeds below.</p>
<p>Write the appropriate letters A-F in boxes 9-13 on your answer sheet.</p>
</div>
<div class="matching-form-container">
<div class="matching-form-row">
<label for="q9" class="matching-form-label"><strong>9</strong> identified interrupted brome as another species of brome.</label>
<select class="answer-input" id="q9"><option value=""></option><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="E">E</option><option value="F">F</option></select>
</div>
<div class="matching-form-row">
<label for="q10" class="matching-form-label"><strong>10</strong> convinced others about the status of interrupted brome in the botanic world.</label>
<select class="answer-input" id="q10"><option value=""></option><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="E">E</option><option value="F">F</option></select>
</div>
<div class="matching-form-row">
<label for="q11" class="matching-form-label"><strong>11</strong> found interrupted brome together with sainfoin.</label>
<select class="answer-input" id="q11"><option value=""></option><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="E">E</option><option value="F">F</option></select>
</div>
<div class="matching-form-row">
<label for="q12" class="matching-form-label"><strong>12</strong> helped farmers know that sainfoin is useful for enriching the soil.</label>
<select class="answer-input" id="q12"><option value=""></option><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="E">E</option><option value="F">F</option></select>
</div>
<div class="matching-form-row">
<label for="q13" class="matching-form-label"><strong>13</strong> collected the first sample of interrupted brome.</label>
<select class="answer-input" id="q13"><option value=""></option><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="E">E</option><option value="F">F</option></select>
</div>
</div>
<div class="example-box" style="font-size: 15px;">
<p><strong>List of People</strong></p>
<ul style="list-style-type: upper-alpha; margin-left: 20px;">
<li>A A.M. Barnard</li>
<li>B Professor Hackel</li>
<li>C George Claridge Druce</li>
<li>D Joan Thirsk</li>
<li>E Philip Smith</li>
<li>F Nathaniel Fiennes</li>
</ul>
</div>
</div>
</div>
</div>
<div id="questions-2" class="question-set hidden">
<div class="questions-container">
<div class="question" data-q-start="14" data-q-end="20">
<div class="question-prompt">
<p><strong>Questions 14-20</strong><br>The reading passage has seven paragraphs, A-G.</p>
<p>Choose the correct heading for paragraphs A-G from the list below.</p>
<p>Write the correct number, i-x, in boxes 14-20 on your answer sheet.</p>
</div>
<div class="example-box" style="font-size: 15px;">
<p><strong>List of Headings</strong></p>
<ul style="list-style-type: none; margin-left: 0;">
<li>i The positive correlation between climate and wealth</li>
<li>ii Other factors besides climate that influence wealth</li>
<li>iii Inspiration from reading a book</li>
<li>iv Other researchers' results do not rule out exceptional cases</li>
<li>v different attributes between Eurasia and Africa</li>
<li>vi Low temperature benefits people and crops</li>
<li>vii The importance of institution in traditional views.</li>
<li>viii The spread of crops in Europe, Asia and other places</li>
<li>ix The best way to use aid</li>
<li>x confusions and exceptional</li>
</ul>
</div>
<div class="matching-form-container">
<div class="matching-form-row">
<label for="q14" class="matching-form-label"><strong>14</strong> Paragraph A</label>
<select class="answer-input" id="q14"><option value=""></option><option value="i">i</option><option value="ii">ii</option><option value="iii">iii</option><option value="iv">iv</option><option value="v">v</option><option value="vi">vi</option><option value="vii">vii</option><option value="viii">viii</option><option value="ix">ix</option><option value="x">x</option></select>
</div>
<div class="matching-form-row">
<label for="q15" class="matching-form-label"><strong>15</strong> Paragraph B</label>
<select class="answer-input" id="q15"><option value=""></option><option value="i">i</option><option value="ii">ii</option><option value="iii">iii</option><option value="iv">iv</option><option value="v">v</option><option value="vi">vi</option><option value="vii">vii</option><option value="viii">viii</option><option value="ix">ix</option><option value="x">x</option></select>
</div>
<div class="matching-form-row">
<label for="q16" class="matching-form-label"><strong>16</strong> Paragraph C</label>
<select class="answer-input" id="q16"><option value=""></option><option value="i">i</option><option value="ii">ii</option><option value="iii">iii</option><option value="iv">iv</option><option value="v">v</option><option value="vi">vi</option><option value="vii">vii</option><option value="viii">viii</option><option value="ix">ix</option><option value="x">x</option></select>
</div>
<div class="matching-form-row">
<label for="q17" class="matching-form-label"><strong>17</strong> Paragraph D</label>
<select class="answer-input" id="q17"><option value=""></option><option value="i">i</option><option value="ii">ii</option><option value="iii">iii</option><option value="iv">iv</option><option value="v">v</option><option value="vi">vi</option><option value="vii">vii</option><option value="viii">viii</option><option value="ix">ix</option><option value="x">x</option></select>
</div>
<div class="matching-form-row">
<label for="q18" class="matching-form-label"><strong>18</strong> Paragraph E</label>
<select class="answer-input" id="q18"><option value=""></option><option value="i">i</option><option value="ii">ii</option><option value="iii">iii</option><option value="iv">iv</option><option value="v">v</option><option value="vi">vi</option><option value="vii">vii</option><option value="viii">viii</option><option value="ix">ix</option><option value="x">x</option></select>
</div>
<div class="matching-form-row">
<label for="q19" class="matching-form-label"><strong>19</strong> Paragraph F</label>
<select class="answer-input" id="q19"><option value=""></option><option value="i">i</option><option value="ii">ii</option><option value="iii">iii</option><option value="iv">iv</option><option value="v">v</option><option value="vi">vi</option><option value="vii">vii</option><option value="viii">viii</option><option value="ix">ix</option><option value="x">x</option></select>
</div>
<div class="matching-form-row">
<label for="q20" class="matching-form-label"><strong>20</strong> Paragraph G</label>
<select class="answer-input" id="q20"><option value=""></option><option value="i">i</option><option value="ii">ii</option><option value="iii">iii</option><option value="iv">iv</option><option value="v">v</option><option value="vi">vi</option><option value="vii">vii</option><option value="viii">viii</option><option value="ix">ix</option><option value="x">x</option></select>
</div>
</div>
</div>
<div class="question" data-q-start="21" data-q-end="26">
<div class="question-prompt">
<p><strong>Questions 21-26</strong><br>Complete the following summary of the paragraphs of Reading Passage</p>
<p>Using NO MORE THAN TWO WORDS from the Reading Passage for each answer.</p>
<p>Write your answers in boxes 21-26 on your answer sheet.</p>
</div>
<p>Dr William Master read a book saying that a (an) <input type="text" class="answer-input" id="q21" placeholder="21"> which struck an American city of years ago was terminated by a cold frost. And academics found that there is a connection between climate and country's wealthy as in the rich but small country of <input type="text" class="answer-input" id="q22" placeholder="22">; Yet besides excellent surroundings and climate, one country still need to improve both their <input type="text" class="answer-input" id="q23" placeholder="23"> to achieve long prosperity,</p>
<p>Thanks to resembling weather condition across latitude in the continent of <input type="text" class="answer-input" id="q24" placeholder="24"> 'crops such as <input type="text" class="answer-input" id="q25" placeholder="25"> is bound to spread faster than from South America to the North. Other researchers also noted that even though geographical factors are important, a tropical country such as <input type="text" class="answer-input" id="q26" placeholder="26"> still became rich due to scientific advancement.</p>
</div>
</div>
</div>
<div id="questions-3" class="question-set hidden">
<div class="questions-container">
<div class="question" data-q-start="27" data-q-end="31">
<div class="question-prompt">
<p><strong>Questions 27-31</strong><br>Do the following statements agree with the views of the writer in Reading Passage 3?</p>
<p>In boxes 27-31 on your answer sheet, write</p>
<ul style="list-style: none; padding-left: 0;">
<li><strong>YES</strong> if the statement agrees with the views of the writer</li>
<li><strong>NO</strong> if the statement contradicts the views of the writer</li>
<li><strong>NOT GIVEN</strong> if it is impossible to say that the writer thinks about this</li>
</ul>
</div>
<div class="tf-question" data-q-start="27" data-q-end="27">
<div class="tf-question-line"><span class="tf-question-number">27</span><span class="tf-question-text">Robert Fitzroy's first impression of Darwin was accurate.</span></div>
<div class="tf-options"><label class="tf-option"><input type="radio" name="q27" value="YES"> YES</label><label class="tf-option"><input type="radio" name="q27" value="NO"> NO</label><label class="tf-option"><input type="radio" name="q27" value="NOT GIVEN"> NOT GIVEN</label></div>
</div>
<div class="tf-question" data-q-start="28" data-q-end="28">
<div class="tf-question-line"><span class="tf-question-number">28</span><span class="tf-question-text">The precise rules of "physiognomy" have remained unchanged since the 18th century.</span></div>
<div class="tf-options"><label class="tf-option"><input type="radio" name="q28" value="YES"> YES</label><label class="tf-option"><input type="radio" name="q28" value="NO"> NO</label><label class="tf-option"><input type="radio" name="q28" value="NOT GIVEN"> NOT GIVEN</label></div>
</div>
<div class="tf-question" data-q-start="29" data-q-end="29">
<div class="tf-question-line"><span class="tf-question-number">29</span><span class="tf-question-text">The first impression of a person can be modified later with little effort.</span></div>
<div class="tf-options"><label class="tf-option"><input type="radio" name="q29" value="YES"> YES</label><label class="tf-option"><input type="radio" name="q29" value="NO"> NO</label><label class="tf-option"><input type="radio" name="q29" value="NOT GIVEN"> NOT GIVEN</label></div>
</div>
<div class="tf-question" data-q-start="30" data-q-end="30">
<div class="tf-question-line"><span class="tf-question-number">30</span><span class="tf-question-text">People who appear capable are more likely to be chosen to a position of power.</span></div>
<div class="tf-options"><label class="tf-option"><input type="radio" name="q30" value="YES"> YES</label><label class="tf-option"><input type="radio" name="q30" value="NO"> NO</label><label class="tf-option"><input type="radio" name="q30" value="NOT GIVEN"> NOT GIVEN</label></div>
</div>
<div class="tf-question" data-q-start="31" data-q-end="31">
<div class="tf-question-line"><span class="tf-question-number">31</span><span class="tf-question-text">It is unfair for good-looking people to be better treated in society.</span></div>
<div class="tf-options"><label class="tf-option"><input type="radio" name="q31" value="YES"> YES</label><label class="tf-option"><input type="radio" name="q31" value="NO"> NO</label><label class="tf-option"><input type="radio" name="q31" value="NOT GIVEN"> NOT GIVEN</label></div>
</div>
</div>
<div class="question" data-q-start="32" data-q-end="36">
<div class="question-prompt">
<p><strong>Questions 32-36</strong><br>Choose the correct letter, A, B, C or D.</p>
<p>Write your answers in boxes 32-36 on your answer sheet.</p>
</div>
<div class="multi-choice-question" data-q-start="32" data-q-end="32">
<div class="multi-choice-options">
<p><strong>What’s true about Anthony Little and David Perrett’s experiment?</strong></p>
<div class="multi-choice-option"><label><input type="radio" name="q32" value="A"> It is based on the belief that none of the conclusions in the Michigan experiment is accurate.</label></div>
<div class="multi-choice-option"><label><input type="radio" name="q32" value="B"> It supports parts of the conclusions in the Michigan experiment.</label></div>
<div class="multi-choice-option"><label><input type="radio" name="q32" value="C"> It replicates the study conditions in the Michigan experiment.</label></div>
<div class="multi-choice-option"><label><input type="radio" name="q32" value="D"> It has a greater range of faces than in the Michigan experiment.</label></div>
</div>
</div>
<div class="multi-choice-question" data-q-start="33" data-q-end="33">
<div class="multi-choice-options">
<p><strong>What can be concluded from Justin Carre and Cheryl McCormick’s experiment?
</strong></p>
<div class="multi-choice-option"><label><input type="radio" name="q33" value="A"> A wide-faced man may be more aggressive.</label></div>
<div class="multi-choice-option"><label><input type="radio" name="q33" value="B"> Aggressive men have a wide range of facial features.</label></div>
<div class="multi-choice-option"><label><input type="radio" name="q33" value="C"> There is no relation between facial features and an aggressive character.</label></div>
<div class="multi-choice-option"><label><input type="radio" name="q33" value="D"> It's necessary for people to be aggressive in competitive games.</label></div>
</div>
</div>
<div class="multi-choice-question" data-q-start="34" data-q-end="34">
<div class="multi-choice-options">
<p><strong> What’s exemplified by referring to butterfly marks?</strong></p>
<div class="multi-choice-option"><label><input type="radio" name="q34" value="A"> Threats to safety are easy to notice.</label></div>
<div class="multi-choice-option"><label><input type="radio" name="q34" value="B"> Instinct does not necessarily lead to accurate judgment.</label></div>
<div class="multi-choice-option"><label><input type="radio" name="q34" value="C"> People should learn to distinguish between accountable and unaccountable judgments.</label></div>
<div class="multi-choice-option"><label><input type="radio" name="q34" value="D"> Different species have various ways to notice danger.</label></div>
</div>
</div>
<div class="multi-choice-question" data-q-start="35" data-q-end="35">
<div class="multi-choice-options">
<p><strong>What is the aim of Alexander Todorov’s study?</strong></p>
<div class="multi-choice-option"><label><input type="radio" name="q35" value="A"> to determine the correlation between facial features and social development</label></div>
<div class="multi-choice-option"><label><input type="radio" name="q35" value="B"> to undermine the belief that appearance is important</label></div>
<div class="multi-choice-option"><label><input type="radio" name="q35" value="C"> to learn the influence of facial features on judgments of a person's personality</label></div>
<div class="multi-choice-option"><label><input type="radio" name="q35" value="D"> to study the role of judgments in a person's relationship</label></div>
</div>
</div>
<div class="multi-choice-question" data-q-start="36" data-q-end="36">
<div class="multi-choice-options">
<p><strong>Which of the following is the conclusion of Alexander Todorov’s study?</strong></p>
<div class="multi-choice-option"><label><input type="radio" name="q36" value="A"> People should draw accurate judgments from overgeneralization.</label></div>
<div class="multi-choice-option"><label><input type="radio" name="q36" value="B"> Using appearance to determine a person's character is undependable.</label></div>
<div class="multi-choice-option"><label><input type="radio" name="q36" value="C"> Overgeneralization can be misleading as a way to determine a person's character.</label></div>
<div class="multi-choice-option"><label><input type="radio" name="q36" value="D"> The judgment of a person's character based on appearance may be accurate.</label></div>
</div>
</div>
</div>
<div class="question" data-q-start="37" data-q-end="40">
<div class="question-prompt">
<p><strong>Questions 37-40</strong><br>Complete each sentence with the correct ending, A-F, below.</p>
<p>Write the correct letter, A-F, in boxes 37-40 on your answer sheet.</p>
</div>
<div class="example-box" style="font-size: 15px;">
<p><strong>List of Endings</strong></p>
<ul style="list-style-type: upper-alpha; margin-left: 20px;">
<li>A judge other people by overgeneralization,</li>
<li>B may influence the behaviour of other people,</li>
<li>C tend to commit criminal acts.</li>
<li>D may be influenced by the low expectations of other people.</li>
<li>E may show the effect of long-term behaviours.</li>
<li>F may be trying to repel the expectations of other people.</li>
</ul>
</div>
<div class="matching-form-container">
<div class="matching-form-row">
<label for="q37" class="matching-form-label"><strong>37</strong> Perret believed people behaving dishonestly</label>
<select class="answer-input" id="q37"><option value=""></option><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="E">E</option><option value="F">F</option></select>
</div>
<div class="matching-form-row">
<label for="q38" class="matching-form-label"><strong>38</strong> The writer supports the view that people with babyish features</label>
<select class="answer-input" id="q38"><option value=""></option><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="E">E</option><option value="F">F</option></select>
</div>
<div class="matching-form-row">
<label for="q39" class="matching-form-label"><strong>39</strong> According to Zebrowitz, baby-faced people who behave dominantly</label>
<select class="answer-input" id="q39"><option value=""></option><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="E">E</option><option value="F">F</option></select>
</div>
<div class="matching-form-row">
<label for="q40" class="matching-form-label"><strong>40</strong> The writer believes facial features</label>
<select class="answer-input" id="q40"><option value=""></option><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="E">E</option><option value="F">F</option></select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Navigation Arrows -->
<div class="nav-arrows">
<button class="nav-arrow" onclick="previousQuestion()" id="prevBtn">‹</button>
<button class="nav-arrow" onclick="nextQuestion()" id="nextBtn">›</button>
</div>
<!-- Bottom Navigation -->
<nav class="nav-row perScorableItem" aria-label="Questions">
<div class="footer__questionWrapper___1tZ46 selected multiple" role="tablist">
<button role="tab" class="footer__questionNo___3WNct" onclick="switchToPart(1)">
<span>
<span aria-hidden="true" class="section-prefix">Part </span>
<span class="sectionNr" aria-hidden="true">1</span>
<span class="attemptedCount" aria-hidden="true">0 of 13</span>
</span>
</button>
<div class="footer__subquestionWrapper___9GgoP">
<button class="subQuestion scorable-item" onclick="goToQuestion(1)"><span class="sr-only">Question 1</span><span aria-hidden="true">1</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(2)"><span class="sr-only">Question 2</span><span aria-hidden="true">2</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(3)"><span class="sr-only">Question 3</span><span aria-hidden="true">3</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(4)"><span class="sr-only">Question 4</span><span aria-hidden="true">4</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(5)"><span class="sr-only">Question 5</span><span aria-hidden="true">5</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(6)"><span class="sr-only">Question 6</span><span aria-hidden="true">6</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(7)"><span class="sr-only">Question 7</span><span aria-hidden="true">7</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(8)"><span class="sr-only">Question 8</span><span aria-hidden="true">8</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(9)"><span class="sr-only">Question 9</span><span aria-hidden="true">9</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(10)"><span class="sr-only">Question 10</span><span aria-hidden="true">10</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(11)"><span class="sr-only">Question 11</span><span aria-hidden="true">11</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(12)"><span class="sr-only">Question 12</span><span aria-hidden="true">12</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(13)"><span class="sr-only">Question 13</span><span aria-hidden="true">13</span></button>
</div>
</div>
<div class="footer__questionWrapper___1tZ46 multiple" role="tablist">
<button role="tab" class="footer__questionNo___3WNct" onclick="switchToPart(2)">
<span>
<span aria-hidden="true" class="section-prefix">Part </span>
<span class="sectionNr" aria-hidden="true">2</span>
<span class="attemptedCount" aria-hidden="true">0 of 13</span>
</span>
</button>
<div class="footer__subquestionWrapper___9GgoP">
<button class="subQuestion scorable-item" onclick="goToQuestion(14)"><span class="sr-only">Question 14</span><span aria-hidden="true">14</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(15)"><span class="sr-only">Question 15</span><span aria-hidden="true">15</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(16)"><span class="sr-only">Question 16</span><span aria-hidden="true">16</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(17)"><span class="sr-only">Question 17</span><span aria-hidden="true">17</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(18)"><span class="sr-only">Question 18</span><span aria-hidden="true">18</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(19)"><span class="sr-only">Question 19</span><span aria-hidden="true">19</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(20)"><span class="sr-only">Question 20</span><span aria-hidden="true">20</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(21)"><span class="sr-only">Question 21</span><span aria-hidden="true">21</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(22)"><span class="sr-only">Question 22</span><span aria-hidden="true">22</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(23)"><span class="sr-only">Question 23</span><span aria-hidden="true">23</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(24)"><span class="sr-only">Question 24</span><span aria-hidden="true">24</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(25)"><span class="sr-only">Question 25</span><span aria-hidden="true">25</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(26)"><span class="sr-only">Question 26</span><span aria-hidden="true">26</span></button>
</div>
</div>
<div class="footer__questionWrapper___1tZ46 multiple" role="tablist">
<button role="tab" class="footer__questionNo___3WNct" onclick="switchToPart(3)">
<span>
<span aria-hidden="true" class="section-prefix">Part </span>
<span class="sectionNr" aria-hidden="true">3</span>
<span class="attemptedCount" aria-hidden="true">0 of 14</span>
</span>
</button>
<div class="footer__subquestionWrapper___9GgoP">
<button class="subQuestion scorable-item" onclick="goToQuestion(27)"><span class="sr-only">Question 27</span><span aria-hidden="true">27</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(28)"><span class="sr-only">Question 28</span><span aria-hidden="true">28</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(29)"><span class="sr-only">Question 29</span><span aria-hidden="true">29</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(30)"><span class="sr-only">Question 30</span><span aria-hidden="true">30</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(31)"><span class="sr-only">Question 31</span><span aria-hidden="true">31</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(32)"><span class="sr-only">Question 32</span><span aria-hidden="true">32</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(33)"><span class="sr-only">Question 33</span><span aria-hidden="true">33</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(34)"><span class="sr-only">Question 34</span><span aria-hidden="true">34</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(35)"><span class="sr-only">Question 35</span><span aria-hidden="true">35</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(36)"><span class="sr-only">Question 36</span><span aria-hidden="true">36</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(37)"><span class="sr-only">Question 37</span><span aria-hidden="true">37</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(38)"><span class="sr-only">Question 38</span><span aria-hidden="true">38</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(39)"><span class="sr-only">Question 39</span><span aria-hidden="true">39</span></button>
<button class="subQuestion scorable-item" onclick="goToQuestion(40)"><span class="sr-only">Question 40</span><span aria-hidden="true">40</span></button>
</div>
</div>
<button id="deliver-button" aria-label="Review your answers" class="footer__deliverButton___3FM07">
<i class="fa fa fa-check" aria-hidden="true"></i>
<span>Check Answers</span>
</button>
</nav>
<!-- Context Menu -->
<div id="contextMenu" class="context-menu">
<div id="menu-highlight" class="context-menu-item" onclick="highlightText()">
Highlight
</div>
<div id="menu-note" class="context-menu-item" onclick="addNote()">
Note
</div>
<div id="menu-clear" class="context-menu-item" onclick="clearHighlight()">
Clear
</div>
<div id="menu-clear-all" class="context-menu-item" onclick="clearAllHighlights()">
Clear All
</div>
</div>
<div id="results-modal" class="modal-overlay hidden">
<div class="modal-content">
<button class="modal-close-btn" onclick="closeResultsModal()">×</button>
<h2>Results</h2>
<div class="results-summary">
<p>Score: <span id="results-score"></span> / 40</p>
<p>IELTS Band: <span id="results-band"></span></p>
</div>
<div id="results-details" class="results-details-container">
<!-- Results for each question will be injected here -->
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// --- STATE VARIABLES ---
let currentPassage = 1;
let currentQuestion = 1;
let selectedRange = null;
let timeInSeconds = 3600;
let timerInterval;
let draggedItem = null;
let activeQuestionElement = null;
let selectedDragItem = null;
// --- DOM ELEMENTS ---
const timerDisplay = document.querySelector('.timer-display');
const timerToggleButton = document.getElementById('timer-toggle-btn');
const timerResetButton = document.getElementById('timer-reset-btn');
const deliverButton = document.getElementById('deliver-button');
const resizer = document.getElementById('resizer');
const passagePanel = document.getElementById('passage-panel');
const questionsPanel = document.getElementById('questions-panel');
const contextMenu = document.getElementById('contextMenu');
// --- ICON SVGs ---
const playIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8 5v14l11-7L8 5z"/></svg>';
const pauseIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>';
// --- ANSWERS ---
const correctAnswers = {
'1': 'FALSE', '2': 'FALSE', '3': 'NOT GIVEN', '4': 'NOT GIVEN', '5': 'FALSE',
'6': 'TRUE', '7': 'TRUE', '8': 'FALSE',
'9': 'B', '10': 'C', '11': 'E', '12': 'F', '13': 'A',
'14': 'iii', '15': 'i', '16': 'vi', '17': 'ii', '18': 'ix', '19': 'v', '20': 'iv',
'21': 'epidemic', '22': 'Finland', '23': 'institutions', '24': 'Eurasia', '25': 'einkorn wheat', '26': 'Singapore',
'27': 'NO', '28': 'NOT GIVEN', '29': 'NO', '30': 'YES', '31': 'NOT GIVEN',
'32': 'B', '33': 'A', '34': 'B', '35': 'C', '36': 'D',
'37': 'B', '38': 'C', '39': 'F', '40': 'E'
};
// --- INITIALIZATION ---
function initialize() {
startTimer();
initializeDragAndDrop();
setupCheckboxLimits();
setupExampleHeading();
switchToPart(1); // Also calls goToQuestion(1) and updateNavigation
document.body.addEventListener('input', updateAllIndicators);
document.body.addEventListener('change', updateAllIndicators);
deliverButton.addEventListener('click', checkAnswers);
timerToggleButton.addEventListener('click', toggleTimer);
timerResetButton.addEventListener('click', resetTimer);
// Add click listeners to question containers for navigation
document.querySelectorAll('[data-q-start]').forEach(el => {
el.addEventListener('click', () => {
const qNum = parseInt(el.dataset.qStart, 10);
if (currentQuestion !== qNum) {
goToQuestion(qNum);
}
});
});
resizer.addEventListener('mousedown', initResize, false);
initializeContextMenu();
}
// --- CORE TEST LOGIC ---
function checkAnswers() {
// Disable all inputs to prevent changes
const allInputs = document.querySelectorAll('input, select, textarea');
allInputs.forEach(input => {
input.disabled = true;
});
// Disable submit button
deliverButton.disabled = true;
deliverButton.style.cursor = 'not-allowed';
clearInterval(timerInterval);
let score = 0;
const totalQuestions = 40;
const resultsDetailsContainer = document.getElementById('results-details');
resultsDetailsContainer.innerHTML = '';
document.querySelectorAll('.correct, .incorrect, .correct-answer-highlight').forEach(el => {
el.classList.remove('correct', 'incorrect', 'correct-answer-highlight');
});
document.querySelectorAll('.correct-answer-display').forEach(el => el.remove());
for (let i = 1; i <= totalQuestions; i++) {
const questionKey = String(i);
const correctAnswer = correctAnswers[questionKey];
let userAnswer = '';
let isCorrect = false;
let userAnswerDisplay = 'Not Answered';
const correctAnswerText = Array.isArray(correctAnswer) ? correctAnswer.join(' / ') : correctAnswer;
const textInput = document.getElementById(`q${i}`);
const radioGroup = document.querySelectorAll(`input[name="q${i}"][type="radio"]`);
const selectInput = document.getElementById(`q${i}`);
const checkboxGroup = document.querySelectorAll(`input[name="q${i}"][type="checkbox"]:checked`);
// Handle Text Inputs
if (textInput && textInput.tagName === 'INPUT' && textInput.type === 'text') {
const element = textInput.closest('.matching-form-row') || textInput;
userAnswer = textInput.value.trim();
userAnswerDisplay = userAnswer || 'Not Answered';
isCorrect = Array.isArray(correctAnswer) ?
correctAnswer.some(ans => userAnswer.toLowerCase() === ans.toLowerCase()) :
userAnswer.toLowerCase() === correctAnswer.toLowerCase();
if (isCorrect) {
score++;
element.classList.add('correct');
} else {
element.classList.add('incorrect');
const correctAnswerSpan = document.createElement('span');
correctAnswerSpan.className = 'correct-answer-display';
correctAnswerSpan.innerHTML = ` ➜ <span class="correct-answer-highlight">${correctAnswerText}</span>`;
textInput.parentNode.insertBefore(correctAnswerSpan, textInput.nextSibling);
}
}
// Handle Select Inputs
else if (selectInput && selectInput.tagName === 'SELECT') {
const element = selectInput.closest('.matching-form-row') || selectInput;
userAnswer = selectInput.value;
userAnswerDisplay = userAnswer || 'Not Answered';
isCorrect = userAnswer === correctAnswer;
if (isCorrect) {
score++;
element.classList.add('correct');
} else {
element.classList.add('incorrect');
const correctAnswerSpan = document.createElement('span');
correctAnswerSpan.className = 'correct-answer-display';
correctAnswerSpan.innerHTML = ` ➜ <span class="correct-answer-highlight">${correctAnswerText}</span>`;
selectInput.parentNode.insertBefore(correctAnswerSpan, selectInput.nextSibling);
}
}
// Handle Radio Button Inputs (T/F, MCQs)
else if (radioGroup.length > 0) {
const questionContainer = radioGroup[0].closest('.tf-question') || radioGroup[0].closest('.multi-choice-question');
const checkedRadio = document.querySelector(`input[name="q${i}"]:checked`);
if (checkedRadio) {
userAnswer = checkedRadio.value;
userAnswerDisplay = userAnswer;
isCorrect = userAnswer === correctAnswer;
const userLabel = checkedRadio.closest('.tf-option, .multi-choice-option');
if (userLabel) {
userLabel.classList.add(isCorrect ? 'correct' : 'incorrect');
}
}
if (isCorrect) {
score++;
} else {
if (questionContainer){
const correctOptionEl = questionContainer.querySelector(`input[value="${correctAnswerText}"]`);
if (correctOptionEl) {
const correctLabel = correctOptionEl.closest('.tf-option, .multi-choice-option');
if (correctLabel) {
correctLabel.classList.add('correct-answer-highlight');
}
}
}
}
}
// For showing results in the modal
const resultRow = `
<div class="result-row ${isCorrect ? '' : 'incorrect'}">
<span class="q-num">${i}</span>
<span class="user-ans">${userAnswerDisplay}</span>
<span class="correct-ans">${correctAnswerText}</span>
</div>`;
resultsDetailsContainer.innerHTML += resultRow;
// Update nav button color
const navButton = document.querySelector(`.subQuestion[onclick="goToQuestion(${i})"]`);
if (navButton) {
navButton.classList.remove('answered', 'active');
navButton.classList.add(isCorrect ? 'correct' : 'incorrect');
}
}
document.getElementById('results-score').textContent = score;
document.getElementById('results-band').textContent = calculateBandScore(score);
document.getElementById('results-modal').classList.remove('hidden');
}
function calculateBandScore(score) {
if (score >= 39) return '9.0';
const mapping = {
40: 9.0, 39: 9.0, 38: 8.5, 37: 8.5, 36: 8.0, 35: 8.0, 34: 7.5,
33: 7.5, 32: 7.0, 31: 7.0, 30: 7.0, 29: 6.5, 28: 6.5, 27: 6.5,
26: 6.0, 25: 6.0, 24: 6.0, 23: 5.5, 22: 5.5, 21: 5.5, 20: 5.5,
19: 5.0, 18: 5.0, 17: 5.0, 16: 5.0, 15: 5.0, 14: 4.5, 13: 4.5,
12: 4.0, 11: 4.0, 10: 4.0, 9: 3.5, 8: 3.5, 7: 3.0, 6: 3.0,
5: 2.5, 4: 2.5
};
if (score <= 0) return 0.0;
if (score === 1) return 1.0;
if (score <= 3) return 2.0;
if (score <= 5) return 2.5;
return mapping[score] || 0.0;
}
function getUserAnswer(qNum) {
const textInput = document.getElementById(`q${qNum}`);
const radioInput = document.querySelector(`input[name="q${qNum}"]:checked`);
const dropZone = document.querySelector(`.drop-zone[data-q-start="${qNum}"]`);
if (textInput) { // Handles <input type="text"> and <select>
return { value: textInput.value, text: textInput.value || 'N/A' };
}
if (radioInput) {
return { value: radioInput.value, text: radioInput.value };
}
if (dropZone) {
const droppedItem = dropZone.querySelector('.drag-item');
return {
value: droppedItem ? droppedItem.dataset.value : null,
text: droppedItem ? droppedItem.textContent.trim() : 'N/A'
};
}
return { value: null, text: 'N/A' };
}
function displayCorrectAnswer(qNum, correctAnswer) {
// Handle radio button questions by highlighting the correct label
const correctRadioInput = document.querySelector(`input[name="q${qNum}"][value="${correctAnswer}"]`);
if (correctRadioInput) {
const parentOption = correctRadioInput.closest('.tf-option, .multi-choice-option');
if (parentOption) {
parentOption.classList.add('correct-answer-highlight');
return;
}
}
// Handle text inputs, select dropdowns, and others by showing the answer next to them
const inputEl = document.getElementById(`q${qNum}`);
if (inputEl) {
const displaySpan = document.createElement('span');
displaySpan.className = 'correct-answer-display';
displaySpan.textContent = ` ✓ ${correctAnswer}`;
inputEl.insertAdjacentElement('afterend', displaySpan);
return; // Done
}
// Fallback for questions identified by a container (e.g., some T/F/NG questions)
const element = findQuestionElement(qNum);
if (element) {
const displaySpan = document.createElement('span');
displaySpan.className = 'correct-answer-display';
displaySpan.textContent = ` ✓ ${correctAnswer}`;
const itemContainer = element.querySelector('.tf-question-text');
if (itemContainer) {
itemContainer.appendChild(displaySpan);
} else {
element.appendChild(displaySpan);
}
}
}
function findQuestionElement(qNum) {
return document.querySelector(`[data-q-start="${qNum}"]`);
}
function addResultToModal(qNum, userAnswer, correctAnswer, isCorrect) {
const resultsDetails = document.getElementById('results-details');
const row = document.createElement('div');
row.className = 'result-row';
if (!isCorrect) {
row.classList.add('incorrect');
}
row.innerHTML = `
<span class="q-num">${qNum}</span>
<span class="user-ans">${userAnswer}</span>
<span class="correct-ans">${correctAnswer}</span>
`;
resultsDetails.appendChild(row);
}
function showResultsModal() {
document.getElementById('results-modal').classList.remove('hidden');
}
window.closeResultsModal = function() {
document.getElementById('results-modal').classList.add('hidden');
}
function disableInputs() {
deliverButton.innerHTML = `<span>Checked! View Results.</span>`;
deliverButton.removeEventListener('click', checkAnswers);
deliverButton.onclick = showResultsModal;
document.querySelectorAll('input, select').forEach(el => {
el.disabled = true;
if (el.matches('input[type=radio], input[type=checkbox]')) {
el.style.cursor = 'not-allowed';
el.parentElement.style.cursor = 'not-allowed';
}
});
document.querySelectorAll('.drag-item').forEach(el => {
el.setAttribute('draggable', 'false');
el.style.cursor = 'default';
});
document.querySelectorAll('.drop-zone').forEach(el => {
el.classList.add('disabled');
});
}
function checkValue(userValue, correctValue) {
if (userValue === null || userValue === undefined) return false;
const formattedUserValue = userValue.trim().toLowerCase();
if (Array.isArray(correctValue)) {
return correctValue.map(v => v.toLowerCase()).includes(formattedUserValue);
} else {
return formattedUserValue === String(correctValue).toLowerCase();
}
}
function markQuestion(qNum, isCorrect) {
const subQuestionBtn = document.querySelector(`.subQuestion[onclick="goToQuestion(${qNum})"]`);
subQuestionBtn?.classList.add(isCorrect ? 'correct' : 'incorrect');
const elementsToMark = [
document.querySelector(`.tf-question[data-q-start="${qNum}"]`),
document.querySelector(`.multi-choice-question[data-q-start="${qNum}"]`),
document.querySelector(`.matching-question-item[data-q-start="${qNum}"]`),
document.querySelector(`.drop-zone[data-q-start="${qNum}"]`),
document.getElementById(`q${qNum}`),
document.querySelector(`input[name="q${qNum}"]:checked`)?.closest('.tf-option'),
document.querySelector(`input[name="q${qNum}"]:checked`)?.closest('.multi-choice-option')
];
elementsToMark.forEach(el => {
if (el) el.classList.add(isCorrect ? 'correct' : 'incorrect');
});
}
function switchToPart(partNumber) {
currentPassage = partNumber;
// Hide all passages and questions
document.querySelectorAll('.reading-passage, .question-set, .part-header').forEach(el => {
el.classList.add('hidden');
});
// Show the correct passage, questions, and header
document.getElementById(`passage-text-${partNumber}`).classList.remove('hidden');
document.getElementById(`questions-${partNumber}`).classList.remove('hidden');
document.getElementById(`part-header-${partNumber}`).classList.remove('hidden');
// Update bottom navigation 'selected' state
document.querySelectorAll('.footer__questionWrapper___1tZ46').forEach((wrapper, index) => {
wrapper.classList.toggle('selected', (index + 1) === partNumber);
});
// Go to the first question of the part
const firstQuestionOfPart = {1: 1, 2: 14, 3: 27}[partNumber];
goToQuestion(firstQuestionOfPart);
}
function goToQuestion(questionNumber) {
currentQuestion = questionNumber;
let passageNumber = 1;
if (questionNumber >= 14 && questionNumber <= 26) passageNumber = 2;
else if (questionNumber >= 27) passageNumber = 3;
if (currentPassage !== passageNumber) {
switchToPart(passageNumber);
return;
}
if (activeQuestionElement) {
activeQuestionElement.classList.remove('active-question', 'active-input');
}
let targetEl = document.querySelector(`[data-q-start="${questionNumber}"]`);
if (targetEl) {
activeQuestionElement = targetEl;
if (targetEl.matches('input[type="text"]') || targetEl.matches('select')) {
targetEl.classList.add('active-input');
} else {
targetEl.classList.add('active-question');
}
scrollIntoViewIfNeeded(targetEl);
} else {
const pMatch = document.querySelector(`.paragraph-matching-question select[id="q${questionNumber}"]`);
if(pMatch) {
activeQuestionElement = pMatch;
pMatch.classList.add('active-input');
scrollIntoViewIfNeeded(pMatch);
}
}
updateNavigation();
}
// --- UI & NAVIGATION ---
function updateNavigation() {
const navButtons = document.querySelectorAll('.subQuestion');
navButtons.forEach(btn => btn.classList.remove('active'));
const activeNav = document.querySelector(`.subQuestion[onclick="goToQuestion(${currentQuestion})"]`);
if (activeNav) {
activeNav.classList.add('active');
}
const inputs = document.querySelectorAll('.answer-input, .drop-zone.filled, .summary-drop-zone.filled');
inputs.forEach(input => input.classList.remove('active-input'));
const activeInput = document.getElementById(`q${currentQuestion}`);
if (activeInput) {
activeInput.classList.add('active-input');
if (typeof activeInput.focus === 'function') {
activeInput.focus();
}
} else {
const activeQuestionBlock = document.querySelector(`[data-q-start="${currentQuestion}"]`);
if (activeQuestionBlock) {
const firstInput = activeQuestionBlock.querySelector('input, select');
if(firstInput) {
firstInput.classList.add('active-input');
if (typeof firstInput.focus === 'function') {
firstInput.focus();
}
}
}
}
}
function selectDragItem(item) {
if (selectedDragItem) {
selectedDragItem.classList.remove('selected');
}
selectedDragItem = item;
if (selectedDragItem) {
selectedDragItem.classList.add('selected');
}
}
window.nextQuestion = () => currentQuestion < 40 && goToQuestion(currentQuestion + 1);
window.previousQuestion = () => currentQuestion > 1 && goToQuestion(currentQuestion - 1);
function updateAllIndicators() {
updateAttemptedCount(1, 1, 13);
updateAttemptedCount(2, 14, 26);
updateAttemptedCount(3, 27, 40);
updateAnsweredNav();
}
function updateAnsweredNav() {
const navButtons = document.querySelectorAll('.subQuestion');
navButtons.forEach(btn => {
const qNum = parseInt(btn.textContent, 10);
if (isQuestionAnswered(qNum)) {
btn.classList.add('answered');
} else {
btn.classList.remove('answered');
}
});
}
function isQuestionAnswered(qNum) {
const textInput = document.getElementById(`q${qNum}`);
if (textInput && (textInput.value.trim() !== '' || (textInput.classList.contains('drop-zone') && textInput.children.length > 0))) {
return true;
}
const radio = document.querySelector(`input[name="q${qNum}"]:checked`);
if (radio) {
return true;
}
const checkbox = document.querySelector(`input[name="q${qNum}"]:checked`);
if (checkbox) {
return true;
}
return false;
}
function scrollIntoViewIfNeeded(element) {
const panel = element.closest('.questions-panel, .passage-panel');
const panelRect = panel.getBoundingClientRect();
const elementRect = element.getBoundingClientRect();
if (elementRect.top < panelRect.top || elementRect.bottom > panelRect.bottom) {
element.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}
// --- DRAG AND DROP ---
function initializeDragAndDrop() {
document.querySelectorAll('.drag-item').forEach(item => {
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragend', handleDragEnd);
item.addEventListener('click', () => selectDragItem(item));
});
document.querySelectorAll('.drop-zone, .drag-options-container').forEach(zone => {
zone.addEventListener('dragover', handleDragOver);
zone.addEventListener('dragleave', handleDragLeave);
zone.addEventListener('drop', handleDrop);
});
}
function handleDragStart(e) {
draggedItem = e.target;
setTimeout(() => e.target.classList.add('dragging'), 0);
}
function handleDragEnd(e) {
e.target.classList.remove('dragging');
draggedItem = null;
}
function handleDragOver(e) {
e.preventDefault();
const targetZone = e.currentTarget;
if (draggedItem && draggedItem.dataset.dndGroup === targetZone.dataset.dndGroup) {
targetZone.classList.add('drag-over');
}
}
function handleDragLeave(e) {
e.currentTarget.classList.remove('drag-over');
}
function handleDrop(e) {
e.preventDefault();
const targetZone = e.currentTarget;
targetZone.classList.remove('drag-over');
if (!draggedItem || draggedItem.dataset.dndGroup !== targetZone.dataset.dndGroup) {
return;
}
const sourceZone = draggedItem.parentElement;
if (sourceZone === targetZone) return; // Prevent dropping on itself
const existingItemInTarget = targetZone.classList.contains('drop-zone')
? targetZone.querySelector('.drag-item')
: null;
// First, clear the target drop-zone of any text (like question numbers) before adding the new item.
if (targetZone.classList.contains('drop-zone')) {
Array.from(targetZone.childNodes).forEach(node => {
if (node.nodeType === Node.TEXT_NODE) {
node.remove();
}
});
}
// Move the item that was in the target (if any) to the source zone.
if (existingItemInTarget) {
sourceZone.appendChild(existingItemInTarget);
}
// Finally, move the dragged item to the target zone.
targetZone.appendChild(draggedItem);
targetZone.classList.add('filled');
// After the move, clean up the source zone if it's a drop-zone and is now empty.
if (sourceZone.classList.contains('drop-zone') && !sourceZone.querySelector('.drag-item')) {
sourceZone.classList.remove('filled');
const qNum = sourceZone.dataset.qStart;
sourceZone.innerText = qNum; // Restore the question number
}
updateAllIndicators();
}
// --- MISC HELPERS ---
function startTimer() {
if (timerInterval) clearInterval(timerInterval); // Ensure no multiple intervals
timerInterval = setInterval(() => {
timeInSeconds--;
const minutes = Math.floor(timeInSeconds / 60);
const seconds = timeInSeconds % 60;
timerDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
if (timeInSeconds <= 0) {
clearInterval(timerInterval);
timerDisplay.textContent = "Time's up!";
// checkAnswers(); // Disabled to prevent modal from opening automatically.
}
}, 1000);
timerToggleButton.innerHTML = pauseIcon;
}
function pauseTimer() {
clearInterval(timerInterval);
timerToggleButton.innerHTML = playIcon;
}
function toggleTimer() {
// Check based on the icon currently displayed
if (timerToggleButton.innerHTML.includes('M6 19h4V5H6v14z')) { // Check for pause icon shape
pauseTimer();
} else {
startTimer();
}
}
function resetTimer() {
timeInSeconds = 3600;
updateTimerDisplay();
startTimer();
timerToggleButton.innerHTML = pauseIcon;
}
function setupCheckboxLimits() {
// No checkbox questions in this test
}
function setupExampleHeading() {
// No specific example boxes to set up
}
function initResize(e) {
e.preventDefault();
const startX = e.clientX;
const startWidth = passagePanel.offsetWidth;
const doDrag = (e) => {
const newWidth = startWidth + e.clientX - startX;
if (newWidth > 200 && (document.body.clientWidth - newWidth - resizer.offsetWidth) > 200) {
passagePanel.style.flex = `0 0 ${newWidth}px`;
}
};
const stopDrag = () => {
window.removeEventListener('mousemove', doDrag, false);
window.removeEventListener('mouseup', stopDrag, false);
};
window.addEventListener('mousemove', doDrag, false);
window.addEventListener('mouseup', stopDrag, false);
}
// --- CONTEXT MENU (Highlighting) ---
function initializeContextMenu() {
const panels = [passagePanel, questionsPanel];
let targetElementForClear = null;
// This listener simply tracks the last valid text selection in either panel.
document.addEventListener('selectionchange', () => {
const selection = window.getSelection();
if (selection && !selection.isCollapsed && selection.toString().trim().length > 0) {
const range = selection.getRangeAt(0);
if (panels.some(panel => panel.contains(range.commonAncestorContainer))) {
selectedRange = range;
targetElementForClear = null; // New selection overrides clearing a specific element
}
}
});
const showContextMenu = (e) => {
const target = e.target;
const isClickOnHighlight = target.closest('.highlight, .comment-highlight');
const isSelectionActive = selectedRange && selectedRange.toString().trim().length > 0;
let showMenu = false;
if (isClickOnHighlight) {
document.getElementById('menu-highlight').style.display = 'none';
document.getElementById('menu-note').style.display = 'none';
document.getElementById('menu-clear').style.display = 'block';
document.getElementById('menu-clear-all').style.display = 'block';
contextMenu.targetElementForClear = isClickOnHighlight;
showMenu = true;
} else if (isSelectionActive && panels.some(panel => panel.contains(selectedRange.commonAncestorContainer))) {
document.getElementById('menu-highlight').style.display = 'flex';
document.getElementById('menu-note').style.display = 'flex';
document.getElementById('menu-clear').style.display = 'none';
document.getElementById('menu-clear-all').style.display = 'block'; // Always show clear all
showMenu = true;
}
if (showMenu) {
e.preventDefault();
contextMenu.style.display = 'block';
const menuHeight = contextMenu.offsetHeight;
const menuWidth = contextMenu.offsetWidth;
let left = e.pageX;
let top = e.pageY;
if (left + menuWidth > window.innerWidth) left = window.innerWidth - menuWidth - 5;
if (top + menuHeight > window.innerHeight) top = e.pageY - menuHeight - 5;
else top = e.pageY - menuHeight - 5;
contextMenu.style.left = `${left}px`;
contextMenu.style.top = `${top}px`;
}
};
panels.forEach(panel => {
panel.addEventListener('contextmenu', showContextMenu);
});
document.addEventListener('click', (e) => {
if (contextMenu.style.display === 'block' && !contextMenu.contains(e.target)) {
closeContextMenu();
}
});
}
function closeContextMenu() {
contextMenu.style.display = 'none';
selectedRange = null; // Clear range after menu closes
}
function unwrapElement(element) {
const parent = element.parentNode;
if (!parent) return;
while (element.firstChild) {
parent.insertBefore(element.firstChild, element);
}
parent.removeChild(element);
parent.normalize();
}
window.highlightText = () => {
if (selectedRange && !selectedRange.collapsed) {
const span = document.createElement('span');
span.className = 'highlight';
span.appendChild(selectedRange.extractContents());
selectedRange.insertNode(span);
}
closeContextMenu();
window.getSelection().removeAllRanges();
};
window.addNote = () => {
const note = prompt('Enter your note:');
if (note && selectedRange && !selectedRange.collapsed) {
const span = document.createElement('span');
span.className = 'comment-highlight';
const tooltip = document.createElement('span');
tooltip.className = 'comment-tooltip';
tooltip.textContent = note;
span.appendChild(selectedRange.extractContents());
span.appendChild(tooltip);
selectedRange.insertNode(span);
}
closeContextMenu();
window.getSelection().removeAllRanges();
};
window.clearHighlight = () => {
const elementToClear = contextMenu.targetElementForClear;
if (elementToClear) {
unwrapElement(elementToClear);
}
closeContextMenu();
window.getSelection().removeAllRanges();
};
window.clearAllHighlights = () => {
document.querySelectorAll('.highlight, .comment-highlight').forEach(unwrapElement);
closeContextMenu();
window.getSelection().removeAllRanges();
};
function updateAttemptedCount(part, startQ, endQ) {
let answeredCount = 0;
for (let i = startQ; i <= endQ; i++) {
if (isQuestionAnswered(i)) {
answeredCount++;
}
}
const partHeader = document.querySelector(`.footer__questionNo___3WNct[onclick="switchToPart(${part})"]`);
if (partHeader) {
const countSpan = partHeader.querySelector('.attemptedCount');
if (countSpan) {
countSpan.textContent = `${answeredCount} of ${endQ - startQ + 1}`;
}
}
}
// --- GLOBAL FUNCTION EXPOSURE ---
window.nextQuestion = nextQuestion;
window.previousQuestion = previousQuestion;
window.goToQuestion = goToQuestion;
window.switchToPart = switchToPart;
window.closeResultsModal = closeResultsModal;
window.highlightText = highlightText;
window.addNote = addNote;
window.clearHighlight = clearHighlight;
window.clearAllHighlights = clearAllHighlights;
// --- START THE APP ---
initialize();
});
</script>
</body>
</html>
Bizi English 