From 4fc6765b1d8030069c823b2eeeac018d5c05e69a Mon Sep 17 00:00:00 2001 From: Jan Date: Wed, 13 Mar 2024 15:56:34 +0100 Subject: [PATCH] First commit, already played around a bit --- .gitignore | 14 +++++ slaeforms/app.py | 46 +++++++++++++++ slaeforms/database.db | Bin 0 -> 4096 bytes slaeforms/db.py | 9 +++ slaeforms/schema.sql | 17 ++++++ slaeforms/static/attributions.txt | 3 + slaeforms/static/styles.css | 94 ++++++++++++++++++++++++++++++ slaeforms/templates/data.html | 15 +++++ slaeforms/templates/layout1.html | 54 +++++++++++++++++ slaeforms/templates/styles.css | 94 ++++++++++++++++++++++++++++++ 10 files changed, 346 insertions(+) create mode 100644 .gitignore create mode 100644 slaeforms/app.py create mode 100644 slaeforms/database.db create mode 100644 slaeforms/db.py create mode 100644 slaeforms/schema.sql create mode 100644 slaeforms/static/attributions.txt create mode 100644 slaeforms/static/styles.css create mode 100644 slaeforms/templates/data.html create mode 100644 slaeforms/templates/layout1.html create mode 100644 slaeforms/templates/styles.css diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..96fca6d --- /dev/null +++ b/.gitignore @@ -0,0 +1,14 @@ +.venv/ + +*.pyc +__pycache__/ + +instance/ + +.pytest_cache/ +.coverage +htmlcov/ + +dist/ +build/ +*.egg-info/ \ No newline at end of file diff --git a/slaeforms/app.py b/slaeforms/app.py new file mode 100644 index 0000000..987dcfb --- /dev/null +++ b/slaeforms/app.py @@ -0,0 +1,46 @@ +import sys +from flask import Flask, redirect, url_for, request +from flask import render_template +from flask_sqlalchemy import SQLAlchemy +from sqlalchemy.orm import DeclarativeBase +from sqlalchemy import Integer, String +from sqlalchemy.orm import Mapped, mapped_column + + +app = Flask(__name__) +# configure the SQLite database, relative to the app instance folder +app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///database.db" +# initialize the app with the extension +db.init_app(app) +data = {} + +class Base(DeclarativeBase): + pass + +class User(db.Model): + id: Mapped[int] = mapped_column(primary_key=True) + username: Mapped[str] = mapped_column(unique=True) + email: Mapped[str] + +with app.app_context(): + db.create_all() + +db = SQLAlchemy(model_class=Base) + +@app.route("/", methods=["GET", "POST"]) +def testpage(): + global data + if request.method == "POST": + data = request.form + print(data) + return redirect(url_for("datapage")) + return render_template( + "layout1.html" + ) + +@app.route("/data") +def datapage(): + return render_template( + "data.html", + value = str(data) + ) \ No newline at end of file diff --git a/slaeforms/database.db b/slaeforms/database.db new file mode 100644 index 0000000000000000000000000000000000000000..b111f422dc31492adaa9d8257de3bee3a05eecf3 GIT binary patch literal 4096 zcmWFz^vNtqRY=P(%1ta$FlG>7U}R))P*7lCU|@t|AO!{>KB<6_K`-qkFG!aFsai+X qkA}c#2#kinXb6mkz-S1JhQMeDjE2By2#kinXb6mkz-S0iD+B;2p$A_8 literal 0 HcmV?d00001 diff --git a/slaeforms/db.py b/slaeforms/db.py new file mode 100644 index 0000000..ed0fdf3 --- /dev/null +++ b/slaeforms/db.py @@ -0,0 +1,9 @@ +import click +from flask import current_app, g +from flask_sqlalchemy import SQLAlchemy +from sqlalchemy.orm import DeclarativeBase + +class Base(DeclarativeBase): + pass + +db = SQLAlchemy(model_class=Base) \ No newline at end of file diff --git a/slaeforms/schema.sql b/slaeforms/schema.sql new file mode 100644 index 0000000..b85b6cd --- /dev/null +++ b/slaeforms/schema.sql @@ -0,0 +1,17 @@ +DROP TABLE IF EXISTS user; +DROP TABLE IF EXISTS post; + +CREATE TABLE user ( + id INTEGER PRIMARY KEY AUTOINCREMENT, + username TEXT UNIQUE NOT NULL, + password TEXT NOT NULL +); + +CREATE TABLE post ( + id INTEGER PRIMARY KEY AUTOINCREMENT, + author_id INTEGER NOT NULL, + created TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, + title TEXT NOT NULL, + body TEXT NOT NULL, + FOREIGN KEY (author_id) REFERENCES user (id) +); \ No newline at end of file diff --git a/slaeforms/static/attributions.txt b/slaeforms/static/attributions.txt new file mode 100644 index 0000000..b44b7c1 --- /dev/null +++ b/slaeforms/static/attributions.txt @@ -0,0 +1,3 @@ +https://jamesalvarez.co.uk/blog/how-to-make-responsive-likert-scales-in-css-(like-qualtrics)/ + + diff --git a/slaeforms/static/styles.css b/slaeforms/static/styles.css new file mode 100644 index 0000000..c1d137b --- /dev/null +++ b/slaeforms/static/styles.css @@ -0,0 +1,94 @@ +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #a4b5ff; + color: #000000; + font-family: Tahoma; + font-size: 16px; + } + +.columncontainer { + display: flex; +} + +.columnleft { + width: 100%; + border: 3px solid black; +} +.columnright { + width: 100%; + border: 3px solid black; +} + +iframe { + display:block; + margin: auto; +} + + +.centertext { + text-align: center; +} + +h2,h3 { + text-align: center; +} + + +.likert { + --likert-rows: 5; + margin: auto; + text-align: center; + display: inline-grid; + max-width: 900px; + grid-auto-rows: 1fr; + gap: 1em; + grid-template-columns: repeat(var(--likert-rows), minmax(0, 1fr)); +} + +@media only screen and (max-width: 680px) { + .likert { + grid-template-columns: minmax(0, 400px); + justify-content: center; + } +} + +.likert input { + max-width: 250px; + position: fixed; + opacity: 0; + pointer-events: none; +} + +.likercontainer{ + margin: 30px auto; + text-align: center; +} +.likert span { + border-radius: 5px; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + box-sizing: border-box; + width: 100%; + height: 100%; + padding: 20px; + background: #dcdcdc; + transition: background .2s ease-in-out; +} + +.likert input:checked + span { + outline: black auto 1px; + background: transparent; +} + +.likert input:focus + span { + outline: -webkit-focus-ring-color auto 1px; +} + +.likert span:hover { + background: #f1f1f1; + outline: lightgrey auto 0.5px; +} \ No newline at end of file diff --git a/slaeforms/templates/data.html b/slaeforms/templates/data.html new file mode 100644 index 0000000..67a26f7 --- /dev/null +++ b/slaeforms/templates/data.html @@ -0,0 +1,15 @@ + + + + + + + Testform + + + +

