Scribd
Upload
31 views76 pages

IELTS Reading Practice Online Test

The document is an HTML template for an IELTS Full Reading Practice web application. It includes various styles for layout, navigation, and interactive elements such as buttons and sliders. The structure is designed to facilitate reading passages and questions, with responsive design considerations for different screen sizes.

Uploaded by

akbarjon160609
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
31 views76 pages

IELTS Reading Practice Online Test

The document is an HTML template for an IELTS Full Reading Practice web application. It includes various styles for layout, navigation, and interactive elements such as buttons and sliders. The structure is designed to facilitate reading passages and questions, with responsive design considerations for different screen sizes.

Uploaded by

akbarjon160609
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>IELTS Full Reading Practice</title>
<style>
*{
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="[Link] 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;
}

.telegram-link {
color: #0088cc;
text-decoration: none;
font-weight: 600;
font-size: 16px;
display: flex;
align-items: center;
gap: 8px;
}

.telegram-link:hover {
text-decoration: underline;
}

.telegram-link::before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml,<svg
xmlns="[Link] viewBox="0 0 24 24"><path d="M9.78
18.65l.28-4.23l7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3L3.64 12c-.88-.25-.89-
1.37.2-1.64l16.56-6.4c.75-.29 1.4.22 1.2.94l-2.67 12.61c-.22.95-1.13 1.18-
1.78.73l-4.5-3.32l-2.23 2.15c-.47.44-1.29.21-1.48-.37z"/></svg>');
mask-image: url('data:image/svg+xml,<svg
xmlns="[Link] viewBox="0 0 24 24"><path d="M9.78
18.65l.28-4.23l7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3L3.64 12c-.88-.25-.89-
1.37.2-1.64l16.56-6.4c.75-.29 1.4.22 1.2.94l-2.67 12.61c-.22.95-1.13 1.18-
1.78.73l-4.5-3.32l-2.23 2.15c-.47.44-1.29.21-1.48-.37z"/></svg>');
background-size: contain;
background-repeat: no-repeat;
}

#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-size: 20px;
font-weight: bold;
margin-bottom: 15px;
text-align: center;
}

.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="[Link] 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);
}

.[Link] {
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);
}

.[Link] {
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__subquestionWrap
per___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;
}

.[Link] {
background-color: #e9ecef;
border-color: #ddd;
}
.[Link] {
background-color: #28a745;
color: white;
border-color: #28a745;
}
.[Link] {
background-color: #dc3545;
color: white;
border-color: #dc3545;
}

.subQuestion:hover {
background-color: #f0f0f0;
border-color: #999;
}

.[Link] {
background-color: #4a90e2;
color: white;
border-color: #4a90e2;
}

