Mnogomov

This is "Mnogomov" - a Duolingo-like project, dedicated to help people study foreign languages. The core idea is to use materials you can use in conversations or writings straight after the lessons.

See on: eugenebevz.pythonanywhere.com

HTML

about.html

end.html

Файл, який презентує кількість балів, отриманих за тест. Головна частина має назву та частину 'style', яка створює колір сторінки, шрифти, розмір, колір, розташування текстів та кнопки 'CONTINUE'. Далі, в основній частині є картинка нашого логотипу та текст, який демонструє результат тесту.

home.html

lesson.html

Файл для сторінки тестів. Головна частина має назву та посилання на файл 'lesson.css'. Далі є основна частина, в якій є запитання, картинка, варіанти відповідей та кнопка 'Submit', 'Return to main'. Запитання, картинка та варіанти відповідей з'єднані з базою даних та генеруються випадковим чином. Також є частина 'check', яка пов'язана з базою даних та слугує для перевірки тестів, а саме: повертає різні фрази при правильній та неправильній відповідях.

main.html

Файл, який створює сторінку-презентацію. Головна частина має назву та посилання на файл 'main.css'. Далі є основна частина, яка публікує фото, додає текст 'If you want to learn ...'. Є ще текст 'Learn more', за яким можна перейти на основну сторінку.

vocabulary.html

Файл, який створює сторінку посібника з новими словами та картинками. Головна частина має назву та посилання на файл 'vocabulary.css'. Також в ній є частина 'style', яка доповнює файл 'vocabulary.css', а саме корегує розташування картинок. Далі, в основній частині є заголовки, параграфи для слів, картинки та кнопка 'TO TEST', за якою можна перейти до тесту.

CSS

lesson.css

body : створення заднього фону сторінки, а саме колір #1A3950

p : створення шрифту, кольору, розташування тексту запитання

img : зміна розміру картинки

picture : додає простір між запитанням та картинкою

answer : додає кольори, розташування, шрифт, розмір тексту варіантів відповідей

input: робить елемент блочним, але він також поводиться як inline-елемент, тобто він займає стільки місця, скільки потрібно та розташовує його посередині

label: робить елемент блочним, змінює його шрифт, розмір та колір

.check : додає простір між відповідями та кнопкою

.check .submit_btn : змінює колір, шрифт, розташування, розмір кнопки та її тексту, а також 'border-radius' робить заокруглені краї кнопки

button :  змінює колір, шрифт, розташування, розмір кнопки та її тексту, 'border-radius' робить заокруглені краї кнопки

.footbar : 

.green, .red, .start : кольори, які демонструють правильність чи неправильність тесту

main.css

body : створення заднього фону сторінки, а саме колір #1A3950

p : створення шрифту, кольору, розташування тексту

main_display : 'justify-content' задає спосіб вирівнювання вмісту по головній осі (вісь Х), в цьому випадку center: вирівнювання в центрі

img : зміна розташування картинки

h1 : додає колір, розташування, шрифт, розмір тексту

button : змінює колір, шрифт, розташування, розмір кнопки та її тексту, 'border-radius' робить заокруглені краї кнопки

style.css

vocabulary.css

body : створення заднього фону сторінки, а саме колір #1A3950

h1 : додає колір, розташування, шрифт, розмір тексту

h2 : додає колір, розташування, шрифт, розмір тексту

div [class="text-column"] : додає колір, розташування, шрифт, розмір тексту

img : зміна розміру та розташування картинки

button : змінює колір, шрифт, розташування, розмір кнопки та її тексту, 'border-radius' робить заокруглені краї кнопки

IMG

Серед картинок є наш логотип у двох варіантах, картинка для сторінки-презентації, картинка для сторінки 'Про нас' та картинка для основної(головної) сторінки.

PYTHON

main.py

Бек-енд застосунку розділений на 4 основних модулі: main.py, db.py, lesson_quiz.py та question.py. Кожен з них бере на себе частину функціонала, необхідну для коректної праці застосунку.

db.py: цей модуль відповідає за опрацювання бази даних, у якій зберігається інформація про уроки, питання в них, правильні відповіді тощо. Основна мета модуля: опрацювання БД та витягування необхідних даних з подальшим перетворенням на ті типи, які можливо опрацювати в Python.

question.py: цей модуль створює питання та перевіряє кожну відповідь, дану користувачем. Модуль приймає відповідь із форми та порівнює її з тим, що було дано в db.py

lesson_quiz.py: цей модуль відповідає за власне саме заняття. Він рахує правильні відповіді, відповідає за порядок питань, відслідковує їхній порядок та робить reset укінці. Також модуль виводить фінальний результат: кількість правильних відповідей.

main.py: цей модуль відповідає за запуск застосунку та перехід між його сторінками. Правильні відповіді беруться з query, а також модуль приймає дані, отримані від Submit у формі.

MY SQL

mnogomov_db.sql: База даних, що зберігає необхідні дані для застосунку. У базі даних (MySQL) зберігаються дані для уроків та відділів граматики. Таблиця уроку містить у собі наступне:

1. ID питання (відповідає за порядок)
2. Текст питання
3. Варіант 1
4. Варіант 2
5. Варіант 3
6. Номер правильної відповіді (1-3)
7. Посилання на зображення, що супроводжуватиме питання.