Task number 1

+

The Likertscale value is: {{ value }}

+ + + \ No newline at end of file diff --git a/slaeforms/templates/layout1.html b/slaeforms/templates/layout1.html new file mode 100644 index 0000000..1b214cb --- /dev/null +++ b/slaeforms/templates/layout1.html @@ -0,0 +1,54 @@ + + + + + + + Testform + + + +

Task number 1

+
+ +
+

Video 1

+ +
+
+

Video 2

+ +
+
+
+
+
+ + + + + +
+
+
+
+ + + + + +
+
+

+
+ + + \ No newline at end of file diff --git a/slaeforms/templates/styles.css b/slaeforms/templates/styles.css new file mode 100644 index 0000000..c1d137b --- /dev/null +++ b/slaeforms/templates/styles.css @@ -0,0 +1,94 @@ +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #a4b5ff; + color: #000000; + font-family: Tahoma; + font-size: 16px; + } + +.columncontainer { + display: flex; +} + +.columnleft { + width: 100%; + border: 3px solid black; +} +.columnright { + width: 100%; + border: 3px solid black; +} + +iframe { + display:block; + margin: auto; +} + + +.centertext { + text-align: center; +} + +h2,h3 { + text-align: center; +} + + +.likert { + --likert-rows: 5; + margin: auto; + text-align: center; + display: inline-grid; + max-width: 900px; + grid-auto-rows: 1fr; + gap: 1em; + grid-template-columns: repeat(var(--likert-rows), minmax(0, 1fr)); +} + +@media only screen and (max-width: 680px) { + .likert { + grid-template-columns: minmax(0, 400px); + justify-content: center; + } +} + +.likert input { + max-width: 250px; + position: fixed; + opacity: 0; + pointer-events: none; +} + +.likercontainer{ + margin: 30px auto; + text-align: center; +} +.likert span { + border-radius: 5px; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + box-sizing: border-box; + width: 100%; + height: 100%; + padding: 20px; + background: #dcdcdc; + transition: background .2s ease-in-out; +} + +.likert input:checked + span { + outline: black auto 1px; + background: transparent; +} + +.likert input:focus + span { + outline: -webkit-focus-ring-color auto 1px; +} + +.likert span:hover { + background: #f1f1f1; + outline: lightgrey auto 0.5px; +} \ No newline at end of file