Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Sebastian Molenda
|
d406f10206 |
@@ -1,43 +0,0 @@
|
||||
name: Build APK
|
||||
|
||||
on:
|
||||
push:
|
||||
tags:
|
||||
- 'v*'
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
container:
|
||||
image: cimg/android:2024.01
|
||||
|
||||
steps:
|
||||
- name: Install Node.js
|
||||
run: |
|
||||
sudo apt-get update
|
||||
sudo apt-get install -y curl
|
||||
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
|
||||
sudo apt-get install -y nodejs
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Generate Gradle Wrapper
|
||||
run: gradle wrapper
|
||||
|
||||
- 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
|
||||
|
||||
- name: Upload APK
|
||||
uses: actions/upload-artifact@v4
|
||||
with:
|
||||
name: app-release
|
||||
path: app/build/outputs/apk/release/app-release.apk
|
||||
@@ -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: /
|
||||
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,2 +0,0 @@
|
||||
#Tue May 26 23:52:23 CEST 2026
|
||||
gradle.version=9.5.1
|
||||
Binary file not shown.
Binary file not shown.
@@ -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)
|
||||
}
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="JAVA_MODULE" version="4">
|
||||
<component name="NewModuleRootManager" inherit-compiler-output="true">
|
||||
<exclude-output />
|
||||
<content url="file://$MODULE_DIR$">
|
||||
<sourceFolder url="file://$MODULE_DIR$" isTestSource="false" packagePrefix="com.example.app" />
|
||||
</content>
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
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": {}
|
||||
}
|
||||
@@ -55,7 +55,7 @@ const statusEl = document.getElementById('status');
|
||||
// load settings from localStorage
|
||||
function loadSettings(){
|
||||
try{
|
||||
let progressInner = null
|
||||
const raw = localStorage.getItem('matma:settings')
|
||||
if (raw) {
|
||||
const s = JSON.parse(raw)
|
||||
state.settings = Object.assign(state.settings, s)
|
||||
@@ -1,13 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
<application>
|
||||
<activity
|
||||
android:name=".MainActivity"
|
||||
android:exported="true">
|
||||
<intent-filter>
|
||||
<action android:name="android.intent.action.MAIN" />
|
||||
<category android:name="android.intent.category.LAUNCHER" />
|
||||
</intent-filter>
|
||||
</activity>
|
||||
</application>
|
||||
</manifest>
|
||||
@@ -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;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
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 => ...)
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
// Top-level build file where you can add configuration options common to all sub-projects/modules.
|
||||
buildscript {
|
||||
repositories {
|
||||
google()
|
||||
mavenCentral()
|
||||
}
|
||||
dependencies {
|
||||
classpath "com.android.tools.build:gradle:8.2.2"
|
||||
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.9.22"
|
||||
|
||||
// NOTE: Do not place your application dependencies here; they belong
|
||||
// in the individual module build.gradle files
|
||||
}
|
||||
}
|
||||
|
||||
allprojects {
|
||||
repositories {
|
||||
google()
|
||||
mavenCentral()
|
||||
}
|
||||
}
|
||||
|
||||
task clean(type: Delete) {
|
||||
delete rootProject.buildDir
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -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>
|
||||
@@ -21,10 +21,10 @@
|
||||
const readViewport = document.getElementById('read-viewport')
|
||||
const readTextEl = document.getElementById('read-text')
|
||||
const nextLineBtn = document.getElementById('next-line-btn')
|
||||
let progressBar = null
|
||||
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 => {
|
||||
@@ -132,7 +132,6 @@
|
||||
|
||||
function updateProgressBar() {
|
||||
const progress = maxOffset > 0 ? (yOffset / maxOffset) * 100 : 100
|
||||
if (!progressBar) progressBar = document.getElementById('read-progress-bar-inner')
|
||||
if (progressBar) progressBar.style.width = `${progress}%`
|
||||
progressBar.style.width = `${progress}%`
|
||||
}
|
||||
})()
|
||||
@@ -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>
|
||||
@@ -39,7 +44,9 @@
|
||||
<span id="blank-progress" class="play-progress"></span>
|
||||
</header>
|
||||
|
||||
<div id="progressbar-placeholder"></div>
|
||||
<div class="play-progress-bar">
|
||||
<div id="dyk-progress-bar-inner" class="play-progress-bar-inner"></div>
|
||||
</div>
|
||||
|
||||
<div class="play-body">
|
||||
<div class="play-scroll-area" id="dyk-scroll">
|
||||
@@ -58,23 +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/progress-bar.html', {'{PROGRESS_ID}': 'dyk-progress-bar-inner'}).then(html => {
|
||||
document.getElementById('progressbar-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>
|
||||
@@ -35,10 +35,10 @@
|
||||
const summaryScore = document.getElementById('summary-score')
|
||||
const summaryBackBtn = document.getElementById('summary-back-btn')
|
||||
const dykScroll = document.getElementById('dyk-scroll')
|
||||
let progressBar = null
|
||||
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 => {
|
||||
@@ -53,20 +53,6 @@
|
||||
textList.innerHTML = '<p style="color:var(--muted)">Nie udało się wczytać tekstów.</p>'
|
||||
})
|
||||
|
||||
// Poczekaj na dynamiczne załadowanie progress bara
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// progress bar jest ładowany przez loadComponent w dyktando.html
|
||||
const checkProgressBar = () => {
|
||||
const el = document.getElementById('dyk-progress-bar-inner')
|
||||
if (el) {
|
||||
progressBar = el
|
||||
} else {
|
||||
setTimeout(checkProgressBar, 50)
|
||||
}
|
||||
}
|
||||
checkProgressBar()
|
||||
})
|
||||
|
||||
customStartBtn.addEventListener('click', () => {
|
||||
const txt = customInput.value.trim()
|
||||
if (!txt) return
|
||||
@@ -112,7 +98,7 @@
|
||||
textDisplay.classList.remove('hidden')
|
||||
choicesEl.classList.remove('hidden')
|
||||
progressEl.textContent = ''
|
||||
if (progressBar) progressBar.style.width = '0%'
|
||||
progressBar.style.width = '0%'
|
||||
|
||||
listWrap.classList.add('hidden')
|
||||
playWrap.classList.remove('hidden')
|
||||
@@ -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">
|
||||
@@ -51,7 +56,9 @@
|
||||
<span id="progress-label" class="progress-text">0/20</span>
|
||||
</div>
|
||||
</header>
|
||||
<div id="progressbar-placeholder"></div>
|
||||
<div class="read-progress-bar">
|
||||
<div id="progress-inner" class="read-progress-bar-inner"></div>
|
||||
</div>
|
||||
|
||||
<div class="play-body">
|
||||
<div class="problem-display">
|
||||
@@ -94,23 +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/progress-bar.html', {'{PROGRESS_ID}': 'progress-inner'}).then(html => {
|
||||
document.getElementById('progressbar-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>
|
||||
@@ -8,7 +8,7 @@
|
||||
const problemEl = document.getElementById('problem')
|
||||
const answerEl = document.getElementById('answer')
|
||||
const feedbackEl = document.getElementById('feedback')
|
||||
let progressInner = null
|
||||
const progressInner = document.getElementById('progress-inner')
|
||||
const progressLabel = document.getElementById('progress-label')
|
||||
const summaryText = document.getElementById('summary-text')
|
||||
const totalInput = document.getElementById('total-input')
|
||||
@@ -99,10 +99,7 @@
|
||||
|
||||
function updateBar() {
|
||||
const pct = st.total > 0 ? Math.round((st.solved / st.total) * 100) : 0
|
||||
if (!progressInner) {
|
||||
progressInner = document.getElementById('progress-inner')
|
||||
}
|
||||
if (progressInner) progressInner.style.width = pct + '%'
|
||||
progressInner.style.width = pct + '%'
|
||||
progressLabel.textContent = `${st.solved}/${st.total}`
|
||||
}
|
||||
|
||||
Vendored
BIN
Binary file not shown.
-9
@@ -1,9 +0,0 @@
|
||||
distributionBase=GRADLE_USER_HOME
|
||||
distributionPath=wrapper/dists
|
||||
distributionUrl=https\://services.gradle.org/distributions/gradle-9.5.1-bin.zip
|
||||
networkTimeout=10000
|
||||
retries=0
|
||||
retryBackOffMs=500
|
||||
validateDistributionUrl=true
|
||||
zipStoreBase=GRADLE_USER_HOME
|
||||
zipStorePath=wrapper/dists
|
||||
@@ -1,248 +0,0 @@
|
||||
#!/bin/sh
|
||||
|
||||
#
|
||||
# Copyright © 2015 the original authors.
|
||||
#
|
||||
# Licensed under the Apache License, Version 2.0 (the "License");
|
||||
# you may not use this file except in compliance with the License.
|
||||
# You may obtain a copy of the License at
|
||||
#
|
||||
# https://www.apache.org/licenses/LICENSE-2.0
|
||||
#
|
||||
# Unless required by applicable law or agreed to in writing, software
|
||||
# distributed under the License is distributed on an "AS IS" BASIS,
|
||||
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
# See the License for the specific language governing permissions and
|
||||
# limitations under the License.
|
||||
#
|
||||
# SPDX-License-Identifier: Apache-2.0
|
||||
#
|
||||
|
||||
##############################################################################
|
||||
#
|
||||
# Gradle start up script for POSIX generated by Gradle.
|
||||
#
|
||||
# Important for running:
|
||||
#
|
||||
# (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
|
||||
# noncompliant, but you have some other compliant shell such as ksh or
|
||||
# bash, then to run this script, type that shell name before the whole
|
||||
# command line, like:
|
||||
#
|
||||
# ksh Gradle
|
||||
#
|
||||
# Busybox and similar reduced shells will NOT work, because this script
|
||||
# requires all of these POSIX shell features:
|
||||
# * functions;
|
||||
# * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
|
||||
# «${var#prefix}», «${var%suffix}», and «$( cmd )»;
|
||||
# * compound commands having a testable exit status, especially «case»;
|
||||
# * various built-in commands including «command», «set», and «ulimit».
|
||||
#
|
||||
# Important for patching:
|
||||
#
|
||||
# (2) This script targets any POSIX shell, so it avoids extensions provided
|
||||
# by Bash, Ksh, etc; in particular arrays are avoided.
|
||||
#
|
||||
# The "traditional" practice of packing multiple parameters into a
|
||||
# space-separated string is a well documented source of bugs and security
|
||||
# problems, so this is (mostly) avoided, by progressively accumulating
|
||||
# options in "$@", and eventually passing that to Java.
|
||||
#
|
||||
# Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
|
||||
# and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
|
||||
# see the in-line comments for details.
|
||||
#
|
||||
# There are tweaks for specific operating systems such as AIX, CygWin,
|
||||
# Darwin, MinGW, and NonStop.
|
||||
#
|
||||
# (3) This script is generated from the Groovy template
|
||||
# https://github.com/gradle/gradle/blob/3d91ce3b8caaf77ad09f381f43615b715b53f72c/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
|
||||
# within the Gradle project.
|
||||
#
|
||||
# You can find Gradle at https://github.com/gradle/gradle/.
|
||||
#
|
||||
##############################################################################
|
||||
|
||||
# Attempt to set APP_HOME
|
||||
|
||||
# Resolve links: $0 may be a link
|
||||
app_path=$0
|
||||
|
||||
# Need this for daisy-chained symlinks.
|
||||
while
|
||||
APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path
|
||||
[ -h "$app_path" ]
|
||||
do
|
||||
ls=$( ls -ld "$app_path" )
|
||||
link=${ls#*' -> '}
|
||||
case $link in #(
|
||||
/*) app_path=$link ;; #(
|
||||
*) app_path=$APP_HOME$link ;;
|
||||
esac
|
||||
done
|
||||
|
||||
# This is normally unused
|
||||
# shellcheck disable=SC2034
|
||||
APP_BASE_NAME=${0##*/}
|
||||
# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
|
||||
APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
|
||||
|
||||
# Use the maximum available, or set MAX_FD != -1 to use that value.
|
||||
MAX_FD=maximum
|
||||
|
||||
warn () {
|
||||
echo "$*"
|
||||
} >&2
|
||||
|
||||
die () {
|
||||
echo
|
||||
echo "$*"
|
||||
echo
|
||||
exit 1
|
||||
} >&2
|
||||
|
||||
# OS specific support (must be 'true' or 'false').
|
||||
cygwin=false
|
||||
msys=false
|
||||
darwin=false
|
||||
nonstop=false
|
||||
case "$( uname )" in #(
|
||||
CYGWIN* ) cygwin=true ;; #(
|
||||
Darwin* ) darwin=true ;; #(
|
||||
MSYS* | MINGW* ) msys=true ;; #(
|
||||
NONSTOP* ) nonstop=true ;;
|
||||
esac
|
||||
|
||||
|
||||
|
||||
# Determine the Java command to use to start the JVM.
|
||||
if [ -n "$JAVA_HOME" ] ; then
|
||||
if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
|
||||
# IBM's JDK on AIX uses strange locations for the executables
|
||||
JAVACMD=$JAVA_HOME/jre/sh/java
|
||||
else
|
||||
JAVACMD=$JAVA_HOME/bin/java
|
||||
fi
|
||||
if [ ! -x "$JAVACMD" ] ; then
|
||||
die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
|
||||
|
||||
Please set the JAVA_HOME variable in your environment to match the
|
||||
location of your Java installation."
|
||||
fi
|
||||
else
|
||||
JAVACMD=java
|
||||
if ! command -v java >/dev/null 2>&1
|
||||
then
|
||||
die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
|
||||
|
||||
Please set the JAVA_HOME variable in your environment to match the
|
||||
location of your Java installation."
|
||||
fi
|
||||
fi
|
||||
|
||||
# Increase the maximum file descriptors if we can.
|
||||
if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
|
||||
case $MAX_FD in #(
|
||||
max*)
|
||||
# In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
|
||||
# shellcheck disable=SC2039,SC3045
|
||||
MAX_FD=$( ulimit -H -n ) ||
|
||||
warn "Could not query maximum file descriptor limit"
|
||||
esac
|
||||
case $MAX_FD in #(
|
||||
'' | soft) :;; #(
|
||||
*)
|
||||
# In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
|
||||
# shellcheck disable=SC2039,SC3045
|
||||
ulimit -n "$MAX_FD" ||
|
||||
warn "Could not set maximum file descriptor limit to $MAX_FD"
|
||||
esac
|
||||
fi
|
||||
|
||||
# Collect all arguments for the java command, stacking in reverse order:
|
||||
# * args from the command line
|
||||
# * the main class name
|
||||
# * -classpath
|
||||
# * -D...appname settings
|
||||
# * --module-path (only if needed)
|
||||
# * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
|
||||
|
||||
# For Cygwin or MSYS, switch paths to Windows format before running java
|
||||
if "$cygwin" || "$msys" ; then
|
||||
APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
|
||||
|
||||
JAVACMD=$( cygpath --unix "$JAVACMD" )
|
||||
|
||||
# Now convert the arguments - kludge to limit ourselves to /bin/sh
|
||||
for arg do
|
||||
if
|
||||
case $arg in #(
|
||||
-*) false ;; # don't mess with options #(
|
||||
/?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath
|
||||
[ -e "$t" ] ;; #(
|
||||
*) false ;;
|
||||
esac
|
||||
then
|
||||
arg=$( cygpath --path --ignore --mixed "$arg" )
|
||||
fi
|
||||
# Roll the args list around exactly as many times as the number of
|
||||
# args, so each arg winds up back in the position where it started, but
|
||||
# possibly modified.
|
||||
#
|
||||
# NB: a `for` loop captures its iteration list before it begins, so
|
||||
# changing the positional parameters here affects neither the number of
|
||||
# iterations, nor the values presented in `arg`.
|
||||
shift # remove old arg
|
||||
set -- "$@" "$arg" # push replacement arg
|
||||
done
|
||||
fi
|
||||
|
||||
|
||||
# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
|
||||
DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
|
||||
|
||||
# Collect all arguments for the java command:
|
||||
# * DEFAULT_JVM_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
|
||||
# and any embedded shellness will be escaped.
|
||||
# * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
|
||||
# treated as '${Hostname}' itself on the command line.
|
||||
|
||||
set -- \
|
||||
"-Dorg.gradle.appname=$APP_BASE_NAME" \
|
||||
-jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
|
||||
"$@"
|
||||
|
||||
# Stop when "xargs" is not available.
|
||||
if ! command -v xargs >/dev/null 2>&1
|
||||
then
|
||||
die "xargs is not available"
|
||||
fi
|
||||
|
||||
# Use "xargs" to parse quoted args.
|
||||
#
|
||||
# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
|
||||
#
|
||||
# In Bash we could simply go:
|
||||
#
|
||||
# readarray ARGS < <( xargs -n1 <<<"$var" ) &&
|
||||
# set -- "${ARGS[@]}" "$@"
|
||||
#
|
||||
# but POSIX shell has neither arrays nor command substitution, so instead we
|
||||
# post-process each arg (as a line of input to sed) to backslash-escape any
|
||||
# character that might be a shell metacharacter, then use eval to reverse
|
||||
# that process (while maintaining the separation between arguments), and wrap
|
||||
# the whole thing up as a single "set" statement.
|
||||
#
|
||||
# This will of course break if any of these variables contains a newline or
|
||||
# an unmatched quote.
|
||||
#
|
||||
|
||||
eval "set -- $(
|
||||
printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
|
||||
xargs -n1 |
|
||||
sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
|
||||
tr '\n' ' '
|
||||
)" '"$@"'
|
||||
|
||||
exec "$JAVACMD" "$@"
|
||||
Vendored
-82
@@ -1,82 +0,0 @@
|
||||
@rem
|
||||
@rem Copyright 2015 the original author or authors.
|
||||
@rem
|
||||
@rem Licensed under the Apache License, Version 2.0 (the "License");
|
||||
@rem you may not use this file except in compliance with the License.
|
||||
@rem You may obtain a copy of the License at
|
||||
@rem
|
||||
@rem https://www.apache.org/licenses/LICENSE-2.0
|
||||
@rem
|
||||
@rem Unless required by applicable law or agreed to in writing, software
|
||||
@rem distributed under the License is distributed on an "AS IS" BASIS,
|
||||
@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
@rem See the License for the specific language governing permissions and
|
||||
@rem limitations under the License.
|
||||
@rem
|
||||
@rem SPDX-License-Identifier: Apache-2.0
|
||||
@rem
|
||||
|
||||
@if "%DEBUG%"=="" @echo off
|
||||
@rem ##########################################################################
|
||||
@rem
|
||||
@rem Gradle startup script for Windows
|
||||
@rem
|
||||
@rem ##########################################################################
|
||||
|
||||
@rem Set local scope for the variables, and ensure extensions are enabled
|
||||
setlocal EnableExtensions
|
||||
|
||||
set DIRNAME=%~dp0
|
||||
if "%DIRNAME%"=="" set DIRNAME=.
|
||||
@rem This is normally unused
|
||||
set APP_BASE_NAME=%~n0
|
||||
set APP_HOME=%DIRNAME%
|
||||
|
||||
@rem Resolve any "." and ".." in APP_HOME to make it shorter.
|
||||
for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
|
||||
|
||||
@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
|
||||
set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
|
||||
|
||||
@rem Find java.exe
|
||||
if defined JAVA_HOME goto findJavaFromJavaHome
|
||||
|
||||
set JAVA_EXE=java.exe
|
||||
%JAVA_EXE% -version >NUL 2>&1
|
||||
if %ERRORLEVEL% equ 0 goto execute
|
||||
|
||||
echo. 1>&2
|
||||
echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
|
||||
echo. 1>&2
|
||||
echo Please set the JAVA_HOME variable in your environment to match the 1>&2
|
||||
echo location of your Java installation. 1>&2
|
||||
|
||||
"%COMSPEC%" /c exit 1
|
||||
|
||||
:findJavaFromJavaHome
|
||||
set JAVA_HOME=%JAVA_HOME:"=%
|
||||
set JAVA_EXE=%JAVA_HOME%/bin/java.exe
|
||||
|
||||
if exist "%JAVA_EXE%" goto execute
|
||||
|
||||
echo. 1>&2
|
||||
echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
|
||||
echo. 1>&2
|
||||
echo Please set the JAVA_HOME variable in your environment to match the 1>&2
|
||||
echo location of your Java installation. 1>&2
|
||||
|
||||
"%COMSPEC%" /c exit 1
|
||||
|
||||
:execute
|
||||
@rem Setup the command line
|
||||
|
||||
|
||||
|
||||
@rem Execute Gradle
|
||||
@rem endlocal doesn't take effect until after the line is parsed and variables are expanded
|
||||
@rem which allows us to clear the local environment before executing the java command
|
||||
endlocal & "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %* & call :exitWithErrorLevel
|
||||
|
||||
:exitWithErrorLevel
|
||||
@rem Use "%COMSPEC%" /c exit to allow operators to work properly in scripts
|
||||
"%COMSPEC%" /c exit %ERRORLEVEL%
|
||||
@@ -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">
|
||||
@@ -51,7 +56,9 @@
|
||||
<span id="progress-label" class="progress-text">0/20</span>
|
||||
</div>
|
||||
</header>
|
||||
<div id="progressbar-placeholder"></div>
|
||||
<div class="read-progress-bar">
|
||||
<div id="progress-inner" class="read-progress-bar-inner"></div>
|
||||
</div>
|
||||
|
||||
<div class="play-body">
|
||||
<div class="problem-display">
|
||||
@@ -94,23 +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/progress-bar.html', {'{PROGRESS_ID}': 'progress-inner'}).then(html => {
|
||||
document.getElementById('progressbar-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>
|
||||
@@ -8,7 +8,7 @@
|
||||
const problemEl = document.getElementById('problem')
|
||||
const answerEl = document.getElementById('answer')
|
||||
const feedbackEl = document.getElementById('feedback')
|
||||
let progressInner = null
|
||||
const progressInner = document.getElementById('progress-inner')
|
||||
const progressLabel = document.getElementById('progress-label')
|
||||
const scoreLabel = document.getElementById('score-label') // This element is removed, but we might re-purpose the logic
|
||||
const summaryText = document.getElementById('summary-text')
|
||||
@@ -99,8 +99,7 @@
|
||||
|
||||
function updateBar() {
|
||||
const pct = st.total > 0 ? Math.round((st.solved / st.total) * 100) : 0
|
||||
if (!progressInner) progressInner = document.getElementById('progress-inner')
|
||||
if (progressInner) progressInner.style.width = pct + '%'
|
||||
progressInner.style.width = pct + '%'
|
||||
progressLabel.textContent = `${st.solved}/${st.total}`
|
||||
// scoreLabel is removed, so we comment this out
|
||||
// scoreLabel.textContent = `✔ ${st.score}`
|
||||
@@ -1,2 +0,0 @@
|
||||
rootProject.name = "Matma"
|
||||
include ':app'
|
||||
@@ -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 -->
|
||||
@@ -100,7 +105,9 @@
|
||||
<div id="status" class="play-status">Trening</div>
|
||||
<div id="score" class="play-score">0</div>
|
||||
</header>
|
||||
<div id="progressbar-placeholder"></div>
|
||||
<div class="play-progress-bar">
|
||||
<div id="progress_inner" class="play-progress-bar-inner"></div>
|
||||
</div>
|
||||
|
||||
<div class="play-body">
|
||||
<div class="problem-display">
|
||||
@@ -147,24 +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/progress-bar.html', {'{PROGRESS_ID}': 'progress_inner'}).then(html => {
|
||||
document.getElementById('progressbar-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