commit 4fc6765b1d8030069c823b2eeeac018d5c05e69a Author: Jan Date: Wed Mar 13 15:56:34 2024 +0100 First commit, already played around a bit 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 0000000..b111f42 Binary files /dev/null and b/slaeforms/database.db differ 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