Sebastian Molenda
Submodule QuizzyTemplate/App deleted from 149f214357
@@ -1,410 +0,0 @@
|
|||||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--primary: #6366F1;
|
|
||||||
--primary-dark: #4F46E5;
|
|
||||||
--secondary: #8B5CF6;
|
|
||||||
--accent: #FFD166;
|
|
||||||
--text: #334155;
|
|
||||||
--text-light: #64748B;
|
|
||||||
--bg: #F8FAFC;
|
|
||||||
--bg-card: #FFFFFF;
|
|
||||||
--border: #E2E8F0;
|
|
||||||
--code-bg: #F1F5F9;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: 'Inter', sans-serif;
|
|
||||||
background-color: var(--bg);
|
|
||||||
color: var(--text);
|
|
||||||
line-height: 1.6;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
max-width: 1100px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
background: linear-gradient(135deg, var(--primary), var(--secondary));
|
|
||||||
color: white;
|
|
||||||
padding: 60px 0 80px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
header::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
bottom: -2px;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 4px;
|
|
||||||
background: var(--accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 700;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-icon {
|
|
||||||
margin-right: 10px;
|
|
||||||
font-size: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 1.3;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
color: var(--text);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2.5em;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 1.8em;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
border-bottom: 1px solid var(--border);
|
|
||||||
margin-top: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 1.4em;
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
font-size: 1.2em;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--primary);
|
|
||||||
text-decoration: none;
|
|
||||||
transition: color 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: var(--primary-dark);
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-subtitle {
|
|
||||||
font-size: 1.2em;
|
|
||||||
color: rgba(255, 255, 255, 0.9);
|
|
||||||
max-width: 700px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
padding: 60px 0;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc {
|
|
||||||
background-color: var(--bg-card);
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 25px;
|
|
||||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc-title {
|
|
||||||
font-size: 1.2em;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
color: var(--text);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc-title svg {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc-list {
|
|
||||||
list-style-type: none;
|
|
||||||
columns: 2;
|
|
||||||
column-gap: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc-list li {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
break-inside: avoid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc-list a {
|
|
||||||
color: var(--text-light);
|
|
||||||
transition: color 0.2s;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc-list a:hover {
|
|
||||||
color: var(--primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc-list a::before {
|
|
||||||
content: "•";
|
|
||||||
margin-right: 8px;
|
|
||||||
color: var(--primary);
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section {
|
|
||||||
margin-bottom: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul, ol {
|
|
||||||
margin-left: 20px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
font-family: 'Monaco', 'Consolas', monospace;
|
|
||||||
background-color: var(--code-bg);
|
|
||||||
padding: 2px 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
background-color: var(--code-bg);
|
|
||||||
padding: 15px;
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow-x: auto;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
border-left: 4px solid var(--primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
pre code {
|
|
||||||
background: none;
|
|
||||||
padding: 0;
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
||||||
gap: 20px;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-card {
|
|
||||||
background: var(--bg-card);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 20px;
|
|
||||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-card:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-icon {
|
|
||||||
font-size: 24px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
color: var(--primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.note {
|
|
||||||
background-color: rgba(99, 102, 241, 0.1);
|
|
||||||
border-left: 4px solid var(--primary);
|
|
||||||
padding: 15px;
|
|
||||||
border-radius: 0 8px 8px 0;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.warning {
|
|
||||||
background-color: rgba(255, 209, 102, 0.2);
|
|
||||||
border-left: 4px solid var(--accent);
|
|
||||||
padding: 15px;
|
|
||||||
border-radius: 0 8px 8px 0;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-structure {
|
|
||||||
font-family: 'Monaco', 'Consolas', monospace;
|
|
||||||
background-color: var(--code-bg);
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
white-space: pre;
|
|
||||||
overflow-x: auto;
|
|
||||||
line-height: 1.4;
|
|
||||||
font-size: 0.85em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-filename {
|
|
||||||
color: var(--primary);
|
|
||||||
font-weight: 600;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.steps {
|
|
||||||
list-style-type: none;
|
|
||||||
counter-reset: step-counter;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.steps li {
|
|
||||||
counter-increment: step-counter;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
position: relative;
|
|
||||||
padding-left: 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.steps li::before {
|
|
||||||
content: counter(step-counter);
|
|
||||||
background-color: var(--primary);
|
|
||||||
color: white;
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: -1px;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-container {
|
|
||||||
overflow-x: auto;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
th, td {
|
|
||||||
padding: 12px 15px;
|
|
||||||
text-align: left;
|
|
||||||
border-bottom: 1px solid var(--border);
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
background-color: var(--code-bg);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr:hover {
|
|
||||||
background-color: rgba(0, 0, 0, 0.01);
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
display: inline-block;
|
|
||||||
background-color: var(--primary);
|
|
||||||
color: white;
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 3px 10px;
|
|
||||||
font-size: 0.75em;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge.secondary {
|
|
||||||
background-color: var(--secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge.accent {
|
|
||||||
background-color: var(--accent);
|
|
||||||
color: var(--text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.screenshot {
|
|
||||||
max-width: 100%;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
background-color: var(--text);
|
|
||||||
color: white;
|
|
||||||
padding: 30px 0;
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-to-top {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 30px;
|
|
||||||
right: 30px;
|
|
||||||
background-color: var(--primary);
|
|
||||||
color: white;
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
text-decoration: none;
|
|
||||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
||||||
opacity: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-to-top.visible {
|
|
||||||
opacity: 1;
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-to-top:hover {
|
|
||||||
background-color: var(--primary-dark);
|
|
||||||
transform: translateY(-3px);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
h1 {
|
|
||||||
font-size: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc-list {
|
|
||||||
columns: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
padding: 0 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,397 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>QuizzyMind App Documentation</title>
|
|
||||||
<link rel="stylesheet" href="app.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<div class="container">
|
|
||||||
<div class="logo">
|
|
||||||
<span class="logo-icon">🎮</span>
|
|
||||||
Quizzy<span style="color: var(--accent);">Mind</span>
|
|
||||||
</div>
|
|
||||||
<h1>QuizzyMind App Documentation</h1>
|
|
||||||
<p class="header-subtitle">A comprehensive guide to installing, configuring, and customizing your React Native Expo quiz application.</p>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div class="content">
|
|
||||||
<div class="toc" id="table-of-contents">
|
|
||||||
<h3 class="toc-title">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
|
||||||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
|
||||||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
|
||||||
</svg>
|
|
||||||
Table of Contents
|
|
||||||
</h3>
|
|
||||||
<ul class="toc-list">
|
|
||||||
<li><a href="#introduction">Introduction</a></li>
|
|
||||||
<li><a href="#requirements">Requirements</a></li>
|
|
||||||
<li><a href="#installation">Installation</a></li>
|
|
||||||
<li><a href="#project-structure">Project Structure</a></li>
|
|
||||||
<li><a href="#configuration">Configuration</a></li>
|
|
||||||
<li><a href="#key-features">Key Features</a></li>
|
|
||||||
<li><a href="#customization-guide">Customization Guide</a></li>
|
|
||||||
<li><a href="#api-integration">API Integration</a></li>
|
|
||||||
<li><a href="#deployment">Deployment</a></li>
|
|
||||||
<li><a href="#troubleshooting">Troubleshooting</a></li>
|
|
||||||
<li><a href="#support">Support</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<section class="section" id="introduction">
|
|
||||||
<h2>Introduction</h2>
|
|
||||||
|
|
||||||
<p>QuizzyMind is a fully functional quiz application built with React Native and Expo Router. This documentation will guide you through setting up and customizing the application to meet your specific needs.</p>
|
|
||||||
|
|
||||||
<h3>Key Features</h3>
|
|
||||||
|
|
||||||
<div class="feature-grid">
|
|
||||||
<div class="feature-card">
|
|
||||||
<div class="feature-icon">🧠</div>
|
|
||||||
<h4>Multiple Quiz Categories</h4>
|
|
||||||
<p>Extensive question bank with various categories</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="feature-card">
|
|
||||||
<div class="feature-icon">🏆</div>
|
|
||||||
<h4>Real-time Leaderboards</h4>
|
|
||||||
<p>Compete with friends and track progress</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="feature-card">
|
|
||||||
<div class="feature-icon">🎨</div>
|
|
||||||
<h4>Modern UI</h4>
|
|
||||||
<p>Clean design with smooth animations</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="feature-card">
|
|
||||||
<div class="feature-icon">🧭</div>
|
|
||||||
<h4>Expo Router</h4>
|
|
||||||
<p>Optimized navigation experience</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="feature-card">
|
|
||||||
<div class="feature-icon">📱</div>
|
|
||||||
<h4>Cross-platform</h4>
|
|
||||||
<p>Works on both iOS and Android</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section" id="requirements">
|
|
||||||
<h2>Requirements</h2>
|
|
||||||
|
|
||||||
<p>Before you begin, ensure you have the following installed:</p>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li><strong>Node.js</strong> (v14.0.0 or newer)</li>
|
|
||||||
<li><strong>npm</strong> (v6.0.0 or newer) or <strong>Yarn</strong> (v1.22.0 or newer)</li>
|
|
||||||
<li><strong>Expo CLI</strong> (<code>npm install -g expo-cli</code>)</li>
|
|
||||||
<li><strong>Android Studio</strong> (for Android development)</li>
|
|
||||||
<li><strong>Xcode</strong> (for iOS development, macOS only)</li>
|
|
||||||
<li><strong>Git</strong></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div class="note">
|
|
||||||
<p><strong>Note:</strong> You can verify your Node.js and npm versions by running <code>node -v</code> and <code>npm -v</code> in your terminal.</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section" id="installation">
|
|
||||||
<h2>Installation</h2>
|
|
||||||
|
|
||||||
<p>Follow these steps to get the app up and running:</p>
|
|
||||||
|
|
||||||
<ol class="steps">
|
|
||||||
<li>
|
|
||||||
<strong>Clone or extract the project files</strong>
|
|
||||||
<pre><code># If you downloaded as a zip, extract it
|
|
||||||
cd QuizzyMind-app</code></pre>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<strong>Install dependencies</strong>
|
|
||||||
<pre><code>npm install
|
|
||||||
# or with yarn
|
|
||||||
yarn install</code></pre>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<strong>Start the development server</strong>
|
|
||||||
<pre><code>npx expo start or npm start</code></pre>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<strong>Run on device/simulator</strong>
|
|
||||||
<ul>
|
|
||||||
<li>Press <code>i</code> to open in iOS simulator</li>
|
|
||||||
<li>Press <code>a</code> to open in Android emulator</li>
|
|
||||||
<li>Scan QR code with Expo Go app on physical device</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
<div class="note">
|
|
||||||
<p><strong>Tip:</strong> If you encounter any issues during installation, refer to the <a href="#troubleshooting">Troubleshooting</a> section.</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section" id="project-structure">
|
|
||||||
<h2>Project Structure</h2>
|
|
||||||
|
|
||||||
<div class="project-structure">QuizzyMind-app/
|
|
||||||
├── app/ # Main application code using Expo Router
|
|
||||||
│ ├── (pages)/ # All screens inside this folder
|
|
||||||
│ ├────────── _layout.js # Root layout component
|
|
||||||
│ ├────────── CategoryScreen.jsx # Category Screen
|
|
||||||
│ ├────────── QuizScreen.jsx # QuizScreen Screen
|
|
||||||
│ ├────────── ResultScreen.jsx # ResultScreen Screen
|
|
||||||
│ ├── _layout.js # Root layout component
|
|
||||||
│ └── index.js # Home screen
|
|
||||||
├── assets/ # Static assets like images, fonts
|
|
||||||
├── components/ # Reusable UI components
|
|
||||||
│ ├── common/ # Shared components
|
|
||||||
│ ├── quiz/ # Quiz-related components
|
|
||||||
│ └── ui/ # UI elements (buttons, cards, etc.)
|
|
||||||
├── constants/ # App constants and theme settings
|
|
||||||
├── contexts/ # React contexts for state management
|
|
||||||
├── hooks/ # Custom React hooks
|
|
||||||
├── services/ # API services and external integrations
|
|
||||||
├── utils/ # Utility functions
|
|
||||||
├── app.json # Expo configuration
|
|
||||||
├── babel.config.js # Babel configuration
|
|
||||||
├── package.json # Dependencies and scripts
|
|
||||||
└── README.md # Basic readme</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section" id="key-features">
|
|
||||||
<h2>Key Features</h2>
|
|
||||||
|
|
||||||
<h3>Quiz Engine</h3>
|
|
||||||
|
|
||||||
<p>The quiz system supports:</p>
|
|
||||||
<ul>
|
|
||||||
<li>Multiple quiz categories</li>
|
|
||||||
<li>Various question types (multiple choice, true/false)</li>
|
|
||||||
<li>Timed quizzes</li>
|
|
||||||
<li>Score tracking and history</li>
|
|
||||||
<li>Difficulty levels</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h3>User Interface</h3>
|
|
||||||
|
|
||||||
<p>The UI is built with:</p>
|
|
||||||
<ul>
|
|
||||||
<li>Custom components for consistent design</li>
|
|
||||||
<li>Smooth animations and transitions</li>
|
|
||||||
<li>Dark/light mode support</li>
|
|
||||||
<li>Responsive layouts for different device sizes</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section" id="customization-guide">
|
|
||||||
<h2>Customization Guide</h2>
|
|
||||||
|
|
||||||
<h3>Theme Customization</h3>
|
|
||||||
|
|
||||||
<p>Edit the theme variables in <code>constants/Theme.js</code>:</p>
|
|
||||||
|
|
||||||
<div class="code-filename">constants/Theme.js</div>
|
|
||||||
<pre><code>// Example theme customization
|
|
||||||
export const COLORS = {
|
|
||||||
primary: '#6366F1',
|
|
||||||
secondary: '#8B5CF6',
|
|
||||||
accent: '#FFD166',
|
|
||||||
// Add your custom colors
|
|
||||||
};
|
|
||||||
|
|
||||||
export const FONTS = {
|
|
||||||
// Customize font families
|
|
||||||
};
|
|
||||||
|
|
||||||
export const SIZES = {
|
|
||||||
// Customize spacing and sizes
|
|
||||||
};</code></pre>
|
|
||||||
|
|
||||||
<h3>Content Customization</h3>
|
|
||||||
|
|
||||||
<p>Quiz questions are stored in <code>data/quizData.js</code>. Modify this file to add your own questions:</p>
|
|
||||||
|
|
||||||
<div class="code-filename">data/quizData.js</div>
|
|
||||||
<pre><code>export const QUIZ_CATEGORIES = [
|
|
||||||
{
|
|
||||||
id: 'general',
|
|
||||||
title: 'General Knowledge',
|
|
||||||
icon: 'brain',
|
|
||||||
questions: [
|
|
||||||
{
|
|
||||||
id: 'q1',
|
|
||||||
question: 'What is the capital of France?',
|
|
||||||
options: ['London', 'Berlin', 'Paris', 'Madrid'],
|
|
||||||
correctAnswer: 'Paris',
|
|
||||||
difficulty: 'easy'
|
|
||||||
},
|
|
||||||
// Add more questions here
|
|
||||||
]
|
|
||||||
},
|
|
||||||
// Add more categories
|
|
||||||
];</code></pre>
|
|
||||||
|
|
||||||
<h3>Adding New Screens</h3>
|
|
||||||
|
|
||||||
<p>To add a new screen with Expo Router:</p>
|
|
||||||
|
|
||||||
<ol>
|
|
||||||
<li>Create a new file in the <code>app</code> directory, e.g., <code>app/newScreen.js</code></li>
|
|
||||||
<li>Define your screen component:</li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
<div class="code-filename">app/newScreen.js</div>
|
|
||||||
<pre><code>import { View, Text, StyleSheet } from 'react-native';
|
|
||||||
import { useRouter } from 'expo-router';
|
|
||||||
|
|
||||||
export default function NewScreen() {
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<View style={styles.container}>
|
|
||||||
<Text>New Screen Content</Text>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
flex: 1,
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
},
|
|
||||||
});</code></pre>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
<section class="section" id="deployment">
|
|
||||||
<h2>Deployment</h2>
|
|
||||||
|
|
||||||
<h3>Publishing to Expo</h3>
|
|
||||||
|
|
||||||
<ol>
|
|
||||||
<li>Create an Expo account at <a href="https://expo.dev" target="_blank">expo.dev</a></li>
|
|
||||||
<li>Configure your app in <code>app.json</code>:
|
|
||||||
<ul>
|
|
||||||
<li>Update <code>name</code>, <code>slug</code>, and <code>owner</code></li>
|
|
||||||
<li>Set appropriate version numbers</li>
|
|
||||||
<li>Configure splash screen and icons</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li>Build and publish:
|
|
||||||
<pre><code>expo build:android # For Android APK/AAB
|
|
||||||
expo build:ios # For iOS IPA
|
|
||||||
expo publish # For Expo Go distribution</code></pre>
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
<h3>Submitting to App Stores</h3>
|
|
||||||
|
|
||||||
<h4>Android (Google Play)</h4>
|
|
||||||
|
|
||||||
<ol>
|
|
||||||
<li>Generate a signed AAB:
|
|
||||||
<pre><code>eas build -p android --profile production</code></pre>
|
|
||||||
</li>
|
|
||||||
<li>Follow Google Play Console submission guidelines</li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
<h4>iOS (App Store)</h4>
|
|
||||||
|
|
||||||
<ol>
|
|
||||||
<li>Generate a signed IPA:
|
|
||||||
<pre><code>eas build -p ios --profile production</code></pre>
|
|
||||||
</li>
|
|
||||||
<li>Submit through App Store Connect</li>
|
|
||||||
</ol>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section" id="troubleshooting">
|
|
||||||
<h2>Troubleshooting</h2>
|
|
||||||
|
|
||||||
<h3>Common Issues</h3>
|
|
||||||
|
|
||||||
<h4>Metro Bundler Issues</h4>
|
|
||||||
<pre><code># Clear cache and restart
|
|
||||||
expo start -c</code></pre>
|
|
||||||
|
|
||||||
<h4>Dependency Problems</h4>
|
|
||||||
<pre><code># Reset node_modules
|
|
||||||
rm -rf node_modules
|
|
||||||
npm install</code></pre>
|
|
||||||
|
|
||||||
<h4>Expo SDK Version Conflicts</h4>
|
|
||||||
<p>Ensure all packages are compatible with your Expo SDK version in <code>package.json</code>.</p>
|
|
||||||
|
|
||||||
<div class="note">
|
|
||||||
<p><strong>Tip:</strong> Most common issues can be resolved by clearing your cache and reinstalling dependencies.</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section" id="support">
|
|
||||||
<h2>Support</h2>
|
|
||||||
|
|
||||||
<p>For additional support, please contact us at <a href="mailto:support@email.com">support@email.com</a> or visit our support page on TemplateMonster.</p>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<div class="container">
|
|
||||||
<p>© 2025 QuizzyMind App | All Rights Reserved</p>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<a href="#" class="back-to-top" id="backToTop">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<path d="M18 15l-6-6-6 6"/>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// Back to top button functionality
|
|
||||||
const backToTopButton = document.getElementById('backToTop');
|
|
||||||
|
|
||||||
window.addEventListener('scroll', () => {
|
|
||||||
if (window.pageYOffset > 300) {
|
|
||||||
backToTopButton.classList.add('visible');
|
|
||||||
} else {
|
|
||||||
backToTopButton.classList.remove('visible');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
backToTopButton.addEventListener('click', (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
||||||
});
|
|
||||||
|
|
||||||
// Smooth scrolling for anchor links
|
|
||||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
||||||
anchor.addEventListener('click', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
if (this.getAttribute('href') === '#') return;
|
|
||||||
|
|
||||||
const target = document.querySelector(this.getAttribute('href'));
|
|
||||||
if (target) {
|
|
||||||
target.scrollIntoView({
|
|
||||||
behavior: 'smooth'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
+4
-3
@@ -39,9 +39,7 @@
|
|||||||
<span id="blank-progress" class="play-progress"></span>
|
<span id="blank-progress" class="play-progress"></span>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="play-progress-bar">
|
<div id="progressbar-placeholder"></div>
|
||||||
<div id="dyk-progress-bar-inner" class="play-progress-bar-inner"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="play-body">
|
<div class="play-body">
|
||||||
<div class="play-scroll-area" id="dyk-scroll">
|
<div class="play-scroll-area" id="dyk-scroll">
|
||||||
@@ -71,6 +69,9 @@
|
|||||||
}).then(html => {
|
}).then(html => {
|
||||||
document.getElementById('header-placeholder').outerHTML = html;
|
document.getElementById('header-placeholder').outerHTML = html;
|
||||||
});
|
});
|
||||||
|
loadComponent('components/progress-bar.html', {'{PROGRESS_ID}': 'dyk-progress-bar-inner'}).then(html => {
|
||||||
|
document.getElementById('progressbar-placeholder').outerHTML = html;
|
||||||
|
});
|
||||||
loadComponent('components/footer.html').then(html => {
|
loadComponent('components/footer.html').then(html => {
|
||||||
document.getElementById('footer-placeholder').outerHTML = html;
|
document.getElementById('footer-placeholder').outerHTML = html;
|
||||||
});
|
});
|
||||||
|
|||||||
+4
-3
@@ -51,9 +51,7 @@
|
|||||||
<span id="progress-label" class="progress-text">0/20</span>
|
<span id="progress-label" class="progress-text">0/20</span>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div class="read-progress-bar">
|
<div id="progressbar-placeholder"></div>
|
||||||
<div id="progress-inner" class="read-progress-bar-inner"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="play-body">
|
<div class="play-body">
|
||||||
<div class="problem-display">
|
<div class="problem-display">
|
||||||
@@ -107,6 +105,9 @@
|
|||||||
}).then(html => {
|
}).then(html => {
|
||||||
document.getElementById('header-placeholder').outerHTML = html;
|
document.getElementById('header-placeholder').outerHTML = html;
|
||||||
});
|
});
|
||||||
|
loadComponent('components/progress-bar.html', {'{PROGRESS_ID}': 'progress-inner'}).then(html => {
|
||||||
|
document.getElementById('progressbar-placeholder').outerHTML = html;
|
||||||
|
});
|
||||||
loadComponent('components/footer.html').then(html => {
|
loadComponent('components/footer.html').then(html => {
|
||||||
document.getElementById('footer-placeholder').outerHTML = html;
|
document.getElementById('footer-placeholder').outerHTML = html;
|
||||||
});
|
});
|
||||||
|
|||||||
+4
-3
@@ -51,9 +51,7 @@
|
|||||||
<span id="progress-label" class="progress-text">0/20</span>
|
<span id="progress-label" class="progress-text">0/20</span>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div class="read-progress-bar">
|
<div id="progressbar-placeholder"></div>
|
||||||
<div id="progress-inner" class="read-progress-bar-inner"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="play-body">
|
<div class="play-body">
|
||||||
<div class="problem-display">
|
<div class="problem-display">
|
||||||
@@ -107,6 +105,9 @@
|
|||||||
}).then(html => {
|
}).then(html => {
|
||||||
document.getElementById('header-placeholder').outerHTML = html;
|
document.getElementById('header-placeholder').outerHTML = html;
|
||||||
});
|
});
|
||||||
|
loadComponent('components/progress-bar.html', {'{PROGRESS_ID}': 'progress-inner'}).then(html => {
|
||||||
|
document.getElementById('progressbar-placeholder').outerHTML = html;
|
||||||
|
});
|
||||||
loadComponent('components/footer.html').then(html => {
|
loadComponent('components/footer.html').then(html => {
|
||||||
document.getElementById('footer-placeholder').outerHTML = html;
|
document.getElementById('footer-placeholder').outerHTML = html;
|
||||||
});
|
});
|
||||||
|
|||||||
+4
-3
@@ -100,9 +100,7 @@
|
|||||||
<div id="status" class="play-status">Trening</div>
|
<div id="status" class="play-status">Trening</div>
|
||||||
<div id="score" class="play-score">0</div>
|
<div id="score" class="play-score">0</div>
|
||||||
</header>
|
</header>
|
||||||
<div class="play-progress-bar">
|
<div id="progressbar-placeholder"></div>
|
||||||
<div id="progress_inner" class="play-progress-bar-inner"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="play-body">
|
<div class="play-body">
|
||||||
<div class="problem-display">
|
<div class="problem-display">
|
||||||
@@ -161,6 +159,9 @@
|
|||||||
}).then(html => {
|
}).then(html => {
|
||||||
document.getElementById('header-placeholder').outerHTML = html;
|
document.getElementById('header-placeholder').outerHTML = html;
|
||||||
});
|
});
|
||||||
|
loadComponent('components/progress-bar.html', {'{PROGRESS_ID}': 'progress_inner'}).then(html => {
|
||||||
|
document.getElementById('progressbar-placeholder').outerHTML = html;
|
||||||
|
});
|
||||||
loadComponent('components/footer.html').then(html => {
|
loadComponent('components/footer.html').then(html => {
|
||||||
document.getElementById('footer-placeholder').outerHTML = html;
|
document.getElementById('footer-placeholder').outerHTML = html;
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user