hello apk
This commit is contained in:
Sebastian Molenda
@@ -25,6 +25,6 @@ jobs:
|
|||||||
server: ${{ secrets.FTP_HOST }}
|
server: ${{ secrets.FTP_HOST }}
|
||||||
username: ${{ secrets.FTP_USER }}
|
username: ${{ secrets.FTP_USER }}
|
||||||
password: ${{ secrets.FTP_PASS }}
|
password: ${{ secrets.FTP_PASS }}
|
||||||
local-dir: ./
|
local-dir: app/src/main/assets/
|
||||||
server-dir: /
|
server-dir: /
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,35 @@
|
|||||||
|
name: Build APK
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
tags:
|
||||||
|
- 'v*'
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
build:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- name: Checkout
|
||||||
|
uses: actions/checkout@v4
|
||||||
|
|
||||||
|
- name: Setup JDK
|
||||||
|
uses: actions/setup-java@v4
|
||||||
|
with:
|
||||||
|
distribution: temurin
|
||||||
|
java-version: 17
|
||||||
|
|
||||||
|
- name: Setup Android SDK
|
||||||
|
uses: android-actions/setup-android@v3
|
||||||
|
|
||||||
|
- name: Grant execute permission
|
||||||
|
run: chmod +x ./gradlew
|
||||||
|
|
||||||
|
- name: Build APK
|
||||||
|
run: ./gradlew assembleRelease
|
||||||
|
|
||||||
|
- name: Upload APK
|
||||||
|
uses: actions/upload-artifact@v4
|
||||||
|
with:
|
||||||
|
name: app-release
|
||||||
|
path: app/build/outputs/apk/release/app-release.apk
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
package com.example.app
|
||||||
|
|
||||||
|
import android.os.Bundle
|
||||||
|
import android.webkit.WebView
|
||||||
|
import android.webkit.WebViewClient
|
||||||
|
import androidx.appcompat.app.AppCompatActivity
|
||||||
|
|
||||||
|
class MainActivity : AppCompatActivity() {
|
||||||
|
|
||||||
|
override fun onCreate(savedInstanceState: Bundle?) {
|
||||||
|
super.onCreate(savedInstanceState)
|
||||||
|
|
||||||
|
val webView = WebView(this)
|
||||||
|
|
||||||
|
webView.settings.javaScriptEnabled = true
|
||||||
|
webView.settings.allowFileAccess = true
|
||||||
|
webView.settings.domStorageEnabled = true
|
||||||
|
|
||||||
|
webView.webViewClient = WebViewClient()
|
||||||
|
|
||||||
|
webView.loadUrl("file:///android_asset/index.html")
|
||||||
|
|
||||||
|
setContentView(webView)
|
||||||
|
}
|
||||||
|
}
|
||||||
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>
|
|
||||||
Reference in New Issue
Block a user