<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CogniLab - Researcher Cognitive Testing Platform</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary: #4361ee;
--secondary: #3a0ca3;
--accent: #f72585;
--light: #f8f9fa;
--dark: #212529;
--success: #4cc9f0;
--warning: #f9c74f;
--danger: #f94144;
--gray: #6c757d;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
color: var(--dark);
line-height: 1.6;
min-height: 100vh;
padding-bottom: 2rem;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
header {
background: var(--primary);
color: white;
padding: 1rem;
text-align: center;
border-radius: 0 0 10px 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
margin-bottom: 2rem;
}
.logo {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.logo i {
color: var(--success);
}
.tabs {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 2rem;
}
.tab {
padding: 12px 24px;
background: rgba(255, 255, 255, 0.2);
cursor: pointer;
border-radius: 30px;
transition: all 0.3s ease;
font-weight: 600;
}
.tab:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
.tab.active {
background: white;
color: var(--primary);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.card {
background: white;
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
padding: 2rem;
margin-bottom: 2rem;
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
}
.test-container {
text-align: center;
padding: 2rem;
}
.stimulus {
font-size: 3.5rem;
font-weight: bold;
margin: 2rem 0;
padding: 2rem;
border-radius: 12px;
background: var(--light);
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
}
.options {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.option {
padding: 1rem 2rem;
background: var(--primary);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 1.1rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.option:hover {
background: var(--secondary);
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.results {
text-align: left;
margin-top: 2rem;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
border-radius: 8px;
overflow: hidden;
}
th, td {
padding: 15px 20px;
text-align: left;
border-bottom: 1px solid #e9ecef;
}
th {
background-color: var(--primary);
color: white;
font-weight: 600;
}
tr:nth-child(even) {
background-color: #f8f9fa;
}
tr:hover {
background-color: #e9ecef;
}
.btn {
padding: 12px 24px;
background: var(--primary);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
margin: 5px;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.btn-primary {
background: var(--primary);
}
.btn-success {
background: var(--success);
}
.btn-danger {
background: var(--danger);
}
.btn-warning {
background: var(--warning);
color: var(--dark);
}
.admin-panel {
display: none;
}
footer {
text-align: center;
margin-top: 3rem;
padding: 1rem;
color: var(--gray);
}
.test-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
margin-top: 20px;
}
.test-item {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.test-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}
.progress-bar {
height: 10px;
background: #e9ecef;
border-radius: 5px;
margin: 15px 0;
overflow: hidden;
}
.progress {
height: 100%;
background: var(--success);
border-radius: 5px;
width: 0%;
transition: width 0.5s ease;
}
.stat {
display: flex;
justify-content: space-between;
margin: 10px 0;
}
.stat-value {
font-weight: 600;
color: var(--primary);
}
.feature-list {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin: 20px 0;
justify-content: center;
}
.feature {
flex: 1;
min-width: 250px;
background: white;
padding: 20px;
border-radius: 10px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}
.feature i {
font-size: 2.5rem;
color: var(--primary);
margin-bottom: 15px;
}
.researcher-controls {
background: white;
border-radius: 10px;
padding: 20px;
margin: 20px 0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}
.control-group {
margin: 15px 0;
}
.control-group label {
display: block;
margin-bottom: 5px;
font-weight: 600;
}
.control-group input, .control-group select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.control-group .help-text {
font-size: 0.85rem;
color: var(--gray);
margin-top: 5px;
}
@media (max-width: 768px) {
.options {
flex-direction: column;
}
.option {
width: 100%;
}
.test-list {
grid-template-columns: 1fr;
}
.feature {
min-width: 100%;
}
}
.highlight {
color: var(--primary);
font-weight: 700;
}
.consent-form {
background: white;
padding: 2rem;
border-radius: 10px;
margin: 2rem 0;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
max-height: 400px;
overflow-y: auto;
}
.consent-text {
margin-bottom: 1.5rem;
line-height: 1.8;
}
.timer {
font-size: 1.2rem;
font-weight: 600;
color: var(--primary);
margin: 10px 0;
}
.researcher-settings {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
margin: 20px 0;
}
.setting-card {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}
.setting-card h3 {
margin-bottom: 15px;
color: var(--primary);
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">
<i class="fas fa-brain"></i>
<span>CogniLab Researcher</span>
</div>
<p>Advanced cognitive testing platform with researcher controls</p>
</header>
<div class="tabs">
<div class="tab active" onclick="showTab('home')"><i class="fas fa-home"></i> Home</div>
<div class="tab" onclick="showTab('tests')"><i class="fas fa-tasks"></i> Tests</div>
<div class="tab" onclick="showTab('controls')"><i class="fas fa-sliders-h"></i> Researcher Controls</div>
<div class="tab" onclick="showTab('results')"><i class="fas fa-chart-bar"></i> Results</div>
<div class="tab" onclick="showTab('admin')"><i class="fas fa-cog"></i> Admin</div>
</div>
<div id="home-tab" class="tab-content">
<div class="card">
<h2>Welcome to CogniLab Researcher</h2>
<p>Advanced platform for creating, administering, and analyzing cognitive tests with full researcher control over parameters.</p>
<div class="feature-list">
<div class="feature">
<i class="fas fa-sliders-h"></i>
<h3>Parameter Control</h3>
<p>Full control over trial numbers, timing, and test conditions</p>
</div>
<div class="feature">
<i class="fas fa-users-cog"></i>
<h3>Participant Management</h3>
<p>Manage participant groups and assign different test parameters</p>
</div>
<div class="feature">
<i class="fas fa-download"></i>
<h3>Data Export</h3>
<p>Export raw data for statistical analysis in preferred formats</p>
</div>
</div>
</div>
<div class="card">
<h2>Researcher Features</h2>
<div class="researcher-settings">
<div class="setting-card">
<h3><i class="fas fa-cog"></i> Test Parameters</h3>
<p>Control number of trials, timing, stimuli, and response options for each test.</p>
</div>
<div class="setting-card">
<h3><i class="fas fa-user-friends"></i> Group Management</h3>
<p>Create participant groups with different test parameters for between-subjects designs.</p>
</div>
<div class="setting-card">
<h3><i class="fas fa-random"></i> Randomization</h3>
<p>Control randomization of stimuli and trial orders for experimental rigor.</p>
</div>
</div>
<button class="btn btn-primary">Researcher Registration</button>
<button class="btn">Researcher Login</button>
</div>
</div>
<div id="tests-tab" class="tab-content" style="display: none;">
<div class="card">
<h2>Available Cognitive Tests</h2>
<p>Select a test to administer or preview. Tests use parameters set in Researcher Controls.</p>
<div class="test-list">
<div class="test-item">
<h3><i class="fas fa-balance-scale-right"></i> Stroop Test</h3>
<p>Measures cognitive flexibility and processing speed by testing the ability to inhibit cognitive interference.</p>
<div class="stat">
<span>Current Trials:</span>
<span class="stat-value" id="current-trials">20</span>
</div>
<div class="stat">
<span>Response Timeout:</span>
<span class="stat-value" id="current-timeout">5s</span>
</div>
<button class="btn btn-primary" onclick="startStroopTest()">Start Stroop Test</button>
</div>
<div class="test-item">
<h3><i class="fas fa-memory"></i> Digit Span Test</h3>
<p>Measures working memory capacity by testing the ability to recall sequences of numbers.</p>
<div class="stat">
<span>Current Trials:</span>
<span class="stat-value">12</span>
</div>
<div class="stat">
<span>Sequence Length:</span>
<span class="stat-value">3-7</span>
</div>
<button class="btn btn-primary" disabled>Configure First</button>
</div>
<div class="test-item">
<h3><i class="fas fa-project-diagram"></i> Trail Making Test</h3>
<p>Assesses visual attention and task switching by connecting numbered and lettered circles.</p>
<div class="stat">
<span>Current Trials:</span>
<span class="stat-value">2</span>
</div>
<div class="stat">
<span>Circle Count:</span>
<span class="stat-value">25</span>
</div>
<button class="btn btn-primary" disabled>Configure First</button>
</div>
</div>
</div>
<div id="stroop-test" class="card test-container" style="display: none;">
<h2>Stroop Test</h2>
<p>Select the color of the text, not the word itself.</p>
<div class="timer">Time: <span id="timer">0</span>s</div>
<div id="stimulus" class="stimulus">BLUE</div>
<div class="options">
<button class="option" onclick="checkAnswer('red')">Red</button>
<button class="option" onclick="checkAnswer('blue')">Blue</button>
<button class="option" onclick="checkAnswer('green')">Green</button>
<button class="option" onclick="checkAnswer('yellow')">Yellow</button>
</div>
<div id="feedback"></div>
<div class="progress-bar">
<div class="progress" id="progress-bar"></div>
</div>
<p>Progress: <span id="progress">0</span>/<span id="total">20</span></p>
<button id="start-btn" class="btn btn-success" onclick="initStroopTest()">Start Test</button>
<button id="cancel-btn" class="btn btn-danger" onclick="cancelTest()" style="display: none;">Cancel Test</button>
</div>
</div>
<div id="controls-tab" class="tab-content" style="display: none;">
<div class="card">
<h2>Researcher Controls</h2>
<p>Customize test parameters and settings for your research needs.</p>
<div class="researcher-controls">
<h3><i class="fas fa-balance-scale-right"></i> Stroop Test Parameters</h3>
<div class="control-group">
<label for="trial-number">Number of Trials</label>
<input type="number" id="trial-number" min="5" max="100" value="20">
<div class="help-text">How many trials participants will complete (5-100)</div>
</div>
<div class="control-group">
<label for="timeout">Response Timeout (seconds)</label>
<input type="number" id="timeout" min="1" max="60" value="5">
<div class="help-text">Maximum time allowed for each response (1-60 seconds)</div>
</div>
<div class="control-group">
<label for="colors">Color Options</label>
<select id="colors" multiple>
<option value="red" selected>Red</option>
<option value="blue" selected>Blue</option>
<option value="green" selected>Green</option>
<option value="yellow" selected>Yellow</option>
<option value="purple">Purple</option>
<option value="orange">Orange</option>
<option value="black">Black</option>
</select>
<div class="help-text">Hold Ctrl/Cmd to select multiple color options</div>
</div>
<div class="control-group">
<label for="match-percentage">Word-Color Match Percentage</label>
<input type="range" id="match-percentage" min="0" max="100" value="25">
<div class="help-text">What percentage of trials should have matching word and color (0-100%)</div>
<output for="match-percentage" id="match-output">25%</output>
</div>
<div class="control-group">
<label for="feedback-type">Feedback Type</label>
<select id="feedback-type">
<option value="immediate">Immediate Feedback</option>
<option value="delayed">Delayed Feedback (after test)</option>
<option value="none">No Feedback</option>
</select>
<div class="help-text">When participants receive feedback on their responses</div>
</div>
<button class="btn btn-primary" onclick="saveStroopSettings()">Save Stroop Test Settings</button>
<button class="btn" onclick="resetStroopSettings()">Reset to Defaults</button>
</div>
<div class="researcher-controls">
<h3><i class="fas fa-download"></i> Data Collection Settings</h3>
<div class="control-group">
<label for="data-format">Data Export Format</label>
<select id="data-format">
<option value="csv">CSV</option>
<option value="excel">Excel</option>
<option value="json">JSON</option>
<option value="spss">SPSS Format</option>
</select>
</div>
<div class="control-group">
<label>
<input type="checkbox" id="include-demographics" checked>
Include Demographic Data
</label>
</div>
<div class="control-group">
<label>
<input type="checkbox" id="include-timestamps" checked>
Include Response Timestamps
</label>
</div>
<div class="control-group">
<label>
<input type="checkbox" id="anonymize-data">
Anonymize Participant Data
</label>
</div>
<button class="btn btn-primary">Save Data Settings</button>
</div>
</div>
</div>
<div id="results-tab" class="tab-content" style="display: none;">
<div class="card">
<h2>Test Results</h2>
<p>View and export test results data with researcher-configured parameters.</p>
<div class="control-group">
<label for="result-filter">Filter Results:</label>
<select id="result-filter">
<option value="all">All Participants</option>
<option value="group1">Group A (20 trials)</option>
<option value="group2">Group B (40 trials)</option>
<option value="recent">Recent (last 7 days)</option>
</select>
</div>
<div class="results">
<table>
<thead>
<tr>
<th>Test Name</th>
<th>Participant ID</th>
<th>Trials</th>
<th>Date</th>
<th>Accuracy</th>
<th>Avg. Response Time</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stroop Test</td>
<td>P-001</td>
<td>20</td>
<td>2023-05-15</td>
<td>85%</td>
<td>750ms</td>
<td><button class="btn">View Details</button></td>
</tr>
<tr>
<td>Stroop Test</td>
<td>P-002</td>
<td>40</td>
<td>2023-05-16</td>
<td>92%</td>
<td>680ms</td>
<td><button class="btn">View Details</button></td>
</tr>
<tr>
<td>Stroop Test</td>
<td>P-003</td>
<td>20</td>
<td>2023-05-17</td>
<td>78%</td>
<td>820ms</td>
<td><button class="btn">View Details</button></td>
</tr>
</tbody>
</table>
</div>
<div style="margin-top: 20px;">
<button class="btn btn-primary"><i class="fas fa-download"></i> Export as CSV</button>
<button class="btn btn-primary"><i class="fas fa-file-excel"></i> Export as Excel</button>
<button class="btn"><i class="fas fa-chart-bar"></i> Generate Report</button>
</div>
</div>
</div>
<div id="admin-tab" class="tab-content" style="display: none;">
<div class="card admin-panel">
<h2>Administrator Panel</h2>
<p>Manage users, tests, and platform settings.</p>
<div class="admin-options">
<button class="btn"><i class="fas fa-users"></i> User Management</button>
<button class="btn"><i class="fas fa-tasks"></i> Test Management</button>
<button class="btn"><i class="fas fa-database"></i> Data Management</button>
<button class="btn"><i class="fas fa-cog"></i> Platform Settings</button>
</div>
<div class="stat">
<span>Total Researchers:</span>
<span class="stat-value">24</span>
</div>
<div class="stat">
<span>Total Participants:</span>
<span class="stat-value">384</span>
</div>
<div class="stat">
<span>Tests Administered:</span>
<span class="stat-value">1,247</span>
</div>
</div>
</div>
<footer>
<p>CogniLab Researcher - Advanced Cognitive Testing Platform | Designed for Research</p>
<p>Ensure proper ethical approval and participant consent for all testing</p>
<p>© 2023 CogniLab. All rights reserved.</p>
</footer>
</div>
<script>
// Stroop Test Variables
let testStarted = false;
let startTime;
let currentTrial = 0;
let totalTrials = 20;
let correctAnswers = 0;
let responseTimes = [];
let timerInterval;
let timeElapsed = 0;
let responseTimeout = 5000; // 5 seconds default
// Colors for Stroop test
let colors = ['red', 'blue', 'green', 'yellow'];
const colorWords = ['RED', 'BLUE', 'GREEN', 'YELLOW'];
// Tab navigation
function showTab(tabName) {
document.querySelectorAll('.tab').forEach(tab => {
tab.classList.remove('active');
});
document.querySelectorAll('.tab-content').forEach(tab => {
tab.style.display = 'none';
});
event.currentTarget.classList.add('active');
document.getElementById(tabName + '-tab').style.display = 'block';
}
// Initialize Stroop Test
function initStroopTest() {
testStarted = true;
currentTrial = 0;
correctAnswers = 0;
responseTimes = [];
timeElapsed = 0;
// Get researcher settings
totalTrials = parseInt(document.getElementById('trial-number').value) || 20;
responseTimeout = parseInt(document.getElementById('timeout').value) * 1000 || 5000;
document.getElementById('start-btn').style.display = 'none';
document.getElementById('cancel-btn').style.display = 'inline-block';
document.getElementById('progress').textContent = '0';
document.getElementById('total').textContent = totalTrials;
document.getElementById('progress-bar').style.width = '0%';
document.getElementById('timer').textContent = '0';
// Start timer
timerInterval = setInterval(function() {
timeElapsed++;
document.getElementById('timer').textContent = timeElapsed;
}, 1000);
nextTrial();
}
// Start Stroop Test from main page
function startStroopTest() {
showTab('tests');
document.getElementById('stroop-test').style.display = 'block';
}
// Move to next trial in Stroop test
function nextTrial() {
if (currentTrial >= totalTrials) {
endTest();
return;
}
// Randomly select color and word
const colorIndex = Math.floor(Math.random() * colors.length);
let wordIndex = Math.floor(Math.random() * colorWords.length);
// Apply researcher's match percentage setting
const matchPercentage = parseInt(document.getElementById('match-percentage').value) || 25;
const shouldMatch = Math.random() < (matchPercentage / 100);
if (shouldMatch) {
wordIndex = colorIndex;
} else {
// Ensure word and color don't match
while (wordIndex === colorIndex) {
wordIndex = Math.floor(Math.random() * colorWords.length);
}
}
const stimulusElement = document.getElementById('stimulus');
stimulusElement.textContent = colorWords[wordIndex];
stimulusElement.style.color = colors[colorIndex];
document.getElementById('feedback').textContent = '';
startTime = new Date().getTime();
currentTrial++;
document.getElementById('progress').textContent = currentTrial;
// Update progress bar
const progressPercent = (currentTrial / totalTrials) * 100;
document.getElementById('progress-bar').style.width = progressPercent + '%';
// Set timeout for no response
setTimeout(() => {
if (testStarted && currentTrial <= totalTrials) {
document.getElementById('feedback').innerHTML = '<i class="fas fa-hourglass-end" style="color: orange; font-size: 2rem;"></i><p>Time out!</p>';
responseTimes.push(responseTimeout);
setTimeout(nextTrial, 1000);
}
}, responseTimeout);
}
// Check answer in Stroop test
function checkAnswer(selectedColor) {
if (!testStarted) return;
const endTime = new Date().getTime();
const responseTime = endTime - startTime;
responseTimes.push(responseTime);
const stimulusElement = document.getElementById('stimulus');
const actualColor = stimulusElement.style.color;
const feedbackType = document.getElementById('feedback-type').value;
if (feedbackType !== 'none') {
if (selectedColor === actualColor) {
if (feedbackType === 'immediate') {
document.getElementById('feedback').innerHTML = '<i class="fas fa-check-circle" style="color: green; font-size: 2rem;"></i>';
}
correctAnswers++;
} else {
if (feedbackType === 'immediate') {
document.getElementById('feedback').innerHTML = '<i class="fas fa-times-circle" style="color: red; font-size: 2rem;"></i>';
}
}
}
if (feedbackType === 'immediate') {
setTimeout(nextTrial, 800);
} else {
nextTrial();
}
}
// End Stroop test and show results
function endTest() {
testStarted = false;
clearInterval(timerInterval);
const avgResponseTime = responseTimes.reduce((a, b) => a + b, 0) / responseTimes.length;
const accuracy = (correctAnswers / totalTrials) * 100;
const feedbackType = document.getElementById('feedback-type').value;
if (feedbackType !== 'none') {
document.getElementById('feedback').innerHTML = `
<div class="results">
<h3>Test Completed!</h3>
<p>Accuracy: <span class="highlight">${accuracy.toFixed(1)}%</span></p>
<p>Average Response Time: <span class="highlight">${avgResponseTime.toFixed(0)}ms</span></p>
<p>Total Time: <span class="highlight">${timeElapsed} seconds</span></p>
</div>
`;
} else {
document.getElementById('feedback').innerHTML = `
<div class="results">
<h3>Test Completed!</h3>
<p>Thank you for participating.</p>
</div>
`;
}
document.getElementById('start-btn').style.display = 'inline-block';
document.getElementById('cancel-btn').style.display = 'none';
// In a real implementation, you would save these results to a database
console.log('Test results:', {
accuracy,
avgResponseTime,
responseTimes,
timeElapsed,
totalTrials,
responseTimeout,
matchPercentage: parseInt(document.getElementById('match-percentage').value) || 25
});
}
// Cancel the test
function cancelTest() {
testStarted = false;
clearInterval(timerInterval);
document.getElementById('start-btn').style.display = 'inline-block';
document.getElementById('cancel-btn').style.display = 'none';
document.getElementById('feedback').innerHTML = '<p style="color: var(--danger);">Test cancelled. Results were not saved.</p>';
}
// Save researcher settings
function saveStroopSettings() {
totalTrials = parseInt(document.getElementById('trial-number').value) || 20;
responseTimeout = parseInt(document.getElementById('timeout').value) * 1000 || 5000;
// Get selected colors
const colorSelect = document.getElementById('colors');
const selectedColors = [];
for (let i = 0; i < colorSelect.options.length; i++) {
if (colorSelect.options[i].selected) {
selectedColors.push(colorSelect.options[i].value);
}
}
if (selectedColors.length > 1) {
colors = selectedColors;
} else {
alert('Please select at least two colors');
// Reset to default colors
for (let i = 0; i < colorSelect.options.length; i++) {
colorSelect.options[i].selected = ['red', 'blue', 'green', 'yellow'].includes(colorSelect.options[i].value);
}
}
// Update display values
document.getElementById('current-trials').textContent = totalTrials;
document.getElementById('current-timeout').textContent = (responseTimeout / 1000) + 's';
alert('Stroop test settings saved successfully!');
}
// Reset settings to defaults
function resetStroopSettings() {
document.getElementById('trial-number').value = 20;
document.getElementById('timeout').value = 5;
document.getElementById('match-percentage').value = 25;
document.getElementById('match-output').value = '25%';
document.getElementById('feedback-type').value = 'immediate';
// Select default colors
const colorSelect = document.getElementById('colors');
for (let i = 0; i < colorSelect.options.length; i++) {
colorSelect.options[i].selected = ['red', 'blue', 'green', 'yellow'].includes(colorSelect.options[i].value);
}
saveStroopSettings();
}
// Initialize the page
document.addEventListener('DOMContentLoaded', function() {
// Set the home tab as active
showTab('home');
// Initialize match percentage output
const matchSlider = document.getElementById('match-percentage');
const matchOutput = document.getElementById('match-output');
matchOutput.value = matchSlider.value + '%';
matchSlider.addEventListener('input', function() {
matchOutput.value = this.value + '%';
});
});
</script>
</body>
</html>
Tests 
Leave a comment