.[Link] {
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 */
}
.[Link]-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;
}
.[Link] {
border-color: #28a745;
background-color: #e9f7ef;
}
.[Link] {
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;
}
.[Link] {
opacity: 0.5;
}
.[Link] {
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;
}
.[Link]-over {
background-color: #e6f4ff;
border-color: #4a90e2;
}
.[Link] {
background-color: #e9f7ef;
border-color: #28a745;
border-style: solid;
}
.[Link] {
background-color: #f8d7da;
border-color: #dc3545;
border-style: solid;
}
.[Link] {
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 [Link] {
color: #155724;
font-weight: bold;
}
.question [Link] {
color: #721c24;
}
.question [Link]::before {
content: '✔ ';
color: #28a745;
}
.question [Link]::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);
}
.[Link] .tf-question-line {
background-color: #e9f7ef;
}
.[Link] .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;
}
.[Link] {
background-color: #e9f7ef;
border-color: #28a745 !important;
}
.[Link] {
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;
}
.[Link] {
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;
}
.[Link] {
border-color: #4a90e2;
}
.[Link]-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;
}
.[Link] {
background-color: #e9f7ef;
}
.[Link] {
background-color: #f8d7da;
}
.[Link] {
background-color: #f8d7da;
border-color: #dc3545 !important;
}
.matching-question-item .[Link] {
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;
}
.[Link] {
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;
}
.[Link] {
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, .[Link]-answer-highlight, .multi-
[Link]-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="[Link] 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="[Link] 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="[Link] target="_blank"
class="telegram-link">
Shakhna Academy
</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 <strong>Questions
1-13.</strong></p>
</div>
<div id="part-header-2" class="part-header hidden">
<p><strong>Part 2</strong></p>
<p>Read the text and answer <strong>Questions
14-26.</strong></p>
</div>
<div id="part-header-3" class="part-header hidden">
<p><strong>Part 3</strong></p>
<p>Read the text and answer <strong>Questions
27-40.</strong></p>
</div>
</div>
<div class="panels-container">
<div class="passage-panel" id="passage-panel">
<div id="passage-text-1" class="reading-passage">
<h2 class="text-center">Chocolate for the masses</h2>
<p>For almost three thousand years, chocolate was a drink of the elite and
the wealthy, originally in South America and later on in Europe. In the early 19th
century, however, chocolate became far more widely available, and consumption
shot up dramatically across the populations of Europe in particular.</p>
<p>It was 1828 that marked the beginning of the modern era in chocolate
making and production. Chocolate as a drink had been known for centuries, but in
1628 a Dutch chemist named Van Houten developed a process for the manufacture
of a new kind of powdered chocolate using a hydraulic press. Untreated ‘chocolate
liquor’ — the end result of grinding the cacao beans from which chocolate is
obtained — contains about 53 per cent cacao butter, but this machine removed
nearly half of this, leaving a cake that could be pulverized into a fine powder —
what is now known as ‘cocoa’.</p>
<p>In 1847, the British firm Fry and Sons found a way to mix a blend of
cocoa powder and sugar with melted cacao butter to produce a thin paste which
could be cast into various shapes. This was the world's first true solid chocolate.
Thanks to immediate high demand for this product, the price of cacao butter
escalated, so the new solid chocolate was only accessible for the elite. But this
would eventually change, because of the introduction of cost-cutting methods and
mass production.</p>
<p>By the latter half of the 19th century, many manufacturers had begun
making their own chocolate, and using cocoa powder to hand-coat sugar
confections. Cocoa powder also reached wide use in many other products, like ice
creams and biscuits. Entrepreneurial families like the Frys and Cadburys in Britain
had a social conscience in the midst of all this money-making, unlike many other
19th-century captains of industry. In the Birmingham suburb of Bournville, where
they had established their chocolate factory, the Cadburys created a model town
with adequate housing for their workers, and even dining and reading rooms so
that their employees had no need to spend anything on entertaining
themselves.</p>
<p>However, the rising demand for chocolate also made it a target for
unscrupulous producers and merchants. Sometimes the expensive cacao butter was
completely extracted and replaced with olive or almond oil, or egg yolks.
Alternatively, cheaper materials such as potato starch or flour were added. In 1850,
a health commission was created in Britain for the analysis of foods. Suspicions
about chocolate proved well-founded — most of the samples contained starch
grains from potatoes or other plants. The investigation inspired the British Food
and Drug Act of 1860 and the Adulteration of Food Act of 1872.</p>
<p>The invention of milk chocolate took place in Switzerland, and was a
collaboration between two men. The first was Henri Nestlé, a chemist who in 1867
discovered a process to make powdered milk by evaporation. When mixed with
water, this could be fed to infants and small children. The second man, Daniel
Peter, came up with the idea of using Nestlé’s milk powder in the manufacture of a
new kind of chocolate, and, in 1879, the first milk chocolate bar was
produced.</p>
<p>Also in 1879 another Swiss, Rodolphe Lindt, invented the conche
machine, which vastly improved the quality of chocolate confectionery. Before
Lindt, solid chocolate was usually coarse and gritty. Now, however, it achieved
such a degree of smoothness that Lindt named it ‘fondant’, after the smooth sugar
creams of that name. People on both sides of the Atlantic developed a taste for
fondant chocolate, and the use of the conche machine for solid chocolate became
universal in the business.</p>
<p>In the USA, Milton Hershey dominated the chocolate industry. In
1893, after seeing examples of the machinery used in Europe in action at an
international exhibition in Chicago, he bought some and began turning out
chocolate coatings for the caramels he was already producing. But after a trip to
the chocolate centers of Europe, he sold his caramel business for a million dollars,
bought a farm in Pennsylvania, and built a chocolate factory there.</p>
<p>This became the nucleus of ‘Hershey, the Chocolate Town’, which
contained amongst other things Hershey’s imposing mansion, the Hershey
Department Store and the Hershey Bank. There was, however, no elected mayor or
indeed any democratic system in place. The whole town was in essence Milton
Hershey’s private kingdom, and he ran it as he wanted. This was not the only
Hershey town in existence. During a trip which he made to the island of Cuba in
1915, Hershey was inspired to build a new model town centered round a mill for
grinding sugar. To transport the refined sugar so that it could be shipped by sea to
his chocolate and cocoa factory, Hershey built modern electric railroads too.</p>
<p>To help advertise his products, Hershey employed nutritionists to
proclaim their health qualities, and his chocolate bars and cocoa soon commanded
the American market. Everything was mechanized — a true assembly-line
operation. Hershey’s best-selling bar contained almonds imported from southern
Europe dropped by machines into the waiting molds. Another popular product was
‘Hershey’s Kisses’ — bite-sized, flat-bottomed drops of chocolate, individually
wrapped.</p>
<p>Nowadays so many tourists visit Hershey that the company no longer
offers tours of its factory. Rather, visitors are whisked along on automated carts
through an exhibition called ‘Chocolate World’, where they can see how their
favorite products are produced.</p>
</div>

<div id="passage-text-2" class="reading-passage hidden">


<h2 class="text-center">How to be Happy </h2>
<p style="text-align: center; font-style: italic;">Some recent
developments in the science of happiness</p>

<p><strong>A</strong> Psychiatrist Tony Fernando was walking down


the street when he saw a group of young homeless men sitting on the footpath. As
Fernando handed out gifts of food, he tried to video the men’s reactions in his
mind, recording how their gratitude lifted him in return. ‘I felt warm, content,
meaningful,’ he says. Fernando believes the brain can be trained to make us happy
and that his ‘video method’ is one way to achieve this. In fact, a growing body of
scientific research internationally is showing how we can learn happiness in the
same way we can learn to play the piano. In the soft tissue that forms the brain,
there are approximately ten trillion synapses connecting roughly a hundred billion
neurons. Active synapses become more sensitive, less active synapses die but new
ones grow quickly. This is relatively new thinking — just 30 years ago,
neuroscientists believed that adult brain cells couldn't regenerate. One of the
pioneers in this field is University of Wisconsin professor Richard Davidson. He
studied Buddhist monks using brain scans in his research facility, and found that
those trained in meditation had higher levels of activity in the left prefrontal cortex
— the area associated with happiness. Davidson believes that the trained brain is
physically different from the untrained one.</p>

<p><strong>B</strong> The idea that we can train our brains to find


more happiness has been called ‘mindfulness’ by neuropsychologist Rick Hanson,
author of <em>Hardwiring Happiness</em>. It was in college that Hanson, quite
unintentionally, first recognised the importance of something that would become
his life's work. As an unconfident teenager, he discovered he could turn a small
event — ‘a young woman smiling at me’ — into a good feeling he could hold on
to. To do this, Hanson employs exactly the same imaginary ‘video method’ as
psychiatrist Tony Fernando. ‘The brain takes its shape from what the mind rests
upon,’ says Hanson. If you keep resting your mind on self-criticism and worries,
he argues, your brain will be shaped by that. Hanson explains that resting it on
pleasant feelings and the things you have accomplished means that over time your
brain will take on a different shape, with strength and optimism hardwired into
it.</p>
<p><strong>C</strong> In New Zealand, the Mental Health Foundation
runs mindfulness programmes in 14 schools. Foundation CEO Judi Clements says
‘it's a valuable approach because children are told to pay attention, but aren't told
how to pay attention.’ Preliminary results on the outcomes found that children had
sustained increases in well-being. The Foundation recognises five pathways to
happiness — being active, connecting with others, taking notice, learning and
giving. And, says Clements, ‘We’re detecting a hunger for it from different
organisations and professions as well, so the Foundation is soon going to pilot an
online ‘well-being game’ in several workplaces.’ The project leader is psychologist
Carsten Grimm, who is interested in whether some pathways to happiness are more
effective than others. In a study, Grimm recorded the activities and corresponding
happiness scores of 173 people. What he found was that people who used several
pathways to happiness achieved the best results, suggesting it's better to have a
balance than concentrate on the single pathway you most identify with.</p>

<p><strong>D</strong> However, Associate Professor of Psychological


Medicine Nathan Consedine greets our relentless search for the secrets to
happiness with a tired sigh. ‘The more you chase it, the less you get it,’ he says,
quoting studies showing those who value contentment and well-being are, in fact,
less happy. The big question, he says, is whether there’s any benefit in actively
seeking happiness. He cites a study, for example, which showed that people who
were happier were less inclined to show sympathy. Consedine says that’s probably
because happy people are strongly motivated to stay happy, but engaging
sympathetically with others typically involves engaging with their distress, and
that’s going to reduce their own happiness. Consedine’s not disagreeing with the
theory of mindfulness, but believes there's more work to be done.</p>

<p><strong>E</strong> Some of that work is being conducted at


Auckland University’s Centre for Brain Research. Associate Professor Johanna
Montgomery has been studying Hanson's theory — that altering our brain activity
at a synaptic level affects our behaviour. She accepts that it's a logical explanation
based on studies from animals, but we haven't yet got the technology to prove it
scientifically in humans. It's true that MRI scans certainly do indicate an increased
flow of blood to different areas of the brain which are experiencing positive
stimuli. However, she warns that this is a long way from confirming that the brain
itself is developing or strengthening.</p>

<p><strong>F</strong> Nonetheless, Montgomery believes she is making


progress. In the laboratory, when scientists want to experiment with synaptic
connections, they stimulate the brain with electricity, as this copies the high-
frequency firings that happen normally in the brain every second. Using this
technique, Montgomery has made a number of findings. For example, the
hormones that are released routinely in response to good or bad situations — such
as adrenaline — act to regulate the brain, in the same way that weather has a
regulating effect on human activity more generally. But scientists understand some
of these stimuli better than others. More is known about the impact on brain
activity of prolonged periods of fear than the effects of ‘happiness’ hormones that
are released by positive events in life. This is one potentially important area that
she hopes to investigate further in future.</p>
</div>

<div id="passage-text-3" class="reading-passage hidden">


<h2 class="text-center">Some views on the use of headphones</h2>
<p style="text-align: center; font-style: italic;">
Whether wearing headphones at work, or in other areas of everyday
life, is a good thing or a bad thing has generated a lot of research and opinion
</p>
<p>To visit a typical modern office today is to walk into a room with
possibly a dozen songs playing simultaneously but to hear none of them. Up to half
of younger workers listen to music on their headphones, and nearly all of them
think it makes them better at their jobs. In survey after survey, people report with
confidence that music makes them happier, better at concentrating, and more
productive.</p>
<p>Scientists do not share this belief, they maintain that listening to
music hurts people’s ability to recall other things they should be doing, and any
pop song, loud or soft, reduces overall performance for both extroverts and
introverts. A Taiwanese study linked music that has lyrics to lower marks on
concentration tests for college students, and other research has shown music with
lyrics scrambles our brains’ verbal-processing skills. ‘As silence has the best
overall performance, it would still be advisable that people work in silence,’
another reporter dryly concluded.</p>
<p>The question is therefore: if headphones are so bad for productivity,
why do so many people at work have them? One factor to consider is that countries
like the USA have moved from a farming and manufacturing economy to a service
economy, with an emphasis on jobs in offices that require higher levels of
concentration, reflection and creativity. As an estimated 70 percent of office
workers work in open-plan office spaces, it is more important to create one’s own
enclosing bubble of sound. Lending strength to the argument for headphones at
work is evidence that music relaxes our muscles, improves our mood, and may
even moderately reduce blood pressure, heart rate and anxiety.</p>
<p>The story of headphones began in 1910, when the US Navy received
an odd letter written in purple ink on blue-and-pink paper. The letter writer, an
eccentric inventor and repairman named Nathaniel Baldwin, from the USA state of
Utah, made what at the time was an astonishing claim: he had built, in his kitchen,
a new kind of headset that could amplify sound. This was an opportune invention
for the Navy, who asked for a sound test and then enthusiastically adopted the
headsets, later called headphones, and used them in World War I for naval radio
communication.</p>
<p>The purpose of headphones is to concentrate a quiet and private sound
in the ear of the listener, which is a radical departure from music’s social purpose
in history. ‘Music, together with dance, co-evolved biologically and culturally to
serve as a technology of social bonding,’ Nills L Wallin and Bjorn Merker wrote in
The Origins of Music. Songs don’t leave behind fossils, but evidence of musical
notation dates back to Sumeria, 3,500 years ago, and in 1995 archeologists
discovered a bone flute in southern Europe estimated to be 44,000 years old. If
music evolved as a social glue for the species, as a way to make groups and keep
them together, headphones have done what writing and literacy did for language –
they made music private.</p>
<p>Author and columnist Stephen Marche wrote that separation from
other people is one of the first things ordinary Americans spend their money
achieving. It is ‘a by-product of a long-standing national appetite for
independence,’ he said. Americans are not alone in their desire for personal
independence and privacy. Marche is right; wealth can buy – and modern
technology can deliver – personal independence, and it is this that people have
always sought.</p>
<p>Dr Michael Bull, an expert on personal music devices from the
University of Sussex in the UK, has repeatedly made the larger point that personal
music devices change how we relate to public spaces. Controlling our public
spaces is more important now that more people are moving from the edges of cities
to live in urban centers. ‘With the urban space, the more it’s inhabited, the safer
you feel,’ Bull says. ‘You feel safe if you can feel people there, but you don’t want
to interact with them.’ Headphones create shields for wearers, separating them
from other people and their surroundings. Headphones have their own rules of
good manners; they are like wearing a ‘Do not disturb’ sign. We assume that
people wearing them are busy and we should respect their privacy, so now people
wear them to appear busy. In fact, it is now becoming quite common for people not
to listen to anything at all, but just to wear headphones.</p>
<p>However, as pointed out at the beginning of this piece, although
scientists have stated that headphones are bad for productivity, people still wear
them at work. It is not just that headphones create privacy out of public areas, but
also that music causes people to relax and reflect and pause. The outcome of
relaxation, reflection and pausing at work won’t be captured in minute-to-minute
productivity metrics. What must be considered is that in moments of extreme
focus, our attention radiates outward, toward the problem, rather than inward, on
how to solve the problem. However, with music ‘When our minds are at ease,
we’re more likely to direct the spotlight of attention inward,’ Jonah Lehrer wrote in
his book Imagine: How Creativity Works. ‘The answers have been there all along.
We just weren’t listening.’ In a crowded world, real estate is the ultimate scarce
resource, and a headphone is a small invisible fence around our minds – making
space, creating separation, and helping us listen to ourselves.</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">

<!-- Questions 1–6: True / False / Not Given -->


<div class="question" data-q-start="1" data-q-end="6">
<div class="question-prompt">
<p><strong>Questions 1–6</strong>: True, False, Not Given</p>
<p>Do the following statements agree with the information given
in the passage?</p>
<p>Write:</p>
<ul>
<li><strong>TRUE</strong> – if the statement agrees with the
information</li>
<li><strong>FALSE</strong> – if the statement contradicts the
information</li>
<li><strong>NOT GIVEN</strong> – if there is no information
on this</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">Chocolate was consumed by
greater numbers of people in the nineteenth century than in previous
times.</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">Fry's chocolate became more
affordable because of the fall in price of one ingredient.</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">Entrepreneurial British
chocolate manufacturers paid their employees well.</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">Customers were made ill
through the practices of unscrupulous chocolate producers.</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">Fresh milk was used in the
production of milk chocolate in Switzerland.</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">Lindt's conche machine was
adopted by other manufacturers.</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>

<!-- Questions 7–13: Notes Completion -->


<div class="question" data-q-start="7" data-q-end="13">
<div class="question-prompt">
<p><strong>Questions 7–13</strong>: Notes Completion</p>
<p>Complete the notes below using <strong>ONE WORD
ONLY</strong> from the passage.</p>
<div style="text-align: center;"><strong>Milton Hershey and the
chocolate industry</strong></div>
<ul>
<li>Hershey bought some <input type="text" class="answer-
input" id="q7" placeholder="7"></li>
<li>After selling his caramel business, Hershey purchased a
<input type="text" class="answer-input" id="q8" placeholder="8"></li>
<li>The inhabitants of Hershey could not vote for a <input
type="text" class="answer-input" id="q9" placeholder="9"></li>
<li>Hershey set up a new town in Cuba around a mill.</li>
<li>Hershey constructed <input type="text" class="answer-
input" id="q10" placeholder="10"> to transport material</li>
<li>Hershey brought in <input type="text" class="answer-
input" id="q11" placeholder="11"> to improve the image of his chocolate.</li>
<li>One popular chocolate product had <input type="text"
class="answer-input" id="q12" placeholder="12"> added to it.</li>
<li>Because of the large demand, tourists can only visit the
<input type="text" class="answer-input" id="q13" placeholder="13"> at
Hershey.</li>
</ul>
</div>
</div>
</div>
</div>
<div id="questions-2" class="question-set hidden">
<div class="questions-container">

<!-- Paragraph Matching -->


<div class="question" data-q-start="14" data-q-end="17">
<div class="question-prompt">
<p><strong>Questions <b>14</b> – <b>17</b></strong><br>
Reading Passage 2 has six paragraphs, A–F.<br>
Which paragraph contains the following information?<br>
Write the correct letter, <b>A–F</b>, in boxes <b>14–17</b> on
your answer sheet.<br>
<span style="font-weight: normal;">NB You may use any letter
more than once.</span></p>
</div>
<div class="paragraph-matching-questions">
<div class="paragraph-matching-question" style="display: flex;
align-items: center; margin-bottom: 15px;">
<input type="text" class="answer-input" id="q14"
placeholder="14" style="width: 60px; margin-right: 15px;">
<span>a reference to a fact that two scientists use the same
technique to promote their own happiness</span>
</div>
<div class="paragraph-matching-question" style="display: flex;
align-items: center; margin-bottom: 15px;">
<input type="text" class="answer-input" id="q15"
placeholder="15" style="width: 60px; margin-right: 15px;">
<span>the suggestion that scientific opinion about an aspect of
brain function has changed over a given time period</span>
</div>
<div class="paragraph-matching-question" style="display: flex;
align-items: center; margin-bottom: 15px;">
<input type="text" class="answer-input" id="q16"
placeholder="16" style="width: 60px; margin-right: 15px;">
<span>an estimate of how numerous some brain components
are</span>
</div>
<div class="paragraph-matching-question" style="display: flex;
align-items: center; margin-bottom: 15px;">
<input type="text" class="answer-input" id="q17"
placeholder="17" style="width: 60px; margin-right: 15px;">
<span>the reason why some educational courses were set
up</span>
</div>
</div>
</div>

<!-- People Matching -->


<div class="question" data-q-start="18" data-q-end="21">
<div class="question-prompt">
<p><strong>Questions <b>18</b> – <b>21</b></strong><br>
Look at the following statements (Questions 18–21) and the list of
people below.<br>
Match each statement with the correct person, <b>A–F</b>.<br>
Write the correct letter, <b>A–F</b>, in boxes <b>18–21</b> on
your answer sheet.</p>
</div>
<div class="paragraph-matching-questions">
<div class="paragraph-matching-question" style="display: flex;
align-items: center; margin-bottom: 15px;">
<input type="text" class="answer-input" id="q18"
placeholder="18" style="width: 60px; margin-right: 15px;">
<span>It's better to look for a variety of ways to increase
happiness than focus on just one.</span>
</div>
<div class="paragraph-matching-question" style="display: flex;
align-items: center; margin-bottom: 15px;">
<input type="text" class="answer-input" id="q19"
placeholder="19" style="width: 60px; margin-right: 15px;">
<span>Focusing on personal achievements rather than negative
experiences will make people happier.</span>
</div>
<div class="paragraph-matching-question" style="display: flex;
align-items: center; margin-bottom: 15px;">
<input type="text" class="answer-input" id="q20"
placeholder="20" style="width: 60px; margin-right: 15px;">
<span>Happy people might have a reason not to display one
favourable characteristic.</span>
</div>
<div class="paragraph-matching-question" style="display: flex;
align-items: center; margin-bottom: 15px;">
<input type="text" class="answer-input" id="q21"
placeholder="21" style="width: 60px; margin-right: 15px;">
<span>A range of groups are becoming more interested in
learning techniques to improve happiness.</span>
</div>
</div>
<div style="margin-top: 10px;">
<p><b>List of People</b></p>
<ul style="list-style: none; padding-left: 0;">
<li><b>A</b> Tony Fernando</li>
<li><b>B</b> Richard Davidson</li>
<li><b>C</b> Rick Hanson</li>
<li><b>D</b> Judi Clements</li>
<li><b>E</b> Carsten Grimm</li>
<li><b>F</b> Nathan Consedine</li>
</ul>
</div>
</div>

<!-- Summary Completion -->


<div class="question" data-q-start="22" data-q-end="26">
<div class="question-prompt">
<p><strong>Questions <b>22</b> – <b>26</b></strong><br>
Complete the summary below.<br>
Choose <b>ONE WORD ONLY</b> from the passage for each
answer.<br>
Write your answers in boxes <b>22–26</b> on your answer sheet.</p>
</div>
<ul style="list-style: none; padding-left: 0;">
<li><b>22</b> Auckland University’s Centre for Brain Research says
that current research into brain activity and behaviour only relates to <input
type="text" class="answer-input" id="q22" placeholder="22"> so Hanson's
theories have not been proved correct.</li>
<li><b>23</b> While scans do show that positive stimuli result in
more <input type="text" class="answer-input" id="q23" placeholder="23">
reaching parts of the brain, this isn't proof that the brain is getting stronger.</li>
<li><b>24</b> In laboratory experiments, scientists use <input
type="text" class="answer-input" id="q24" placeholder="24"> to initiate brain
activity, because it's similar to natural processes.</li>
<li><b>25</b> One finding is that hormones can be compared to the
<input type="text" class="answer-input" id="q25" placeholder="25"> because
both can change human behaviour.</li>
<li><b>26</b> Scientists understand some stimuli, such as <input
type="text" class="answer-input" id="q26" placeholder="26">, better than they
understand more positive stimuli.</li>
</ul>
</div>

</div>
</div>
<div id="questions-3" class="question-set hidden">
<div class="questions-container">

<!-- Questions 27–31 -->


<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 claims of the writer in Reading Passage 3?<br>
In boxes <b>27–31</b> on your answer sheet, write:</p>
<ul style="list-style: none; padding-left: 0;">
<li><b>YES</b> – if the statement agrees with the claims of
the writer</li>
<li><b>NO</b> – if the statement contradicts the claims of the
writer</li>
<li><b>NOT GIVEN</b> – if it is impossible to say what the
writer thinks about this</li>
</ul>
</div>

<div class="tf-question">
<div class="tf-question-line"><span class="tf-question-
number">27</span> Young people are easily persuaded by surveys that listening
to music is beneficial</div>
<div class="tf-options">
<label><input type="radio" name="q27" value="YES">
YES</label>
<label><input type="radio" name="q27" value="NO">
NO</label>
<label><input type="radio" name="q27" value="NOT
GIVEN"> NOT GIVEN</label>
</div>
</div>

<div class="tf-question">
<div class="tf-question-line"><span class="tf-question-
number">28</span> Different studies share the same conclusions about the
desirability of working in silence</div>
<div class="tf-options">
<label><input type="radio" name="q28" value="YES">
YES</label>
<label><input type="radio" name="q28" value="NO">
NO</label>
<label><input type="radio" name="q28" value="NOT
GIVEN"> NOT GIVEN</label>
</div>
</div>
<div class="tf-question">
<div class="tf-question-line"><span class="tf-question-
number">29</span> Some doctors recommend wearing headphones to lower
blood pressure</div>
<div class="tf-options">
<label><input type="radio" name="q29" value="YES">
YES</label>
<label><input type="radio" name="q29" value="NO">
NO</label>
<label><input type="radio" name="q29" value="NOT
GIVEN"> NOT GIVEN</label>
</div>
</div>

<div class="tf-question">
<div class="tf-question-line"><span class="tf-question-
number">30</span> Nathaniel Baldwin was a respected government
researcher</div>
<div class="tf-options">
<label><input type="radio" name="q30" value="YES">
YES</label>
<label><input type="radio" name="q30" value="NO">
NO</label>
<label><input type="radio" name="q30" value="NOT
GIVEN"> NOT GIVEN</label>
</div>
</div>

<div class="tf-question">
<div class="tf-question-line"><span class="tf-question-
number">31</span> The effect of the invention of headphones is comparable to
the effect of the invention of the writing</div>
<div class="tf-options">
<label><input type="radio" name="q31" value="YES">
YES</label>
<label><input type="radio" name="q31" value="NO">
NO</label>
<label><input type="radio" name="q31" value="NOT
GIVEN"> NOT GIVEN</label>
</div>
</div>
</div>

<!-- Questions 32–36 -->


<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, <b>A</b>, <b>B</b>, <b>C</b> or <b>D</b>.<br>Write the correct letter
in boxes <b>32–36</b> on your answer sheet.</p>
</div>

<div class="multi-choice-question">
<p><b>32.</b> What does the writer suggest about a service economy?
</p>
<div class="multi-choice-options">
<label><input type="radio" name="q32" value="A"> A The work is
mentally demanding</label><br>
<label><input type="radio" name="q32" value="B"> B It provides
employment for younger workers</label><br>
<label><input type="radio" name="q32" value="C"> C It is a small
part of a country’s economy</label><br>
<label><input type="radio" name="q32" value="D"> D Workers have
to live in urban centres</label>
</div>
</div>

<div class="multi-choice-question">
<p><b>33.</b> When the writer mentions the historical evidence for
early music he is</p>
<div class="multi-choice-options">
<label><input type="radio" name="q33" value="A"> A emphasizing
the diversity of musical forms</label><br>
<label><input type="radio" name="q33" value="B"> B expressing his
frustration with the limited archaeological evidence uncovered</label><br>
<label><input type="radio" name="q33" value="C"> C lending support
to the view that music has been important in human history</label><br>
<label><input type="radio" name="q33" value="D"> D creating a
geographical map of the evolution of music</label>
</div>
</div>

<div class="multi-choice-question">
<p><b>34.</b> What does the writer say about the social effects of
listening to music through headphones?</p>
<div class="multi-choice-options">
<label><input type="radio" name="q34" value="A"> A It has caused a
reduction in the number of people who listen to music</label><br>
<label><input type="radio" name="q34" value="B"> B It has increased
people’s participation in music events</label><br>
<label><input type="radio" name="q34" value="C"> C It has reduced
the global variation of music styles</label><br>
<label><input type="radio" name="q34" value="D"> D It has changed
the traditional role of music in society</label>
</div>
</div>

<div class="multi-choice-question">
<p><b>35.</b> What does the writer say about personal independence?
</p>
<div class="multi-choice-options">
<label><input type="radio" name="q35" value="A"> A Americans are
unique in their desire for personal independence</label><br>
<label><input type="radio" name="q35" value="B"> B Personal
independence is something that can be purchased</label><br>
<label><input type="radio" name="q35" value="C"> C Striving for
personal independence is a recent phenomenon</label><br>
<label><input type="radio" name="q35" value="D"> D Personal
independence destroys social connections</label>
</div>
</div>

<div class="multi-choice-question">
<p><b>36.</b> Why does the writer quote Jonah Lehrer in the last
paragraph?</p>
<div class="multi-choice-options">
<label><input type="radio" name="q36" value="A"> A to support the
writer’s own view</label><br>
<label><input type="radio" name="q36" value="B"> B to draw
attention to an authoritative book about music</label><br>
<label><input type="radio" name="q36" value="C"> C to raise
awareness of people’s loss of listening skills</label><br>
<label><input type="radio" name="q36" value="D"> D to illustrate
how music brings people closer to each other</label>
</div>
</div>

</div>

<!-- Questions 37–40 -->


<div class="question" data-q-start="37" data-q-end="40">
<div class="question-prompt">
<p><strong>Questions 37–40</strong><br>Complete the
summary using the list of words, <b>A–I</b>, below.<br>Write the correct letter
in boxes <b>37–40</b> on your answer sheet.</p>
<p><b>Headphones and city living</b></p>
<p>Dr Michael Bull believes that listening to music through
headphones has changed the <input type="text" class="answer-input" id="q37"
placeholder="37" style="width: 60px; display: inline-block;"> the wearers of
headphones have with public spaces. Living in the centre of cities is becoming
popular, as people become less keen on living in the <input type="text"
class="answer-input" id="q38" placeholder="38" style="width: 60px; display:
inline-block;">. In densely populated city centres, headphones form <input
type="text" class="answer-input" id="q39" placeholder="39" style="width: 60px;
display: inline-block;"> that isolate people from fellow citizens and from their
environment. Wearers of headphones are treated with <input type="text"
class="answer-input" id="q40" placeholder="40" style="width: 60px; display:
inline-block;"> that other people do not receive.</p>
<p><b>Word List:</b> A courtesy &nbsp;&nbsp;B relationship
&nbsp;&nbsp;C difficulty &nbsp;&nbsp;D countryside &nbsp;&nbsp;E suburbs
&nbsp;&nbsp;F language &nbsp;&nbsp;G barriers &nbsp;&nbsp;H obstacles
&nbsp;&nbsp;I disapproval</p>
</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 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 selected 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()">&times;</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>
[Link]('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 = [Link]('.timer-display');
const timerToggleButton = [Link]('timer-toggle-
btn');
const timerResetButton = [Link]('timer-reset-btn');
const deliverButton = [Link]('deliver-button');
const resizer = [Link]('resizer');
const passagePanel = [Link]('passage-panel');
const questionsPanel = [Link]('questions-panel');
const contextMenu = [Link]('contextMenu');

// --- ICON SVGs ---


const playIcon = '<svg xmlns="[Link]
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="[Link]
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':'TRUE','2':'FALSE','3':'NOT
GIVEN','4':'NOT GIVEN','5':'FALSE','6':'TRUE',
'7':'machinery','8':'farm','9':'mayor','10':'railroads','11':'nutritionists','12':'almo
nds','13':'exhibitions',
'14':'A','15':'B','16':'C','17':'C','18':'E','19':'C','20':'F',
'21':'D','22':'animals','23':'blood','24':'electricity','25':'weather','26':'fear',
'27':'NO','28':'YES','29':'NOT
GIVEN','30':'NO','31':'YES','32':'A','33':'C','34':'D','35':'B','36':'A',
'37':'B','38':'E','39':'G','40':'A' };

// --- INITIALIZATION ---


function initialize() {
startTimer();
initializeDragAndDrop();
setupCheckboxLimits();
setupExampleHeading();
switchToPart(1); // Also calls goToQuestion(1) and
updateNavigation

[Link]('input', updateAllIndicators);
[Link]('change', updateAllIndicators);
[Link]('click', checkAnswers);
[Link]('click', toggleTimer);
[Link]('click', resetTimer);

// Add click listeners to question containers for navigation


[Link]('[data-q-start]').forEach(el => {
[Link]('click', () => {
const qNum = parseInt([Link], 10);
if (currentQuestion !== qNum) {
goToQuestion(qNum);
}
});
});
[Link]('mousedown', initResize, false);
initializeContextMenu();
}

// --- CORE TEST LOGIC ---

function checkAnswers() {
// Disable all inputs to prevent changes
const allInputs = [Link]('input, select, textarea');
[Link](input => {
[Link] = true;
});

// Disable submit button


[Link] = true;
[Link] = 'not-allowed';

clearInterval(timerInterval);
let score = 0;
const totalQuestions = 40;
const resultsDetailsContainer = [Link]('results-
details');
[Link] = '';

[Link]('.correct, .incorrect, .correct-answer-


highlight').forEach(el => {
[Link]('correct', 'incorrect', 'correct-answer-
highlight');
});
[Link]('.correct-answer-display').forEach(el =>
[Link]());

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 = [Link](correctAnswer) ?
[Link](' / ') : correctAnswer;

const textInput = [Link](`q${i}`);


const radioGroup = [Link](`input[name="q$
{i}"][type="radio"]`);
// Handle Text and Select Inputs
if (textInput && ([Link] === 'INPUT' ||
[Link] === 'SELECT')) {
const element = [Link]('.matching-form-row') ||
textInput;
userAnswer = [Link]();
userAnswerDisplay = userAnswer || 'Not Answered';

if ([Link] === 'SELECT') {


isCorrect = userAnswer === correctAnswer;
} else {
isCorrect = [Link](correctAnswer) ?
[Link](ans => [Link]()
=== [Link]()) :
[Link]() ===
[Link]();
}

if (isCorrect) {
score++;
[Link]('correct');
} else {
[Link]('incorrect');
const correctAnswerSpan = [Link]('span');
[Link] = 'correct-answer-display';
[Link] = `&nbsp;➜&nbsp;<span
class="correct-answer-highlight">${correctAnswerText}</span>`;
[Link](correctAnswerSpan,
[Link]);
}
}
// Handle Radio Button Inputs (T/F, MCQs)
else if ([Link] > 0) {
const questionContainer = radioGroup[0].closest('.tf-question') ||
radioGroup[0].closest('.multi-choice-question');
const checkedRadio =
[Link](`input[name="q${i}"]:checked`);

if (checkedRadio) {
userAnswer = [Link];
userAnswerDisplay = userAnswer;
isCorrect = userAnswer === correctAnswer;
const userLabel = [Link]('.tf-option, .multi-
choice-option');
if (userLabel) {
[Link](isCorrect ? 'correct' : 'incorrect');
}
}

if (isCorrect) {
score++;
} else {
if (questionContainer){
const correctOptionEl =
[Link](`input[value="${correctAnswerText}"]`);
if (correctOptionEl) {
const correctLabel = [Link]('.tf-
option, .multi-choice-option');
if (correctLabel) {
[Link]('correct-answer-highlight');
}
}
}
}
}
// Handle Checkbox Groups (e.g., questions 21-22)
else if (i === 21 || i === 22) {
// For questions 21-22, check if the user selected the correct
combination
const checkedBoxes =
[Link]('input[name="q21-22"]:checked');
const userAnswers = [Link](checkedBoxes).map(cb =>
[Link]).sort();
const correctAnswers21_22 = ['B', 'D']; // The correct answers
for questions 21-22

if (i === 21) {
// Only check once for the pair
userAnswerDisplay = [Link] > 0 ?
[Link](', ') : 'Not Answered';
isCorrect = [Link] === 2 &&
[Link](ans =>
correctAnswers21_22.includes(ans)) &&
correctAnswers21_22.every(ans =>
[Link](ans));

if (isCorrect) {
score += 2; // Both questions are correct
// Mark both questions as correct in nav
const nav21 =
[Link](`.subQuestion[onclick="goToQuestion(21)"]`);
const nav22 =
[Link](`.subQuestion[onclick="goToQuestion(22)"]`);
if (nav21) [Link]('correct');
if (nav22) [Link]('correct');
} else {
// Mark both as incorrect in nav
const nav21 =
[Link](`.subQuestion[onclick="goToQuestion(21)"]`);
const nav22 =
[Link](`.subQuestion[onclick="goToQuestion(22)"]`);
if (nav21) [Link]('incorrect');
if (nav22) [Link]('incorrect');
}

// Visual feedback on checkboxes


[Link](cb => {
const option = [Link]('.multi-choice-option');
if (correctAnswers21_22.includes([Link])) {
[Link]('correct');
} else {
[Link]('incorrect');
}
});

// Show correct answers if user got it wrong


if (!isCorrect) {
correctAnswers21_22.forEach(correctVal => {
const correctCheckbox =
[Link](`input[name="q21-22"][value="${correctVal}"]`);
if (correctCheckbox && ![Link]) {
[Link]('.multi-choice-
option').[Link]('correct-answer-highlight');
}
});
}
} else if (i === 22) {
// Skip individual processing for question 22 since it's handled
with 21
userAnswerDisplay = 'See Q21';
const nav21 =
[Link](`.subQuestion[onclick="goToQuestion(21)"]`);
isCorrect = nav21 && [Link]('correct');
continue; // Skip the rest of processing for Q22
}
}

// 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>`;
[Link] += resultRow;

// Update nav button color


const navButton =
[Link](`.subQuestion[onclick="goToQuestion(${i})"]`);
if (navButton) {
[Link]('answered', 'active');
[Link](isCorrect ? 'correct' : 'incorrect');
}
}

[Link]('results-score').textContent = score;
[Link]('results-band').textContent =
calculateBandScore(score);
[Link]('results-
modal').[Link]('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 = [Link](`q${qNum}`);
const radioInput = [Link](`input[name="q$
{qNum}"]:checked`);
const dropZone = [Link](`.drop-zone[data-q-
start="${qNum}"]`);

if (textInput) { // Handles <input type="text"> and <select>


return { value: [Link], text: [Link] || 'N/A' };
}
if (radioInput) {
return { value: [Link], text: [Link] };
}
if (dropZone) {
const droppedItem = [Link]('.drag-item');
return {
value: droppedItem ? [Link] : null,
text: droppedItem ? [Link]() : 'N/A'
};
}
return { value: null, text: 'N/A' };
}

function displayCorrectAnswer(qNum, correctAnswer) {


// Handle multi-choice group questions (e.g., 38-40)
if (qNum >= 38 && qNum <= 40) {
const correctAnswersArr = [Link](correctAnswer) ?
correctAnswer : [correctAnswer];
[Link](ansValue => {
const correctInput =
[Link](`input[name="q38-40"][value="${ansValue}"]`);
correctInput?.closest('.multi-choice-
option')?.[Link]('correct-answer-highlight');
});
return;
}

// Handle radio button questions by highlighting the correct label


const correctRadioInput = [Link](`input[name="q$
{qNum}"][value="${correctAnswer}"]`);
if (correctRadioInput) {
const parentOption = [Link]('.tf-option, .multi-
choice-option');
if (parentOption) {
[Link]('correct-answer-highlight');
return;
}
}

// Handle text inputs, select dropdowns, and others by showing the


answer next to them
const inputEl = [Link](`q${qNum}`);
if (inputEl) {
const displaySpan = [Link]('span');
[Link] = 'correct-answer-display';
[Link] = ` ✓ ${correctAnswer}`;
[Link]('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 = [Link]('span');
[Link] = 'correct-answer-display';
[Link] = ` ✓ ${correctAnswer}`;
const itemContainer = [Link]('.tf-question-text');
if (itemContainer) {
[Link](displaySpan);
} else {
[Link](displaySpan);
}
}
}

function findQuestionElement(qNum) {
return [Link](`[data-q-start="${qNum}"]`);
}

function addResultToModal(qNum, userAnswer, correctAnswer,


isCorrect) {
const resultsDetails = [Link]('results-details');
const row = [Link]('div');
[Link] = 'result-row';
if (!isCorrect) {
[Link]('incorrect');
}
[Link] = `
<span class="q-num">${qNum}</span>
<span class="user-ans">${userAnswer}</span>
<span class="correct-ans">${correctAnswer}</span>
`;
[Link](row);
}

function showResultsModal() {
[Link]('results-
modal').[Link]('hidden');
}

[Link] = function() {
[Link]('results-modal').[Link]('hidden');
}

function disableInputs() {
[Link] = `<span>Checked! View
Results.</span>`;
[Link]('click', checkAnswers);
[Link] = showResultsModal;

[Link]('input, select').forEach(el => {


[Link] = true;
if ([Link]('input[type=radio], input[type=checkbox]')) {
[Link] = 'not-allowed';
[Link] = 'not-allowed';
}
});
[Link]('.drag-item').forEach(el => {
[Link]('draggable', 'false');
[Link] = 'default';
});
[Link]('.drop-zone').forEach(el => {
[Link]('disabled');
});
}

function checkValue(userValue, correctValue) {


if (userValue === null || userValue === undefined) return false;
const formattedUserValue = [Link]().toLowerCase();
if ([Link](correctValue)) {
return [Link](v =>
[Link]()).includes(formattedUserValue);
} else {
return formattedUserValue ===
String(correctValue).toLowerCase();
}
}

function markQuestion(qNum, isCorrect) {


const subQuestionBtn =
[Link](`.subQuestion[onclick="goToQuestion(${qNum})"]`);
subQuestionBtn?.[Link](isCorrect ? 'correct' : 'incorrect');

const elementsToMark = [
[Link](`.tf-question[data-q-start="${qNum}"]`),
[Link](`.multi-choice-question[data-q-start="$
{qNum}"]`),
[Link](`.matching-question-item[data-q-start="$
{qNum}"]`),
[Link](`.drop-zone[data-q-start="${qNum}"]`),
[Link](`q${qNum}`),
[Link](`input[name="q$
{qNum}"]:checked`)?.closest('.tf-option'),
[Link](`input[name="q$
{qNum}"]:checked`)?.closest('.multi-choice-option')
];

[Link](el => {
if (el) [Link](isCorrect ? 'correct' : 'incorrect');
});

if (qNum === 14 || qNum === 15) {


const multiChoiceContainer = [Link]('.multi-
choice-question[data-q-start="14"]');
if (multiChoiceContainer)
[Link](isCorrect ? 'correct' : 'incorrect');
} else if (qNum >= 1 && qNum <= 5) {
const pMatchInput = [Link](`q${qNum}`);
if (pMatchInput) [Link](isCorrect ? 'correct' :
'incorrect');
} else if (qNum >= 38 && qNum <= 40) {
// For this group, individual options are marked, not the container.
}
}

function switchToPart(partNumber, goToQ = null) {


currentPassage = partNumber;
// Hide all passages and questions
[Link]('.reading-passage, .question-set, .part-
header').forEach(el => {
[Link]('hidden');
});

// Show the correct passage, questions, and header


[Link](`passage-text-$
{partNumber}`).[Link]('hidden');
[Link](`questions-$
{partNumber}`).[Link]('hidden');
[Link](`part-header-$
{partNumber}`).[Link]('hidden');

// Update bottom navigation 'selected' state


[Link]('.footer__questionWrapper___1tZ46').fo
rEach((wrapper, index) => {
[Link]('selected', (index + 1) === partNumber);
});

// Go to the specified question or the first question of the part


const firstQuestionOfPart = {1: 1, 2: 14, 3: 27}[partNumber];
goToQuestion(goToQ !== null ? goToQ : firstQuestionOfPart);
}

function goToQuestion(questionNumber) {
// Prevent unnecessary recursion: if already at the right passage and
question, do nothing
if (currentQuestion === questionNumber) {
let passageNumber = 1;
if (questionNumber >= 14 && questionNumber <= 26)
passageNumber = 2;
else if (questionNumber >= 27) passageNumber = 3;
if (currentPassage === passageNumber) {
return;
}
}

currentQuestion = questionNumber;

let passageNumber = 1;
if (questionNumber >= 14 && questionNumber <= 26)
passageNumber = 2;
else if (questionNumber >= 27) passageNumber = 3;
if (currentPassage !== passageNumber) {
switchToPart(passageNumber, questionNumber);
return;
}

if (activeQuestionElement) {
[Link]('active-question', 'active-
input');
}

let targetEl = [Link](`[data-q-start="$


{questionNumber}"]`);

if (targetEl) {
activeQuestionElement = targetEl;
if ([Link]('input[type="text"]') ||
[Link]('select')) {
[Link]('active-input');
} else {
[Link]('active-question');
}
scrollIntoViewIfNeeded(targetEl);
} else {
const pMatch = [Link](`.paragraph-matching-
question select[id="q${questionNumber}"]`);
if(pMatch) {
activeQuestionElement = pMatch;
[Link]('active-input');
scrollIntoViewIfNeeded(pMatch);
}
}

updateNavigation();
}

// --- UI & NAVIGATION ---

function updateNavigation() {
const navButtons = [Link]('.subQuestion');
[Link](btn => [Link]('active'));
const activeNav =
[Link](`.subQuestion[onclick="goToQuestion($
{currentQuestion})"]`);
if (activeNav) {
[Link]('active');
}

const inputs = [Link]('.answer-input, .drop-


[Link], .[Link]');
[Link](input => [Link]('active-input'));

const activeInput = [Link](`q$


{currentQuestion}`);
if (activeInput) {
[Link]('active-input');
if (typeof [Link] === 'function') {
[Link]();
}
} else {
const activeQuestionBlock = [Link](`[data-q-
start="${currentQuestion}"]`);
if (activeQuestionBlock) {
const firstInput = [Link]('input,
select');
if(firstInput) {
[Link]('active-input');
if (typeof [Link] === 'function') {
[Link]();
}
}
}
}
}

function selectDragItem(item) {
if (selectedDragItem) {
[Link]('selected');
}
selectedDragItem = item;
if (selectedDragItem) {
[Link]('selected');
}
}

[Link] = () => currentQuestion < 40 &&


goToQuestion(currentQuestion + 1);
[Link] = () => currentQuestion > 1 &&
goToQuestion(currentQuestion - 1);
function updateAllIndicators() {
updateAttemptedCount(1, 1, 13);
updateAttemptedCount(2, 14, 26);
updateAttemptedCount(3, 27, 40);
updateAnsweredNav();
}

function updateAnsweredNav() {
const navButtons = [Link]('.subQuestion');
[Link](btn => {
const qNum = parseInt([Link], 10);
if (isQuestionAnswered(qNum)) {
[Link]('answered');
} else {
[Link]('answered');
}
});
}

function isQuestionAnswered(qNum) {
// Special handling for questions 21-22 checkbox group
if (qNum === 21 || qNum === 22) {
const checkedBoxes =
[Link]('input[name="q21-22"]:checked');
return [Link] > 0;
}

const textInput = [Link](`q${qNum}`);


if (textInput && ([Link]() !== '' ||
([Link]('drop-zone') && [Link] > 0))) {
return true;
}
const radio = [Link](`input[name="q$
{qNum}"]:checked`);
if (radio) {
return true;
}
const checkbox = [Link](`input[name="q$
{qNum}"]:checked`);
if (checkbox) {
return true;
}
return false;
}
function scrollIntoViewIfNeeded(element) {
const panel = [Link]('.questions-panel, .passage-panel');
const panelRect = [Link]();
const elementRect = [Link]();
if ([Link] < [Link] || [Link] >
[Link]) {
[Link]({ behavior: 'smooth', block: 'center' });
}
}

// --- DRAG AND DROP ---

function initializeDragAndDrop() {
[Link]('.drag-item').forEach(item => {
[Link]('dragstart', handleDragStart);
[Link]('dragend', handleDragEnd);
[Link]('click', () => selectDragItem(item));
});
[Link]('.drop-zone, .drag-options-
container').forEach(zone => {
[Link]('dragover', handleDragOver);
[Link]('dragleave', handleDragLeave);
[Link]('drop', handleDrop);
});
}

function handleDragStart(e) {
draggedItem = [Link];
setTimeout(() => [Link]('dragging'), 0);
}

function handleDragEnd(e) {
[Link]('dragging');
draggedItem = null;
}

function handleDragOver(e) {
[Link]();
const targetZone = [Link];
if (draggedItem && [Link] ===
[Link]) {
[Link]('drag-over');
}
}
function handleDragLeave(e) {
[Link]('drag-over');
}

function handleDrop(e) {
[Link]();
const targetZone = [Link];
[Link]('drag-over');

if (!draggedItem || [Link] !==


[Link]) {
return;
}

const sourceZone = [Link];


if (sourceZone === targetZone) return; // Prevent dropping on itself

const existingItemInTarget = [Link]('drop-


zone')
? [Link]('.drag-item')
: null;

// First, clear the target drop-zone of any text (like question numbers)
before adding the new item.
if ([Link]('drop-zone')) {
[Link]([Link]).forEach(node => {
if ([Link] === Node.TEXT_NODE) {
[Link]();
}
});
}

// Move the item that was in the target (if any) to the source zone.
if (existingItemInTarget) {
[Link](existingItemInTarget);
}

// Finally, move the dragged item to the target zone.


[Link](draggedItem);
[Link]('filled');

// After the move, clean up the source zone if it's a drop-zone and is
now empty.
if ([Link]('drop-zone') && !
[Link]('.drag-item')) {
[Link]('filled');
const qNum = [Link];
[Link] = qNum; // Restore the question number
}

updateAllIndicators();
}

// --- MISC HELPERS ---

function startTimer() {
if (timerInterval) clearInterval(timerInterval); // Ensure no multiple
intervals
timerInterval = setInterval(() => {
timeInSeconds--;
const minutes = [Link](timeInSeconds / 60);
const seconds = timeInSeconds % 60;
[Link] = `${[Link]().padStart(2, '0')}:
${[Link]().padStart(2, '0')}`;
if (timeInSeconds <= 0) {
clearInterval(timerInterval);
[Link] = "Time's up!";
// checkAnswers(); // Disabled to prevent modal from opening
automatically.
}
}, 1000);
[Link] = pauseIcon;
}

function pauseTimer() {
clearInterval(timerInterval);
[Link] = playIcon;
}

function toggleTimer() {
// Check based on the icon currently displayed
if ([Link]('M6 19h4V5H6v14z')) {
// Check for pause icon shape
pauseTimer();
} else {
startTimer();
}
}

function resetTimer() {
timeInSeconds = 3600;
updateTimerDisplay();
startTimer();
[Link] = pauseIcon;
}

function setupCheckboxLimits() {
const checkboxGroups = [
{ name: 'q21-22', limit: 2 },
{ name: 'q38-40', limit: 3 }
];
[Link](group => {
const checkboxes = [Link](`input[name="$
{[Link]}"]`);
[Link](checkbox => {
[Link]('change', () => {
const checkedCount =
[Link](`input[name="${[Link]}"]:checked`).length;
if (checkedCount > [Link]) [Link] = false;
updateAllIndicators();
});
});
});
}

function setupExampleHeading() {
const exampleBox = [Link]('.example-box');
if(exampleBox){
const title = [Link]('p');
[Link] = 'bold';
[Link] = 'List of Statements';
// [Link](title, [Link]);
}
}

function initResize(e) {
[Link]();
const startX = [Link];
const startWidth = [Link];

const doDrag = (e) => {


const newWidth = startWidth + [Link] - startX;
if (newWidth > 200 && ([Link] - newWidth
- [Link]) > 200) {
[Link] = `0 0 ${newWidth}px`;
}
};
const stopDrag = () => {
[Link]('mousemove', doDrag, false);
[Link]('mouseup', stopDrag, false);
};

[Link]('mousemove', doDrag, false);


[Link]('mouseup', stopDrag, false);
}

// --- CONTEXT MENU (Highlighting) ---

// --- HIGHLIGHT FEATURE ---


function initializeContextMenu() {
const panels = [passagePanel, questionsPanel];
let highlightBtn = null;
let removeHighlightBtn = null;
let highlightTarget = null;

// Helper to remove floating buttons


function removeFloatingButtons() {
if (highlightBtn && [Link])
[Link](highlightBtn);
if (removeHighlightBtn && [Link])
[Link](removeHighlightBtn);
highlightBtn = null;
removeHighlightBtn = null;
highlightTarget = null;
}

// Show highlight button near selection


[Link]('mouseup', (e) => {
setTimeout(() => { // Wait for selection to update
const selection = [Link]();
if (selection && ![Link] &&
[Link]().trim().length > 0) {
const range = [Link](0);
if ([Link](panel =>
[Link]([Link]))) {
// Don't show highlight button if selection is within an
existing highlight that has a remove button
const selectionParentHighlight =
[Link] === Node.TEXT_NODE
?
[Link]?.closest('.highlight')
: [Link]?.
('.highlight');

if (selectionParentHighlight && removeHighlightBtn &&


highlightTarget === selectionParentHighlight) {
// Selection is within the highlight that already has a
remove button, don't interfere
return;
}

removeFloatingButtons();
highlightBtn = [Link]('button');
[Link] = 'Highlight';
[Link] = 'absolute';
[Link] = 9999;
[Link] = '#ffe066';
[Link] = '1px solid #aaa';
[Link] = '2px 10px';
[Link] = '4px';
[Link] = 'pointer';
// Position button near selection
const rect = [Link]();
[Link] = `${[Link] + [Link]}px`;
[Link] = `${[Link] + [Link] -
30}px`;
[Link](highlightBtn);
[Link] = function() {
const span = [Link]('span');
[Link] = 'highlight';
[Link] = '#ffe066';
[Link]([Link]());
[Link](span);
removeFloatingButtons();
[Link]().removeAllRanges();
};
} else {
removeFloatingButtons();
}
} else {
removeFloatingButtons();
}
}, 10);
});
// Use event delegation for highlight removal
[Link](panel => {
[Link]('click', (e) => {
const highlightEl = [Link]('.highlight');
if (highlightEl) {
// Prevent double creation
if (removeHighlightBtn && highlightTarget === highlightEl)
return;
removeFloatingButtons();
removeHighlightBtn = [Link]('button');
[Link] = 'Remove Highlight';
[Link] = 'absolute';
[Link] = 9999;
[Link] = '#ffb3b3';
[Link] = '1px solid #aaa';
[Link] = '2px 10px';
[Link] = '4px';
[Link] = 'pointer';
const rect = [Link]();
[Link] = `${[Link] +
[Link]}px`;
[Link] = `${[Link] + [Link]
- 30}px`;
[Link](removeHighlightBtn);
highlightTarget = highlightEl;
[Link]('click', function(ev) {
[Link]();
// Unwrap highlight
const parent = [Link];
while ([Link]) {
[Link]([Link],
highlightTarget);
}
[Link](highlightTarget);
[Link]();
removeFloatingButtons();
});
}
});
});

// Remove floating buttons on scroll or click elsewhere


[Link]('scroll', removeFloatingButtons, true);
[Link]('mousedown', (e) => {
// Delay removal so highlight click handler can run first
setTimeout(() => {
if ((removeHighlightBtn &&
[Link]([Link])) || (highlightBtn &&
[Link]([Link]))) {
return;
}
if ([Link]('.highlight')) return;
removeFloatingButtons();
}, 0);
});
}

function closeContextMenu() {
[Link] = 'none';
selectedRange = null; // Clear range after menu closes
}

function unwrapElement(element) {
const parent = [Link];
if (!parent) return;
while ([Link]) {
[Link]([Link], element);
}
[Link](element);
[Link]();
}

[Link] = () => {
if (selectedRange && ![Link]) {
const span = [Link]('span');
[Link] = 'highlight';
[Link]([Link]());
[Link](span);
}
closeContextMenu();
[Link]().removeAllRanges();
};

[Link] = () => {
const note = prompt('Enter your note:');
if (note && selectedRange && ![Link]) {
const span = [Link]('span');
[Link] = 'comment-highlight';
const tooltip = [Link]('span');
[Link] = 'comment-tooltip';
[Link] = note;
[Link]([Link]());
[Link](tooltip);
[Link](span);
}
closeContextMenu();
[Link]().removeAllRanges();
};

[Link] = () => {
const elementToClear = [Link];
if (elementToClear) {
unwrapElement(elementToClear);
}
closeContextMenu();
[Link]().removeAllRanges();
};

[Link] = () => {
[Link]('.highlight, .comment-
highlight').forEach(unwrapElement);
closeContextMenu();
[Link]().removeAllRanges();
};

function updateAttemptedCount(part, startQ, endQ) {


let answeredCount = 0;
for (let i = startQ; i <= endQ; i++) {
if (isQuestionAnswered(i)) {
answeredCount++;
}
}
const partHeader =
[Link](`.footer__questionNo___3WNct[onclick="switchToPart(
${part})"]`);
if (partHeader) {
const countSpan = [Link]('.attemptedCount');
if (countSpan) {
[Link] = `${answeredCount} of ${endQ -
startQ + 1}`;
}
}
}
// --- GLOBAL FUNCTION EXPOSURE ---
[Link] = nextQuestion;
[Link] = previousQuestion;
[Link] = goToQuestion;
[Link] = switchToPart;
[Link] = closeResultsModal;
[Link] = highlightText;
[Link] = addNote;
[Link] = clearHighlight;
[Link] = clearAllHighlights;

// --- START THE APP ---


initialize();
});
</script>
</body>
</html>

You might also like