Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Sebastian Molenda
|
d406f10206 |
@@ -25,6 +25,6 @@ jobs:
|
||||
server: ${{ secrets.FTP_HOST }}
|
||||
username: ${{ secrets.FTP_USER }}
|
||||
password: ${{ secrets.FTP_PASS }}
|
||||
local-dir: app/src/main/assets/
|
||||
local-dir: ./
|
||||
server-dir: /
|
||||
|
||||
|
||||
@@ -1,35 +0,0 @@
|
||||
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
|
||||
@@ -1,25 +0,0 @@
|
||||
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
+1
Submodule QuizzyTemplate/App added at 149f214357
@@ -0,0 +1,410 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,397 @@
|
||||
<!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>
|
||||
Generated
+6
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"name": "QuizzyTemplate",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<footer class="app-footer">Version: <span id="commit-sha">(loading)</span></footer>
|
||||
@@ -1,5 +0,0 @@
|
||||
<!-- Uniwersalny nagłówek aplikacji/substrony -->
|
||||
<header class="subpage-header">
|
||||
<h1 class="subpage-title">{TITLE}</h1>
|
||||
<p class="subpage-subtitle">{SUBTITLE}</p>
|
||||
</header>
|
||||
@@ -1,4 +0,0 @@
|
||||
<!-- Uniwersalny pasek postępu -->
|
||||
<div class="progress-bar">
|
||||
<div class="progress-bar-inner" id="{PROGRESS_ID}"></div>
|
||||
</div>
|
||||
@@ -1,27 +0,0 @@
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('../../fonts/Inter-Regular.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('../../fonts/Inter-Medium.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('../../fonts/Inter-Bold.ttf') format('truetype');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('../../fonts/Inter-ExtraBold.ttf') format('truetype');
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
}
|
||||
body, html {
|
||||
font-family: 'Inter', Arial, sans-serif;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,14 +0,0 @@
|
||||
// Komponenty HTML loader
|
||||
function loadComponent(path, replaceMap = {}) {
|
||||
return fetch(path)
|
||||
.then(r => r.text())
|
||||
.then(html => {
|
||||
Object.entries(replaceMap).forEach(([key, val]) => {
|
||||
html = html.replaceAll(key, val);
|
||||
});
|
||||
return html;
|
||||
});
|
||||
}
|
||||
|
||||
// Przykład użycia:
|
||||
// loadComponent('components/header.html', {'{TITLE}': 'Tytuł', '{SUBTITLE}': 'Podtytuł'}).then(html => ...)
|
||||
File diff suppressed because it is too large
Load Diff
@@ -4,8 +4,10 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
|
||||
<title>Czytanie</title>
|
||||
<link rel="stylesheet" href="css/styles.css?v=202605261" />
|
||||
<link rel="stylesheet" href="css/fonts/inter.css?v=202605261">
|
||||
<link rel="stylesheet" href="styles.css?v=20260524" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -15,7 +17,10 @@
|
||||
<a href="index.html" class="back-btn" id="back-to-hub">← Wróć do menu</a>
|
||||
</nav>
|
||||
<main class="screen-content">
|
||||
<div id="header-placeholder"></div>
|
||||
<header class="subpage-header">
|
||||
<h1 class="subpage-title">📖 Czytanie</h1>
|
||||
<p class="subpage-subtitle">Wybierz tekst do przeczytania lub wklej własny.</p>
|
||||
</header>
|
||||
|
||||
<section class="content-panel">
|
||||
<h2 class="panel-title">Gotowe teksty</h2>
|
||||
@@ -51,21 +56,7 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="footer-placeholder"></div>
|
||||
<script src="js/nav.js?v=20260521"></script>
|
||||
<script src="js/czytanie.js?v=20260524"></script>
|
||||
<script src="js/components.js"></script>
|
||||
<script>
|
||||
// Ładowanie nagłówka i stopki
|
||||
loadComponent('components/header.html', {
|
||||
'{TITLE}': '📖 Czytanie',
|
||||
'{SUBTITLE}': 'Wybierz tekst do przeczytania lub wklej własny.'
|
||||
}).then(html => {
|
||||
document.getElementById('header-placeholder').outerHTML = html;
|
||||
});
|
||||
loadComponent('components/footer.html').then(html => {
|
||||
document.getElementById('footer-placeholder').outerHTML = html;
|
||||
});
|
||||
</script>
|
||||
<script src="nav.js?v=20260521"></script>
|
||||
<script src="czytanie.js?v=20260524"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -24,7 +24,7 @@
|
||||
const progressBar = document.getElementById('read-progress-bar-inner')
|
||||
|
||||
// ── Load text list from dyktanda.json ────────────────────────────────────
|
||||
fetch('json/dyktanda.json')
|
||||
fetch('dyktanda.json')
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
data.forEach(item => {
|
||||
@@ -4,8 +4,10 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
|
||||
<title>Dyktando</title>
|
||||
<link rel="stylesheet" href="css/styles.css?v=20260524" />
|
||||
<link rel="stylesheet" href="css/fonts/inter.css">
|
||||
<link rel="stylesheet" href="styles.css?v=20260524" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -15,7 +17,10 @@
|
||||
<a href="index.html" class="back-btn" id="back-to-hub">← Wróć do menu</a>
|
||||
</nav>
|
||||
<main class="screen-content">
|
||||
<div id="header-placeholder"></div>
|
||||
<header class="subpage-header">
|
||||
<h1 class="subpage-title">✏️ Dyktando</h1>
|
||||
<p class="subpage-subtitle">Wybierz dyktando lub wklej własny tekst.</p>
|
||||
</header>
|
||||
|
||||
<section class="content-panel">
|
||||
<h2 class="panel-title">Gotowe dyktanda</h2>
|
||||
@@ -60,20 +65,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer-placeholder"></div>
|
||||
<script src="js/nav.js?v=20260521"></script>
|
||||
<script src="js/dyktando.js?v=20260524"></script>
|
||||
<script src="js/components.js"></script>
|
||||
<script>
|
||||
loadComponent('components/header.html', {
|
||||
'{TITLE}': '✏️ Dyktando',
|
||||
'{SUBTITLE}': 'Wybierz dyktando lub wklej własny tekst.'
|
||||
}).then(html => {
|
||||
document.getElementById('header-placeholder').outerHTML = html;
|
||||
});
|
||||
loadComponent('components/footer.html').then(html => {
|
||||
document.getElementById('footer-placeholder').outerHTML = html;
|
||||
});
|
||||
</script>
|
||||
<script src="nav.js?v=20260521"></script>
|
||||
<script src="dyktando.js?v=20260524"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -38,7 +38,7 @@
|
||||
const progressBar = document.getElementById('dyk-progress-bar-inner')
|
||||
|
||||
// ── Load texts ────────────────────────────────────────────────────────────
|
||||
fetch('json/dyktanda.json')
|
||||
fetch('dyktanda.json')
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
data.forEach(item => {
|
||||
@@ -4,8 +4,10 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
|
||||
<title>Nauka Dzielenia</title>
|
||||
<link rel="stylesheet" href="css/styles.css?v=20260524" />
|
||||
<link rel="stylesheet" href="css/fonts/inter.css">
|
||||
<link rel="stylesheet" href="styles.css?v=20260524" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-container">
|
||||
@@ -15,7 +17,10 @@
|
||||
<a href="index.html" class="back-btn" id="back-to-hub">← Wróć do menu</a>
|
||||
</nav>
|
||||
<div class="screen-content">
|
||||
<div id="header-placeholder"></div>
|
||||
<header class="subpage-header">
|
||||
<h1 class="subpage-title">÷ Nauka Dzielenia</h1>
|
||||
<p class="subpage-subtitle">Wybierz dzielnik, przez który chcesz dzielić.</p>
|
||||
</header>
|
||||
<section class="content-panel">
|
||||
<h2 class="panel-title">Wybór dzielnika</h2>
|
||||
<div class="table-grid" id="table-grid">
|
||||
@@ -96,20 +101,8 @@
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div id="footer-placeholder"></div>
|
||||
<script src="js/nav.js?v=20260521"></script>
|
||||
<script src="js/dzielenie.js?v=20260524"></script>
|
||||
<script src="js/components.js"></script>
|
||||
<script>
|
||||
loadComponent('components/header.html', {
|
||||
'{TITLE}': '÷ Nauka Dzielenia',
|
||||
'{SUBTITLE}': 'Wybierz dzielnik, przez który chcesz dzielić.'
|
||||
}).then(html => {
|
||||
document.getElementById('header-placeholder').outerHTML = html;
|
||||
});
|
||||
loadComponent('components/footer.html').then(html => {
|
||||
document.getElementById('footer-placeholder').outerHTML = html;
|
||||
});
|
||||
</script>
|
||||
<footer class="app-footer">Version: <span id="commit-sha">(loading)</span></footer>
|
||||
<script src="nav.js?v=20260521"></script>
|
||||
<script src="dzielenie.js?v=20260524"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -4,8 +4,10 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
|
||||
<title>Edu — Główne Menu</title>
|
||||
<link rel="stylesheet" href="css/styles.css?v=20260524" />
|
||||
<link rel="stylesheet" href="css/fonts/inter.css">
|
||||
<link rel="stylesheet" href="styles.css?v=20260524" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-container">
|
||||
@@ -54,10 +56,18 @@
|
||||
<p class="card-desc">Sprawdź swoją wiedzę</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="lekcje.html" class="category-card" style="--grad-start: #6EE7B7; --grad-end: #34D399;">
|
||||
<div class="card-icon">📚</div>
|
||||
<div class="card-content">
|
||||
<h2 class="card-title">Lekcje</h2>
|
||||
<p class="card-desc">Zobacz nasze lekcje matematyki</p>
|
||||
</div>
|
||||
</a>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<footer class="app-footer">Version: <span id="commit-sha">(loading)</span></footer>
|
||||
<script src="js/version.js?v=20260521" defer></script>
|
||||
<script src="version.js?v=20260521" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,105 @@
|
||||
<!doctype html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lekcja 1: Dodawanie to dokładanie</title>
|
||||
<link rel="stylesheet" href="styles.css?v=20260526">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body data-topic="dodawanie" data-lesson-id="1">
|
||||
<div class="app-container">
|
||||
<header class="lesson-header">
|
||||
<a href="lekcje.html" class="back-button" id="back-to-hub">←</a>
|
||||
<div class="header-content">
|
||||
<h1 class="lesson-title">Dodawanie</h1>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: 0%;"></div>
|
||||
</div>
|
||||
<span class="progress-label">Postęp: 0/4</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lesson-dropdown">
|
||||
<button class="dropdown-button">☰</button>
|
||||
<div class="dropdown-content">
|
||||
<!-- Lista lekcji zostanie wstawiona tutaj przez JS -->
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="lesson-container">
|
||||
<div class="lesson-content-main">
|
||||
<h2>Lekcja 1: Dodawanie to dokładanie</h2>
|
||||
|
||||
<div class="parent-guide">
|
||||
<h3>Dla Rodzica: Jak zacząć?</h3>
|
||||
<p>Nie zaczynaj od cyfr i znaku plus. Zacznij od prostego pomysłu: <strong>"dokładania"</strong>. Połóż przed dzieckiem 2 klocki, a potem dołóż jeszcze 3. Powiedz głośno: <em>"Dodawanie to dokładanie czegoś do tego, co już mamy."</em></p>
|
||||
</div>
|
||||
|
||||
<div class="interactive-exercise" id="exercise1">
|
||||
<p>Popatrz, mamy 2 dziewczynki. Teraz dołączają do nich 3 chłopców.</p>
|
||||
<div class="icon-group">
|
||||
<span>👧</span><span>👧</span> <span class="plus-sign">+</span> <span>👦</span><span>👦</span><span>👦</span>
|
||||
</div>
|
||||
<p>Ile dzieci jest teraz razem? Policz i wpisz liczbę.</p>
|
||||
<div class="interactive-example">
|
||||
<span>2 + 3 = </span>
|
||||
<input type="number" class="interactive-input" data-answer="5">
|
||||
<span class="feedback"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="parent-guide">
|
||||
<h3>Kluczowa metoda: "Start i doskocz"</h3>
|
||||
<p>Unikaj liczenia od początku (1, 2, 3, 4, 5). To wolne i męczące. Naucz dziecko metody "start i doskocz": startujemy od większej liczby i "doskakujemy" o resztę.</p>
|
||||
<p>Przykład <strong>5 + 3</strong>: Nie liczymy od 1. Mówimy: <em>"Mam 5, dokładam 3"</em> i skaczemy: 6, 7, 8. Koniec!</p>
|
||||
<p><strong>Palce jako "licznik skoków":</strong> Palce nie służą do pokazywania 5 i 3. Pokazują tylko "skoki". Przy 5+3, startujemy od 5, a potem podnosimy jeden palec mówiąc "6", drugi mówiąc "7" i trzeci mówiąc "8".</p>
|
||||
</div>
|
||||
|
||||
<div class="interactive-exercise" id="exercise2">
|
||||
<h4>Ćwiczenie "Start i doskocz"</h4>
|
||||
<p>Mamy <strong>5</strong> klocków. Chcemy dołożyć <strong>3</strong>.</p>
|
||||
<div class="start-and-jump">
|
||||
<div class="start-number">5</div>
|
||||
<div class="jumps">
|
||||
<button class="jump-btn" data-value="6">+1</button>
|
||||
<button class="jump-btn" data-value="7">+1</button>
|
||||
<button class="jump-btn" data-value="8">+1</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Klikaj przyciski "+1", żeby "doskoczyć" do wyniku. Jaki będzie wynik?</p>
|
||||
<div class="interactive-example">
|
||||
<span>5 + 3 = </span>
|
||||
<input type="number" class="interactive-input" data-answer="8">
|
||||
<span class="feedback"></span>
|
||||
</div>
|
||||
<div class="jump-feedback">
|
||||
Start: 5...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="parent-guide">
|
||||
<h3>Teraz spróbuj sam!</h3>
|
||||
<p>Pora na samodzielne ćwiczenie. Użyj metody "start i doskocz", żeby rozwiązać poniższy przykład. Powodzenia!</p>
|
||||
</div>
|
||||
|
||||
<div id="random-exercise-container">
|
||||
<!-- Losowe ćwiczenie zostanie wygenerowane tutaj -->
|
||||
</div>
|
||||
<button id="retry-random-exercise" class="retry-button">Jeszcze raz</button>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="lesson-footer">
|
||||
<a href="lekcja-dodawanie-2.html" class="button-next">Dalej →</a>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
<script src="lekcja.js" defer></script>
|
||||
<script src="nav.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,48 @@
|
||||
<!doctype html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lekcja: Dodawanie w zakresie 20</title>
|
||||
<link rel="stylesheet" href="styles.css?v=20260526">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body data-topic="dodawanie" data-lesson-id="2">
|
||||
<div class="app-container">
|
||||
<header class="lesson-header">
|
||||
<a href="lekcje.html" class="back-button" id="back-to-hub">←</a>
|
||||
<div class="header-content">
|
||||
<h1 class="lesson-title">Dodawanie</h1>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: 0%;"></div>
|
||||
</div>
|
||||
<span class="progress-label">Postęp: 0/4</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lesson-dropdown">
|
||||
<button class="dropdown-button">☰</button>
|
||||
<div class="dropdown-content">
|
||||
<!-- Lista lekcji zostanie wstawiona tutaj przez JS -->
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="lesson-container">
|
||||
<div class="lesson-content-main">
|
||||
<h2>Lekcja 2: Dodawanie w zakresie 20</h2>
|
||||
<p>Teraz spróbujmy z większymi liczbami. Pamiętaj, że zawsze możesz użyć palców lub liczydełka!</p>
|
||||
<div class="interactive-example">
|
||||
<span>8 + 7 = </span>
|
||||
<input type="number" class="interactive-input" data-answer="15">
|
||||
<span class="feedback"></span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<script src="lekcja.js" defer></script>
|
||||
<script src="nav.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,49 @@
|
||||
<!doctype html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lekcja: Dodawanie z przenoszeniem</title>
|
||||
<link rel="stylesheet" href="styles.css?v=20260526">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body data-topic="dodawanie" data-lesson-id="3">
|
||||
<div class="app-container">
|
||||
<header class="lesson-header">
|
||||
<a href="lekcje.html" class="back-button" id="back-to-hub">←</a>
|
||||
<div class="header-content">
|
||||
<h1 class="lesson-title">Dodawanie</h1>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: 0%;"></div>
|
||||
</div>
|
||||
<span class="progress-label">Postęp: 0/4</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lesson-dropdown">
|
||||
<button class="dropdown-button">☰</button>
|
||||
<div class="dropdown-content">
|
||||
<!-- Lista lekcji zostanie wstawiona tutaj przez JS -->
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="lesson-container">
|
||||
<div class="lesson-content-main">
|
||||
<h2>Lekcja 3: Dodawanie z przenoszeniem</h2>
|
||||
<p>Czasami, dodając liczby, suma cyfr w kolumnie jest większa niż 9. Nazywamy to "przenoszeniem".</p>
|
||||
<p>Na przykład w działaniu 15 + 7, najpierw dodajesz 5+7=12. Zapisujesz 2, a 1 "przenosisz" do następnej kolumny.</p>
|
||||
<div class="interactive-example">
|
||||
<span>15 + 7 = </span>
|
||||
<input type="number" class="interactive-input" data-answer="22">
|
||||
<span class="feedback"></span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<script src="lekcja.js" defer></script>
|
||||
<script src="nav.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,48 @@
|
||||
<!doctype html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lekcja: Zadania tekstowe z dodawania</title>
|
||||
<link rel="stylesheet" href="styles.css?v=20260526">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body data-topic="dodawanie" data-lesson-id="4">
|
||||
<div class="app-container">
|
||||
<header class="lesson-header">
|
||||
<a href="lekcje.html" class="back-button" id="back-to-hub">←</a>
|
||||
<div class="header-content">
|
||||
<h1 class="lesson-title">Dodawanie</h1>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: 0%;"></div>
|
||||
</div>
|
||||
<span class="progress-label">Postęp: 0/4</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lesson-dropdown">
|
||||
<button class="dropdown-button">☰</button>
|
||||
<div class="dropdown-content">
|
||||
<!-- Lista lekcji zostanie wstawiona tutaj przez JS -->
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="lesson-container">
|
||||
<div class="lesson-content-main">
|
||||
<h2>Lekcja 4: Zadania tekstowe</h2>
|
||||
<p>Ania ma 5 cukierków, a Jaś dał jej jeszcze 4. Ile cukierków ma teraz Ania?</p>
|
||||
<div class="interactive-example">
|
||||
<span>5 + 4 = </span>
|
||||
<input type="number" class="interactive-input" data-answer="9">
|
||||
<span class="feedback"></span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<script src="lekcja.js" defer></script>
|
||||
<script src="nav.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,234 @@
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
const body = document.body;
|
||||
const topic = body.dataset.topic;
|
||||
const currentLessonId = parseInt(body.dataset.lessonId, 10);
|
||||
|
||||
if (!topic) return;
|
||||
|
||||
// --- Pobieranie danych o lekcjach ---
|
||||
const response = await fetch('lekcje.json');
|
||||
const allTopics = await response.json();
|
||||
const topicData = allTopics[topic];
|
||||
const lessons = topicData.lessons;
|
||||
const totalLessons = lessons.length;
|
||||
|
||||
// --- Inicjalizacja Dropdown Menu ---
|
||||
const dropdownContent = document.querySelector('.dropdown-content');
|
||||
const dropdownButton = document.querySelector('.dropdown-button');
|
||||
|
||||
lessons.forEach(lesson => {
|
||||
const a = document.createElement('a');
|
||||
a.href = lesson.url;
|
||||
a.textContent = `Lekcja ${lesson.id}: ${lesson.title}`;
|
||||
if (lesson.id === currentLessonId) {
|
||||
a.classList.add('active');
|
||||
}
|
||||
dropdownContent.appendChild(a);
|
||||
});
|
||||
|
||||
dropdownButton.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
dropdownContent.classList.toggle('show');
|
||||
});
|
||||
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!e.target.matches('.dropdown-button')) {
|
||||
if (dropdownContent.classList.contains('show')) {
|
||||
dropdownContent.classList.remove('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// --- Zarządzanie postępem ---
|
||||
const progressKey = `progress_${topic}`;
|
||||
let progress = JSON.parse(localStorage.getItem(progressKey)) || [];
|
||||
|
||||
const progressBar = document.querySelector('.progress');
|
||||
const progressLabel = document.querySelector('.progress-label');
|
||||
|
||||
function updateProgress() {
|
||||
const completedCount = progress.length;
|
||||
const progressPercentage = (completedCount / totalLessons) * 100;
|
||||
|
||||
if (progressBar) progressBar.style.width = `${progressPercentage}%`;
|
||||
if (progressLabel) progressLabel.textContent = `Postęp: ${completedCount}/${totalLessons}`;
|
||||
}
|
||||
|
||||
// --- Interaktywne zadania ---
|
||||
const interactiveInputs = document.querySelectorAll('.interactive-input');
|
||||
interactiveInputs.forEach(input => {
|
||||
input.addEventListener('change', () => {
|
||||
const correctAnswer = input.dataset.answer;
|
||||
const feedbackSpan = input.nextElementSibling;
|
||||
if (input.value === correctAnswer) {
|
||||
feedbackSpan.textContent = '✅ Dobrze!';
|
||||
feedbackSpan.style.color = 'green';
|
||||
input.style.borderColor = 'green';
|
||||
|
||||
// Sprawdź, czy wszystkie zadania na stronie są rozwiązane
|
||||
const allCorrect = Array.from(document.querySelectorAll('.interactive-input')).every(i => i.style.borderColor === 'green');
|
||||
|
||||
// Zapisz postęp, jeśli wszystkie zadania są poprawne
|
||||
if (allCorrect && !progress.includes(currentLessonId)) {
|
||||
progress.push(currentLessonId);
|
||||
localStorage.setItem(progressKey, JSON.stringify(progress));
|
||||
updateProgress();
|
||||
}
|
||||
} else {
|
||||
feedbackSpan.textContent = '❌ Spróbuj jeszcze raz.';
|
||||
feedbackSpan.style.color = 'red';
|
||||
input.style.borderColor = 'red';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// --- Ćwiczenie "Start i doskocz" ---
|
||||
const jumpExercise = document.querySelector('#exercise2');
|
||||
if (jumpExercise) {
|
||||
const jumpButtons = jumpExercise.querySelectorAll('.jump-btn');
|
||||
const jumpFeedback = jumpExercise.querySelector('.jump-feedback');
|
||||
let jumpCounter = 5;
|
||||
let jumpsMade = 0;
|
||||
|
||||
jumpButtons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
if (button.classList.contains('activated')) return;
|
||||
|
||||
jumpsMade++;
|
||||
jumpCounter++;
|
||||
button.classList.add('activated');
|
||||
button.textContent = jumpCounter;
|
||||
|
||||
let feedbackText = "Start: 5";
|
||||
for (let i = 1; i <= jumpsMade; i++) {
|
||||
feedbackText += ` ↷ ${5 + i}`;
|
||||
}
|
||||
jumpFeedback.textContent = feedbackText;
|
||||
|
||||
// Po ostatnim skoku, wypełnij pole odpowiedzi
|
||||
if (jumpsMade === jumpButtons.length) {
|
||||
const targetInput = jumpExercise.querySelector('.interactive-input');
|
||||
targetInput.value = jumpCounter;
|
||||
// Wywołaj zdarzenie 'change', aby sprawdzić odpowiedź i zapisać postęp
|
||||
targetInput.dispatchEvent(new Event('change'));
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// --- Losowe ćwiczenie "Start i doskocz" ---
|
||||
const randomExerciseContainer = document.getElementById('random-exercise-container');
|
||||
const retryButton = document.getElementById('retry-random-exercise');
|
||||
|
||||
function generateRandomExercise() {
|
||||
const num1 = Math.floor(Math.random() * 8) + 2; // 2-9
|
||||
const num2 = Math.floor(Math.random() * 8) + 2; // 2-9
|
||||
const startNum = Math.max(num1, num2);
|
||||
const jumpCount = Math.min(num1, num2);
|
||||
const answer = startNum + jumpCount;
|
||||
|
||||
let jumpsHTML = '';
|
||||
for (let i = 0; i < jumpCount; i++) {
|
||||
jumpsHTML += `<button class="jump-btn" data-value="${startNum + i + 1}">+1</button>`;
|
||||
}
|
||||
|
||||
randomExerciseContainer.innerHTML = `
|
||||
<div class="interactive-exercise" id="random-exercise">
|
||||
<h4>Ćwiczenie losowe</h4>
|
||||
<p>Mamy <strong>${startNum}</strong>. Chcemy dołożyć <strong>${jumpCount}</strong>.</p>
|
||||
<div class="start-and-jump">
|
||||
<div class="start-number">${startNum}</div>
|
||||
<div class="jumps">${jumpsHTML}</div>
|
||||
</div>
|
||||
<p>Klikaj przyciski "+1", żeby "doskoczyć" do wyniku. Jaki będzie wynik?</p>
|
||||
<div class="interactive-example">
|
||||
<span>${startNum} + ${jumpCount} = </span>
|
||||
<input type="number" class="interactive-input" data-answer="${answer}">
|
||||
<span class="feedback"></span>
|
||||
</div>
|
||||
<div class="jump-feedback">
|
||||
Start: ${startNum}...
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
setupRandomExerciseListeners();
|
||||
setupInteractiveInputs(); // Ponownie podłączamy listenery do nowo dodanych inputów
|
||||
}
|
||||
|
||||
function setupRandomExerciseListeners() {
|
||||
const exercise = document.getElementById('random-exercise');
|
||||
if (!exercise) return;
|
||||
|
||||
const jumpButtons = exercise.querySelectorAll('.jump-btn');
|
||||
const jumpFeedback = exercise.querySelector('.jump-feedback');
|
||||
const startNum = parseInt(exercise.querySelector('.start-number').textContent, 10);
|
||||
let jumpCounter = startNum;
|
||||
let jumpsMade = 0;
|
||||
|
||||
jumpButtons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
if (button.classList.contains('activated')) return;
|
||||
|
||||
jumpsMade++;
|
||||
jumpCounter++;
|
||||
button.classList.add('activated');
|
||||
button.textContent = jumpCounter;
|
||||
|
||||
let feedbackText = `Start: ${startNum}`;
|
||||
for (let i = 1; i <= jumpsMade; i++) {
|
||||
feedbackText += ` ↷ ${startNum + i}`;
|
||||
}
|
||||
jumpFeedback.textContent = feedbackText;
|
||||
|
||||
if (jumpsMade === jumpButtons.length) {
|
||||
const targetInput = exercise.querySelector('.interactive-input');
|
||||
targetInput.value = jumpCounter;
|
||||
targetInput.dispatchEvent(new Event('change'));
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function setupInteractiveInputs() {
|
||||
const allInputs = document.querySelectorAll('.interactive-input');
|
||||
allInputs.forEach(input => {
|
||||
// Usuń stare listenery, aby uniknąć duplikacji
|
||||
const newInput = input.cloneNode(true);
|
||||
input.parentNode.replaceChild(newInput, input);
|
||||
|
||||
newInput.addEventListener('change', () => {
|
||||
const correctAnswer = newInput.dataset.answer;
|
||||
const feedbackSpan = newInput.nextElementSibling;
|
||||
if (newInput.value === correctAnswer) {
|
||||
feedbackSpan.textContent = '✅ Dobrze!';
|
||||
feedbackSpan.style.color = 'green';
|
||||
newInput.style.borderColor = 'green';
|
||||
|
||||
const allCorrect = Array.from(document.querySelectorAll('.interactive-input')).every(i => i.style.borderColor === 'green');
|
||||
|
||||
if (allCorrect && !progress.includes(currentLessonId)) {
|
||||
progress.push(currentLessonId);
|
||||
localStorage.setItem(progressKey, JSON.stringify(progress));
|
||||
updateProgress();
|
||||
}
|
||||
} else {
|
||||
feedbackSpan.textContent = '❌ Spróbuj jeszcze raz.';
|
||||
feedbackSpan.style.color = 'red';
|
||||
newInput.style.borderColor = 'red';
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
if (randomExerciseContainer) {
|
||||
generateRandomExercise();
|
||||
retryButton.addEventListener('click', generateRandomExercise);
|
||||
} else {
|
||||
setupInteractiveInputs();
|
||||
}
|
||||
|
||||
|
||||
// Inicjalizacja paska postępu przy ładowaniu strony
|
||||
updateProgress();
|
||||
});
|
||||
+36
@@ -0,0 +1,36 @@
|
||||
<!doctype html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
|
||||
<title>Edu — Lekcje z matematyki</title>
|
||||
<link rel="stylesheet" href="styles.css?v=20260524" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-container">
|
||||
<header class="app-header">
|
||||
<a href="index.html" class="back-button" id="back-to-hub">←</a>
|
||||
<h1 class="app-title">Lekcje z matematyki</h1>
|
||||
<p class="app-subtitle">Wybierz temat, aby rozpocząć</p>
|
||||
</header>
|
||||
|
||||
<main class="category-grid">
|
||||
<a href="lekcja-dodawanie-1.html" class="category-card" style="--grad-start: #3B82F6; --grad-end: #1D4ED8;">
|
||||
<div class="card-icon">➕</div>
|
||||
<div class="card-content">
|
||||
<h2 class="card-title">Dodawanie</h2>
|
||||
<p class="card-desc">Naucz się dodawać</p>
|
||||
</div>
|
||||
</a>
|
||||
<!-- Tutaj pojawią się kolejne tematy -->
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<footer class="app-footer">Version: <span id="commit-sha">(loading)</span></footer>
|
||||
<script src="version.js?v=20260521" defer></script>
|
||||
<script src="nav.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"dodawanie": {
|
||||
"title": "Dodawanie",
|
||||
"lessons": [
|
||||
{
|
||||
"id": 1,
|
||||
"title": "Co to jest dodawanie?",
|
||||
"subtitle": "Podstawy i proste przykłady.",
|
||||
"url": "lekcja-dodawanie-1.html"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"title": "Dodawanie w zakresie 20",
|
||||
"subtitle": "Ćwiczenia z większymi liczbami.",
|
||||
"url": "lekcja-dodawanie-2.html"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"title": "Dodawanie z przenoszeniem",
|
||||
"subtitle": "Gdy suma cyfr przekracza 9.",
|
||||
"url": "lekcja-dodawanie-3.html"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"title": "Zadania tekstowe",
|
||||
"subtitle": "Praktyczne zastosowanie dodawania.",
|
||||
"url": "lekcja-dodawanie-4.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -4,8 +4,10 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
|
||||
<title>Nauka Mnożenia</title>
|
||||
<link rel="stylesheet" href="css/styles.css?v=20260524" />
|
||||
<link rel="stylesheet" href="css/fonts/inter.css">
|
||||
<link rel="stylesheet" href="styles.css?v=20260524" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-container">
|
||||
@@ -15,7 +17,10 @@
|
||||
<a href="index.html" class="back-btn" id="back-to-hub">← Wróć do menu</a>
|
||||
</nav>
|
||||
<div class="screen-content">
|
||||
<div id="header-placeholder"></div>
|
||||
<header class="subpage-header">
|
||||
<h1 class="subpage-title">× Nauka Mnożenia</h1>
|
||||
<p class="subpage-subtitle">Wybierz tabliczkę, którą chcesz poćwiczyć.</p>
|
||||
</header>
|
||||
<section class="content-panel">
|
||||
<h2 class="panel-title">Wybór tabliczki</h2>
|
||||
<div class="table-grid" id="table-grid">
|
||||
@@ -96,20 +101,8 @@
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div id="footer-placeholder"></div>
|
||||
<script src="js/nav.js?v=20260521"></script>
|
||||
<script src="js/mnozenie.js?v=20260524"></script>
|
||||
<script src="js/components.js"></script>
|
||||
<script>
|
||||
loadComponent('components/header.html', {
|
||||
'{TITLE}': '× Nauka Mnożenia',
|
||||
'{SUBTITLE}': 'Wybierz tabliczkę, którą chcesz poćwiczyć.'
|
||||
}).then(html => {
|
||||
document.getElementById('header-placeholder').outerHTML = html;
|
||||
});
|
||||
loadComponent('components/footer.html').then(html => {
|
||||
document.getElementById('footer-placeholder').outerHTML = html;
|
||||
});
|
||||
</script>
|
||||
<footer class="app-footer">Version: <span id="commit-sha">(loading)</span></footer>
|
||||
<script src="nav.js?v=20260521"></script>
|
||||
<script src="mnozenie.js?v=20260524"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,31 +1,3 @@
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('../fonts/Inter-Regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: url('../fonts/Inter-Medium.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url('../fonts/Inter-Bold.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
src: url('../fonts/Inter-ExtraBold.ttf') format('truetype');
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg-color: #f1f5f9;
|
||||
--text-color: #1e293b;
|
||||
@@ -1129,24 +1101,269 @@ body {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.app-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.app-subtitle {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.test-config-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
/* Nowe style dla strony z lekcjami */
|
||||
.lesson-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background-color: #f8f9fa;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.lesson-header .back-button {
|
||||
margin-right: 1rem;
|
||||
font-size: 1.5rem;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.lesson-title {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.progress-bar-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
background-color: #e9ecef;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 100%;
|
||||
background-color: #28a745;
|
||||
transition: width 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.progress-label {
|
||||
font-size: 0.8rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Dropdown Menu */
|
||||
.lesson-dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-left: auto;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.dropdown-button {
|
||||
background: none;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
background-color: #f1f1f1;
|
||||
min-width: 250px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.dropdown-content a.active {
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.lesson-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.lesson-selector details {
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.lesson-selector summary {
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.lesson-selector summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lesson-selector summary h2 {
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.lesson-selector summary p {
|
||||
margin: 0.25rem 0 0;
|
||||
font-size: 0.9rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.lesson-content {
|
||||
padding: 0 1rem 1rem;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.lesson-content-main {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.parent-guide {
|
||||
background-color: #fdfdea;
|
||||
border: 1px solid #fce58a;
|
||||
border-radius: 8px;
|
||||
padding: 0.5rem 1rem;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.parent-guide h3 {
|
||||
color: #c39100;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.interactive-exercise {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.icon-group {
|
||||
font-size: 2rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.icon-group .plus-sign {
|
||||
margin: 0 0.5rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.start-and-jump {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.start-number {
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
padding: 1rem;
|
||||
background-color: #e9ecef;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.jumps {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.jump-btn {
|
||||
font-size: 1.5rem;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 2px solid #007bff;
|
||||
background-color: white;
|
||||
color: #007bff;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.jump-btn:hover {
|
||||
background-color: #e7f3ff;
|
||||
}
|
||||
|
||||
.jump-btn.activated {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border-color: #0056b3;
|
||||
}
|
||||
|
||||
.jump-feedback {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
min-height: 2rem;
|
||||
}
|
||||
|
||||
.retry-button {
|
||||
display: block;
|
||||
margin: 1rem auto;
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
background-color: #6c757d;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.retry-button:hover {
|
||||
background-color: #5a6268;
|
||||
}
|
||||
|
||||
.lesson-footer {
|
||||
text-align: center;
|
||||
padding: 2rem 1rem;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.button-next {
|
||||
display: inline-block;
|
||||
padding: 1rem 2.5rem;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
background-color: #28a745;
|
||||
border-radius: 8px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.button-next:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
|
||||
.interactive-example {
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 4px;
|
||||
}
|
||||
@@ -4,8 +4,10 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
|
||||
<title>Testy Matematyczne</title>
|
||||
<link rel="stylesheet" href="css/styles.css?v=20260524" />
|
||||
<link rel="stylesheet" href="css/fonts/inter.css">
|
||||
<link rel="stylesheet" href="styles.css?v=20260524" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-container">
|
||||
@@ -15,7 +17,10 @@
|
||||
<a href="index.html" class="back-btn" id="back-to-hub">← Wróć do menu</a>
|
||||
</nav>
|
||||
<div class="screen-content">
|
||||
<div id="header-placeholder"></div>
|
||||
<header class="subpage-header">
|
||||
<h1 class="subpage-title">📝 Testy Matematyczne</h1>
|
||||
<p class="subpage-subtitle">Skonfiguruj swój test i sprawdź wiedzę.</p>
|
||||
</header>
|
||||
|
||||
<div class="test-config-grid">
|
||||
<!-- Operations -->
|
||||
@@ -149,21 +154,10 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer-placeholder"></div>
|
||||
<script src="js/version.js?v=20260521" defer></script>
|
||||
<script src="js/nav.js?v=20260521"></script>
|
||||
<script src="js/app.js?v=20260524"></script>
|
||||
<script src="js/components.js"></script>
|
||||
<script>
|
||||
loadComponent('components/header.html', {
|
||||
'{TITLE}': '📝 Testy Matematyczne',
|
||||
'{SUBTITLE}': 'Skonfiguruj swój test i sprawdź wiedzę.'
|
||||
}).then(html => {
|
||||
document.getElementById('header-placeholder').outerHTML = html;
|
||||
});
|
||||
loadComponent('components/footer.html').then(html => {
|
||||
document.getElementById('footer-placeholder').outerHTML = html;
|
||||
});
|
||||
</script>
|
||||
<footer class="app-footer">Version: <span id="commit-sha">(loading)</span></footer>
|
||||
|
||||
<script src="version.js?v=20260521" defer></script>
|
||||
<script src="nav.js?v=20260521"></script>
|
||||
<script src="app.js?v=20260524"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user