diff --git a/.gitignore b/.gitignore index 96fca6d..6178e7c 100644 --- a/.gitignore +++ b/.gitignore @@ -11,4 +11,6 @@ htmlcov/ dist/ build/ -*.egg-info/ \ No newline at end of file +*.egg-info/ + +*.code-workspace \ No newline at end of file diff --git a/slaeforms/app.py b/slaeforms/app.py index 66d7574..a02f65c 100644 --- a/slaeforms/app.py +++ b/slaeforms/app.py @@ -2,16 +2,19 @@ import sys import json import random import base64 -from flask import Flask, redirect, url_for, request, session, make_response, jsonify, send_from_directory +from flask import Flask, redirect, url_for, request, session, make_response, jsonify, send_file from flask import render_template from flask_sqlalchemy import SQLAlchemy from sqlalchemy import Integer, String, Column, Float from datetime import datetime import uuid from sqlalchemy.exc import SQLAlchemyError -from sqlalchemy import inspect +from sqlalchemy import select, join from sqlalchemy.orm import DeclarativeBase +from flask_wtf.csrf import CSRFProtect import os +import csv +from zipfile import ZipFile random_order = True # activate environment: cd C:\Users\Jan\Google Drive\Master Stuff\Code\SLAEForms Testing\.venv\Scripts\ @@ -29,50 +32,29 @@ db = SQLAlchemy(model_class=Base) app = Flask(__name__) # configure the database, give it a path (it will be in the instances folder) app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///database.db" +app.config["PERMANENT_SESSION_LIFETIME"] = 10800 #3 Stunden, 10800 sekunden db.init_app(app) #set the secret key (TODO change this for final deployment) app.secret_key = b"29fe9e8edd407c5491d4f1c05632d9fa33e26ed8734a3f5e080ebac3772a555a" UPLOAD_FOLDER = 'uploads' +EXPORT_FOLDER = 'exports' +PASSWORD = '#1ACGmsjd' - - - -#---------testing JSON Stuff -#open the json file with the config -testconfigfile = open("singleformconfig.json", encoding='utf-8') -#convert it to dict -testconfig = json.load(testconfigfile) -testconfigfile.close() -# get the questions: Questions is a list that contains the keys of the dictionary -questions = list(testconfig) - - - - +#csrf = CSRFProtect(app) #enable CSRF protection globally #------------------------------------------------------------------------ -# Setting up DB Models, response -> should be removed eventually and replaced by json files and automatic generation ---------------------------- +# Setting up DB Models -# create the model for the response table -class Response(db.Model): - id = db.Column("id",db.UUID(as_uuid=True), primary_key=True, nullable=False) - user_id = db.Column("user_id",db.UUID(as_uuid=True), nullable=False) - question_title = db.Column("question_title",db.String(30)) - likert_result = db.Column("likert_result",db.Integer, nullable=False) - notes = db.Column("notes",db.String(200)) - date_created = db.Column("date_created",db.DateTime) - def __repr__(self) -> str: - return "" % self.id - -# This table is always created +# This table is always created, tracks all users class User(db.Model): user_id = db.Column("user_id",db.UUID(as_uuid=True), primary_key=True, nullable=False) device_id = db.Column("device_id",db.UUID(as_uuid=True), nullable=False) question_order = db.Column("question_order",db.String(60)) date_created = db.Column("date_created",db.DateTime, default=datetime.today()) # todo test if this default works + form_completed = db.Column("form_completed",db.Boolean, default=False) def __repr__(self) -> str: return "" % self.user_id @@ -84,13 +66,8 @@ except SQLAlchemyError as e: print("Error occurred during database creation:", str(e)) - -# -------Testing the actual final form from json------------------------------------------------ - - - - - +#----------------------------------------------------------------------------- +#open, parse and execute json file #open the json file with the config configfile = open("default.json", encoding='utf-8') #todo replace with other name @@ -102,10 +79,9 @@ db_tables = {} # contains all dynamically created tables, key = table/classname #TODO insert code to create all tables def create_json_tables(): - print(config) + #print(config) for block_key, block_content in config.items(): if "database_table" in block_content: - print("debug") if not (block_content["database_table"]["table_name"] in db_tables): print("New table: \n {table}".format(table=block_content["database_table"]["table_name"])) db_tables[block_content["database_table"]["table_name"]]=create_model_class(block_content["database_table"]) @@ -115,14 +91,14 @@ def create_json_tables(): def create_model_class(schema): class_name = schema["table_name"].capitalize() - print("creating table class: {class_name}".format(class_name=class_name)) + #print("creating table class: {class_name}".format(class_name=class_name)) # Define class attributes dynamically attributes = {"__tablename__": schema["table_name"]} # id as key and date as standard fields attributes["id"] = Column("id",db.UUID(as_uuid=True), primary_key=True, nullable=False) - attributes["user_id"] = Column("user_id",db.UUID(as_uuid=True), primary_key=True, nullable=False) + attributes["user_id"] = Column("user_id",db.UUID(as_uuid=True), nullable=False) attributes["date_created"] = db.Column("date_created",db.DateTime) attributes["stimulus_name"] = db.Column("stimulus_name",db.String(30)) @@ -137,7 +113,7 @@ def create_model_class(schema): attributes[column_name] = Column(column_name,column_type, nullable=column_info["nullable"]) - print("attributes of the table: ",attributes) + #print("attributes of the table: ",attributes) # Create the model class return type(class_name, (db.Model,), attributes) @@ -153,13 +129,27 @@ try: except SQLAlchemyError as e: print("Error occurred during database creation:", str(e)) -@app.route("/teststart", methods=["GET", "POST"]) -def teststartpage(): + +#------------------------------------------------------------------------------ +#actual page logic with start, form and send + +#@app.route("/popuptest", methods=["GET"]) +def popuptest(): + + return render_template( + "popuptest.html" + ) + + +@app.route("/start", methods=["GET", "POST"]) +def startpage(): + session.permanent = False if not "slaeform_device_id" in session: # If this device was not seen, remember it. new_device_id = uuid.uuid4() session["slaeform_device_id"] = new_device_id session["agreed_to_tos"] = False + if request.method == "POST": @@ -176,11 +166,14 @@ def teststartpage(): session["current_block_name"] = session["block_names"][session["current_block_index"]] session["number_of_blocks"] = len(session["block_names"]) current_block = config[session["current_block_name"]] + session["number_of_stimuli"] = 0 # if the block has stimuli, get how many if "stimuli" in current_block: - session["number_of_stimuli"] = len(list(current_block["stimuli"]["list"])) - + if current_block["stimuli"]["type"] == "single_video" or current_block["stimuli"]["type"] == "empty": + session["number_of_stimuli"] = len(list(current_block["stimuli"]["list"])) + elif current_block["stimuli"]["type"] == "double_video": + session["number_of_stimuli"] = len(list(current_block["stimuli"]["list_1"])) print("number of blocks: ",len(session["block_names"])) @@ -188,6 +181,7 @@ def teststartpage(): print(session["block_names"]) for name in block_names: + print("block: ",name) if config[name]["type"] == "TaskTemplate" and ("stimuli" in current_block): match config[name]["stimuli"]["type"]: case "single_video": @@ -196,6 +190,15 @@ def teststartpage(): if config[name]["stimuli"]["order"] == "random": random.shuffle(order) #in random order session["block_order"][name] = order + case "double_video": + order = [] # order = list of stimuli keys + list_1 = list(config[name]["stimuli"]["list_1"]) + list_2 = list(config[name]["stimuli"]["list_2"]) + for i in range(len(list(config[name]["stimuli"]["list_1"]))): + order.append((list_1[i], list_2[i])) + print("order: ",order) + #TODO random is not implemented here + session["block_order"][name] = order case "empty": order = list(config[name]["stimuli"]["list"]) # order = list of simuli keys print("order: ",order) @@ -214,11 +217,12 @@ def teststartpage(): user_id = new_user_id question_order = str(session["block_order"]) date = datetime.today() - new_user = User(user_id=user_id, device_id=device_id,question_order=question_order,date_created = date) #,question_order=question_order + new_user = User(user_id=user_id, device_id=device_id,question_order=question_order,date_created = date,form_completed=False) #,question_order=question_order db.session.add(new_user) db.session.commit() + print("block order: {order}".format(order=session["block_order"])) try: db.session.add(new_user) @@ -226,22 +230,27 @@ def teststartpage(): except: return "There was a problem while adding the user to the Database" - return redirect("/jsonform") + return redirect("/form") return render_template( "teststartpage.html" ) +@app.route("/endpage") +def endpage(): + print("Form is done, sent to endpage") + return render_template("endpage.html") -@app.route("/jsonform") -def jsonform(): + +@app.route("/form") +def form(): #user is not yet registered and should not be here if not "slaeform_user_id" in session: - return redirect("/teststart") #TODO replace this later with actual startpage + return redirect("/start") #TODO replace this later with actual startpage current_block = config[session["current_block_name"]] - print("jsonform") + print("form") print("current_block_name: {current_block_name}".format(current_block_name=session["current_block_name"])) print("current_block_index: {current_block_order}".format(current_block_order=session["current_block_index"])) print("current_stimulus: {current_stimulus}".format(current_stimulus=session["current_stimulus_index"])) @@ -249,10 +258,14 @@ def jsonform(): #print("current Blockname: {blockname}, current block index: {blockindex}, current stim index: {stimulusindex}".format(blockname=session["current_block_name"], # blockindex=session["current_block_index"], # stimulusindex=session["current_stimulus_index"] ) ) + infovideo = None + if "infovideo" in current_block: + infovideo = current_block["infovideo"] # erster Fall: SinglePage if current_block["type"] == "SinglePage": return render_template(current_block["template"]) + #zweiter Fall, empty TaskTemplate if current_block["type"] == "TaskTemplate" and current_block["stimuli"]["type"] == "empty": @@ -265,7 +278,8 @@ def jsonform(): stimuli=current_block_stimuli, stimulus_type=stimulus_type, current_stimulus=current_stimulus, - questions=current_block["questions"] + questions=current_block["questions"], + infovideo=infovideo ) @@ -284,13 +298,18 @@ def jsonform(): case "single_video": stimulus_configuration["video_url"] = config[session["current_block_name"]]["stimuli"]["list"][current_stimulus] print("-------------videourl: ", stimulus_configuration["video_url"]) + case "double_video": + stimulus_configuration["video_url1"] = config[session["current_block_name"]]["stimuli"]["list_1"][current_stimulus[0]] + stimulus_configuration["video_url2"] = config[session["current_block_name"]]["stimuli"]["list_2"][current_stimulus[1]] + return render_template( "standard_template.html", stimuli=current_block_stimuli, stimulus_type=stimulus_type, current_stimulus=current_stimulus, stimulus_configuration=stimulus_configuration, - questions=current_block["questions"] + questions=current_block["questions"], + infovideo=infovideo ) @@ -299,16 +318,18 @@ def jsonform(): return "Error, none of the Blocks triggered" -@app.route("/send_json", methods=["POST"]) -def sendpage_json(): - print("send_json") +@app.route("/send", methods=["POST"]) +def sendpage(): + print("send") # Do I need to write to a table at all? # I can figure it out by checking if the current block has a database field, that is best if not ("database_table" in config[session["current_block_name"]]): #it has no database field, so nothing to receive # so just move on print("no database table") update_session() - return redirect("/jsonform") + return redirect("/form") + + # now to if it has a database field @@ -319,10 +340,26 @@ def sendpage_json(): session_user_id = session["slaeform_user_id"] new_id = uuid.uuid4() date = datetime.today() - stimulus_name = session["current_stimulus_name"] + stimulus_name = str(session["current_stimulus_name"]) new_entry = db_tables[table_name](id=new_id,user_id = session_user_id,date_created = date,stimulus_name=stimulus_name) + # handle possible Video that was send + if 'recordedVideo' in request.files: + video = request.files['recordedVideo'] + formatted_date = date.strftime("%Y.%m.%d %H-%M-%S") + print("date: ", date) + video_name = str(session_user_id) + "_" + session["current_block_name"] + "_" + session["current_stimulus_name"] + "_" + str(formatted_date) + ".webm" + path = os.path.join(UPLOAD_FOLDER, video_name) + print("path: ",path) + os.makedirs(UPLOAD_FOLDER, exist_ok=True) + video.save(path) + + if 'recordedVideo' in request.files: + if hasattr(new_entry, "video_upload"): + setattr(new_entry, "video_upload", video_name) + + for key, value in request.form.items(): print("hasattr key: ", key) if hasattr(new_entry, key): @@ -348,22 +385,39 @@ def sendpage_json(): os.makedirs(UPLOAD_FOLDER, exist_ok=True) video.save(path) - + if (session["current_block_index"] == session["number_of_blocks"]-1) and (session["current_stimulus_index"] >= session["number_of_stimuli"]-1): + #update the database entry, the form is completed + user = db.session.query(User).filter_by(user_id=session["slaeform_user_id"]).one() + user.form_completed = True + print("updated db entry for form_completed") + # This user is done, so we can remove it from the session + session.pop("slaeform_user_id") + try: + db.session.commit() + except Exception as e: + print("Error occurred: {e}".format(e=str(e))) + return "There was a problem while updating the user" + return redirect("/endpage") + # Now move to the next stimulus or block update_session() print("now redirect and reload the page") - return redirect("/jsonform") + return redirect("/form") def update_session(): + print("update session") if "stimuli" in config[session["current_block_name"]]: # if there are stimuli in this block if session["current_stimulus_index"] < session["number_of_stimuli"]-1: + print("there are still stimuli left") # if there are still stimuli left, keep going through them session["current_stimulus_index"] += 1 # set the name of the current stimulus session["current_stimulus_name"] = session["block_order"][session["current_block_name"]][session["current_stimulus_index"]] else: + print("here are no stimuli left") + session["number_of_stimuli"] = 0 # if there are no stimuli left.. if(session["current_block_index"] < session["number_of_blocks"]-1): # go to next block if possible @@ -371,7 +425,7 @@ def update_session(): session["current_block_name"] = session["block_names"][session["current_block_index"]] session["current_stimulus_index"] = 0 if "stimuli" in config[session["current_block_name"]]: - session["number_of_stimuli"] = len(list(config[session["current_block_name"]]["stimuli"]["list"])) + session["number_of_stimuli"] = len(session["block_order"][session["current_block_name"]]) else: # if there arent any stimuli, go to the next block @@ -381,152 +435,115 @@ def update_session(): session["current_block_index"] += 1 session["current_block_name"] = session["block_names"][session["current_block_index"]] - - print("---Session updated---") + if "stimuli" in config[session["current_block_name"]]: + # set the name of the current stimulus + session["current_stimulus_name"] = session["block_order"][session["current_block_name"]][session["current_stimulus_index"]] + + print("---Session updated-----------------------------------------------") print("current_block_index / number_of_blocks: {current_block_index} / {number_of_blocks}".format(current_block_index=session["current_block_index"],number_of_blocks=session["number_of_blocks"])) print("current_block_name: ", session["current_block_name"]) print("current_stimulus_index: ", session["current_stimulus_index"]) print("Current number_of_stimuli: ", session["number_of_stimuli"]) + +#@app.route("/update") +def update(): - - - - - -# Actual main code for Form etc -------------------------------------------------------------- - -@app.route("/video") -def videopage(): - - return render_template( - #"videorecorder3.html" - "myvideotemplate.html" - ) - -@app.route("/send_video", methods=["POST"]) -def send_video(): - data_url = request.json['dataUrl'] - data = data_url.split(',')[1] - with open('video.webm', 'wb') as f: - f.write(base64.b64decode(data)) - return jsonify({'message': 'Video saved successfully'}) - - - -@app.route("/send", methods=["POST"]) -def sendpage(): - session_user_id = session["slaeform_user_id"] - likert_score = request.form["likertscale"] - text_input = request.form["feedback"] - question_title = session["current_question"] - new_id = uuid.uuid4() - date = datetime.today() - print("new idea: {new_id} ".format(new_id=new_id)) - new_response = Response(id=new_id,user_id = session_user_id, question_title = question_title,likert_result = likert_score,notes = text_input, date_created = date) - + print("Current Session: ",session) try: - db.session.add(new_response) + user = db.session.query(User).filter_by(user_id=session["slaeform_user_id"]).one() + user.form_completed = True db.session.commit() - return redirect("/form") - except: - return "There was a problem while adding the response to the Database" + except Exception as e: + print("Error occurred: {e}".format(e=str(e))) + return "There was a problem while updating the user" - -#TODO this is bugged rn, it will skip to the next question when refreshed. -#Move the removal of the first element to the send function to fix this -@app.route("/form", methods=["GET", "POST"]) -def formpage(): - #user is not yet registered and should not be here - if not "slaeform_user_id" in session: - return redirect("/start") + return "db entry updated!" - #TODO fill in code that determins at which question the user is - print("form starts, the sessionorder rn:") - print(session["question_order"]) - if not session["question_order"]: - print("---------------question order is empty------------") - return redirect("/data") - - print("pop the first element") - current_question = session["question_order"].pop(0) - session["current_question"] = current_question - print(current_question) - print("the new sessionorder rn:") - print(session["question_order"]) - - return render_template( - "layout2.html", - config=testconfig, - current_question = current_question, - videotype=testconfig[current_question]["type"], - video_url= testconfig[current_question]["video1"], - blocks = testconfig[current_question]["blocks"] - ) - - -@app.route("/start", methods=["GET", "POST"]) -def startpage(): - if not "slaeform_device_id" in session: - # If this device was not seen, remember it. - new_device_id = uuid.uuid4() - session["slaeform_device_id"] = new_device_id - session["agreed_to_tos"] = False - - if request.method == "POST": - #right now if a user that has an active session goes to the startpage again and accepts tos - #it will just start another session and discard the previous session - - # get a random question order - if random_order: - order = questions - random.shuffle(order) - else: - order = questions - session["question_order"] = order - - - #save the new user to the database and the session - session["agreed_to_tos"] = True - new_user_id = uuid.uuid4() - session["slaeform_user_id"] = new_user_id - device_id = session["slaeform_device_id"] - user_id = new_user_id - question_order = str(order) - date = datetime.today() - new_user = User(user_id=user_id, device_id=device_id,question_order=question_order,date_created = date) #,question_order=question_order - - db.session.add(new_user) - db.session.commit() - return redirect("/form") - """ - try: - db.session.add(new_user) - db.session.commit() - return redirect("/form") - except: - return "There was a problem while adding the user to the Database" """ - - return render_template( - "startpage.html" - ) - - - - - - # Database stuff------------------------------------------------------------------------------ +def zipdir(path, ziph): + # ziph is zipfile handle + for root, dirs, files in os.walk(path): + for file in files: + ziph.write(os.path.join(root, file), + os.path.relpath(os.path.join(root, file), + os.path.join(path, '..'))) + +#create all csvs +def create_all_csvs(): + meta = db.metadata + tables = meta.tables.keys() + + for table_name in tables: + create_csv(meta.tables[table_name], table_name) + + +# export CSV +@app.route("/export_all_tables") +def export_all_tables(): + if not session.get("logged_in"): + return redirect("/login") + + create_all_csvs() + + with ZipFile('zip_exports/all_tables.zip', 'w') as zipf: #no compression, need to add zipfile.ZIP_DEFLATED for compression + zipdir('exports/', zipf) + + return send_file("zip_exports/all_tables.zip", as_attachment=False, download_name="all_tables.zip") + +# export CSV +@app.route("/export_all_videos") +def export_all_videos(): + if not session.get("logged_in"): + return redirect("/login") + + with ZipFile('zip_exports/all_videos.zip', 'w') as zipf: #no compression, need to add zipfile.ZIP_DEFLATED for compression + zipdir('uploads/', zipf) + + return send_file("zip_exports/all_videos.zip", as_attachment=False, download_name="all_tables.zip") + + +def create_csv(table, filename): + filename = filename + ".csv" + # Query all data from the table + data = db.session.query(table).all() + + # Get the column names from the model + column_names = [column.name for column in table.columns] + + # Open a CSV file and write data + path = os.path.join(EXPORT_FOLDER, filename) + with open(path, 'w', newline='') as file: + writer = csv.writer(file) + writer.writerow(column_names) # Write header + for row in data: + writer.writerow([getattr(row, column) for column in column_names]) + + +# export CSV +@app.route("/export_csv/") +def export_csv(table_name): + + meta = db.metadata + + try: + create_csv(meta.tables[table_name], table_name) + except Exception as e: + return f'Error occurred: {str(e)}', 500 + + return redirect("/") + # the contents of all tables @app.route("/table_contents") def table_contents(): + if not session.get("logged_in"): + return redirect("/login") meta = db.metadata #meta.reflect(db.engine) # Uncomment this to also get the hidden tables, but this crashes rn tables = meta.tables.keys() table_contents = {} - #print(tables) for table_name in tables: table = meta.tables[table_name] @@ -553,13 +570,32 @@ def table_contents(): @app.route('/show_tables') def show_tables(): + if not session.get("logged_in"): + return redirect("/login") meta = db.metadata meta.reflect(db.engine) tables = meta.tables return render_template('show_tables.html', tables=tables) + # Root page ----------------------------- +@app.route("/login", methods=["GET","POST"]) +def login(): + + if request.method == "POST": + if request.form["password"] == PASSWORD: + session["logged_in"] = True + return redirect("/") + + return render_template("login.html") + + +@app.route("/logout") +def logout(): + session["logged_in"] = False + return redirect("/") + def has_no_empty_params(rule): defaults = rule.defaults if rule.defaults is not None else () arguments = rule.arguments if rule.arguments is not None else () @@ -579,7 +615,7 @@ def all_links(): # delete all tables as last link -------------------------- # Route to delete all entries -@app.route('/delete_json_tables', methods=['GET']) +#@app.route('/delete_json_tables', methods=['GET']) def delete_json_tables(): try: meta = db.metadata @@ -603,6 +639,8 @@ def delete_json_tables(): # Route to delete all entries @app.route('/delete_all_entries', methods=['GET']) def delete_all_entries(): + if not session.get("logged_in"): + return redirect("/login") # here I could also use a "drop_all()", that works jsut like create all from the creation part # this together with the reflect could drop actually all tables try: @@ -620,4 +658,4 @@ def delete_all_entries(): db.session.close() if __name__ == '__main__': - app.run(debug=True) \ No newline at end of file + app.run() \ No newline at end of file diff --git a/slaeforms/attributions.txt b/slaeforms/attributions.txt index d76b728..919df61 100644 --- a/slaeforms/attributions.txt +++ b/slaeforms/attributions.txt @@ -5,6 +5,10 @@ https://jamesalvarez.co.uk/blog/how-to-make-responsive-likert-scales-in-css-(lik # Rootpage that shows all defined routes https://stackoverflow.com/questions/13317536/get-list-of-all-routes-defined-in-the-flask-app +# Zip file of whole directory +https://stackoverflow.com/questions/1855095/how-to-create-a-zip-archive-of-a-directory + + Licenses: diff --git a/slaeforms/defaul_wip.json b/slaeforms/defaul_wip.json index 5d4b74f..0f7123e 100644 --- a/slaeforms/defaul_wip.json +++ b/slaeforms/defaul_wip.json @@ -1,20 +1,52 @@ { - "Block_1":{ - "type": "SinglePage", - "template": "startpage.html", - "database_table" :{ - "TableName": "Datenschutzerklaerung", - "Fields": { - } - } - }, - "Block 2":{ + "Block 0":{ "type": "TaskTemplate", - "tempalte": "tempaltetest1.html", - "name" : "Block2Responses", - "database_table": { - "TableName": "Datenschutzerklaerung", - "Fields": { + "tempalte": "standard_template.html", + "stimuli":{ + "type":"double_video", + "list_1":{ + "video_1":"https://www.youtube-nocookie.com/embed/VtnwHmabyzo?si=H3rrG-GHtlSymR70", + "video_2":"https://www.youtube-nocookie.com/embed/EL76Ok4r0aQ?si=hqUm8eUUfX39NN4L", + "video_3":"https://www.youtube-nocookie.com/embed/XTMIomsXxKM?si=r2zB6OKERH6Jdpi6" + }, + "list_2":{ + "video_1":"https://www.youtube-nocookie.com/embed/VtnwHmabyzo?si=H3rrG-GHtlSymR70", + "video_2":"https://www.youtube-nocookie.com/embed/EL76Ok4r0aQ?si=hqUm8eUUfX39NN4L", + "video_3":"https://www.youtube-nocookie.com/embed/XTMIomsXxKM?si=r2zB6OKERH6Jdpi6" + }, + "configuration":{ + "embed":"yt" + } + }, + "questions":{ + "question1":{ + "type": "likert", + "name": "likertscale", + "text": "How would you rate this video?", + "required": "true", + "points":{ + "p1":{ + "value":"1", + "text":"I dont like it at all" + }, + "p2":{ + "value":"2", + "text":"I am indifferent" + }, + "p3":{ + "value":"3", + "text":"I like it a lot" + } + } + } + }, + "database_table" :{ + "table_name": "double_video_test", + "fields": { + "likertscale":{ + "type": "integer", + "nullable": "false" + } } } } diff --git a/slaeforms/default.json b/slaeforms/default.json index 44db713..581e59a 100644 --- a/slaeforms/default.json +++ b/slaeforms/default.json @@ -1,89 +1,15 @@ { - "Block 4":{ + "Block 1": { "type": "TaskTemplate", "tempalte": "standard_template.html", - "number_of_pages":"3", - "stimuli":{ - "type":"single_video", - "order": "random", - "list":{ - "video_1":"https://www.youtube-nocookie.com/embed/VtnwHmabyzo?si=H3rrG-GHtlSymR70", - "video_2":"https://www.youtube-nocookie.com/embed/EL76Ok4r0aQ?si=hqUm8eUUfX39NN4L", - "video_3":"https://www.youtube-nocookie.com/embed/XTMIomsXxKM?si=r2zB6OKERH6Jdpi6" - }, - "configuration":{ - "embed":"yt" + "stimuli": { + "type": "empty", + "list": { + "empty_stimulus": "" } }, - "questions":{ - "question1":{ - "type": "likert", - "name": "likertscale", - "text": "How would you rate this video?", - "required": "true", - "points":{ - "p1":{ - "value":"1", - "text":"I dont like it at all" - }, - "p2":{ - "value":"2", - "text":"I dont like it" - }, - "p3":{ - "value":"3", - "text":"I am indifferent" - }, - "p4":{ - "value":"4", - "text":"I like it" - }, - "p5":{ - "value":"5", - "text":"I like it a lot" - } - } - }, - "question2":{ - "type": "textinput", - "name": "text_feedback", - "text": "Here you can give us Feedback", - "required": "false", - "size": "250" - }, - "question3":{ - "type": "videoinput", - "text": "Here you can give us Feedback as video", - "name": "video_feedback", - "required": "false" - } - }, - "database_table" :{ - "table_name": "default_block3_test", - "fields": { - "likertscale":{ - "type": "integer", - "nullable": "false" - }, - "text_feedback":{ - "type": "string", - "size": "250", - "nullable": "true" - } - } - } - }, - "Block 3":{ - "type": "TaskTemplate", - "tempalte": "standard_template.html", - "stimuli":{ - "type":"empty", - "list":{ - "empty_stimulus":"" - } - }, - "questions":{ - "question1_alter":{ + "questions": { + "question1_alter": { "type": "numberinput", "name": "alter", "text": "Alter:", @@ -91,74 +17,74 @@ "min": "1", "max": "120" }, - "question2_geschlecht":{ + "question2_geschlecht": { "type": "dropdowninput", "name": "geschlecht", "text": "Geschlecht:", "required": "true", "defaulttext": "", - "points":{ - "männlich":{ - "value":"Männlich", - "text":"Männlich" + "points": { + "männlich": { + "value": "Männlich", + "text": "Männlich" }, - "weiblich":{ - "value":"Weiblich", - "text":"Weiblich" + "weiblich": { + "value": "Weiblich", + "text": "Weiblich" }, - "divers":{ - "value":"Divers", - "text":"Divers" + "divers": { + "value": "Divers", + "text": "Divers" }, - "keine_angabe":{ - "value":"keine_angabe", - "text":"Keine Angabe" + "keine_angabe": { + "value": "keine_angabe", + "text": "Keine Angabe" } } }, - "question3_hoerstatus":{ + "question3_hoerstatus": { "type": "dropdowninput", "name": "hoerstatus", "text": "Hörstatus:", "required": "true", "defaulttext": "", - "points":{ - "hörend":{ - "value":"Hörend", - "text":"Hörend" + "points": { + "hörend": { + "value": "Hörend", + "text": "Hörend" }, - "schwerhörig":{ - "value":"Schwerhörig", - "text":"Schwerhörig" + "schwerhörig": { + "value": "Schwerhörig", + "text": "Schwerhörig" }, - "gehörlos":{ - "value":"Gehörlos", - "text":"Gehörlos" + "gehörlos": { + "value": "Gehörlos", + "text": "Gehörlos" } } }, - "question4_bevorzugte_kommunikation":{ + "question4_bevorzugte_kommunikation": { "type": "dropdowninput", "name": "bevorzugte_kommunikation", "text": "Bevorzugte Kommunikationsform:", "required": "true", "defaulttext": "", - "points":{ - "gesprochen":{ - "value":"Gesprochene Sprache", - "text":"Gesprochene Sprache" + "points": { + "gesprochen": { + "value": "Gesprochene Sprache", + "text": "Gesprochene Sprache" }, - "text":{ - "value":"Text", - "text":"Text" + "text": { + "value": "Text", + "text": "Text" }, - "gebärdensprache":{ - "value":"Gebärdensprache", - "text":"Gebärdensprache" + "gebärdensprache": { + "value": "Gebärdensprache", + "text": "Gebärdensprache" } } }, - "question5_gebeardenzeitraum":{ + "question5_gebeardenzeitraum": { "type": "numberinput", "name": "gebärdenzeitraum", "text": "Wie viele Jahre verwenden sie schon Gebärdensprache:", @@ -167,7 +93,7 @@ "max": "100", "step": "0.5" }, - "question6_sprachkompetenz":{ + "question6_sprachkompetenz": { "type": "numberinput", "name": "gebärdensprachkompetenz", "text": "Wie schätzen sie ihre Gebärdensprachkompetenz ein (1-10):", @@ -176,53 +102,218 @@ "max": "10" } }, - "database_table" :{ - "table_name": "default_demographic_test", + "infovideo": { + "videourl": "https://www.youtube-nocookie.com/embed/F_w50c5Us3Y?si=-H07MmQ4lYOC2Bwh", + "infotext": "Hier wird in Zukunft ein Erklärtext stehen, in dem die Fragestellungen erklärt werden. \n Dazu werden alle Fragen der Seite einzeln durchgegangen und einfach erklärt. Zum Beispiel wird hier erklärt, dass man um Feedback zu geben, ein Video aufnehmen kann. Dazu drückt man auf den Knopf mit dem Videokamera Symbol. Danach muss man oben links am Browser bestätigen, dass der Browser auf die Kamera zugreifen darf.", + "configuration": { + "embed": "yt" + } + }, + "database_table": { + "table_name": "demographic_data", "fields": { - "alter":{ + "alter": { "type": "integer", "nullable": "false" }, - "geschlecht":{ + "geschlecht": { "type": "string", "size": "14", "nullable": "false" }, - "hoerstatus":{ + "hoerstatus": { "type": "string", "size": "14", "nullable": "false" }, - "bevorzugte_kommunikation":{ + "bevorzugte_kommunikation": { "type": "string", "size": "22", "nullable": "false" }, - "gebärdenzeitraum":{ + "gebärdenzeitraum": { "type": "float", "nullable": "false" }, - "gebärdensprachkompetenz":{ + "gebärdensprachkompetenz": { "type": "integer", "nullable": "false" } } } }, - "Block_1":{ - "type": "SinglePage", - "template": "test_page0.html" - }, - "Block_2":{ - "type": "SinglePage", - "template": "test_page1.html", - "database_table" :{ - "table_name": "Datenschutzerklaerung", + "Block 2": { + "type": "TaskTemplate", + "tempalte": "standard_template.html", + "stimuli": { + "type": "single_video", + "order": "random", + "list": { + "video_1": "https://www.youtube-nocookie.com/embed/IqGVT1q1PtM?si=kel7ZWEQl3h-h522", + "video_2": "https://www.youtube-nocookie.com/embed/g9KA72jN5SM?si=O7dfqTXdFCCAScJ-" + }, + "configuration": { + "embed": "yt" + } + }, + "questions": { + "question1": { + "type": "likert", + "name": "likertscale", + "text": "Wie würden sie dieses Video bewerten?", + "required": "true", + "points": { + "p1": { + "value": "1", + "text": "Ich finde es gar nicht gut 🙁👎" + }, + "p2": { + "value": "2", + "text": "Ich finde es nicht gut 👎" + }, + "p3": { + "value": "3", + "text": "Ich finde es weder gut noch schlecht" + }, + "p4": { + "value": "4", + "text": "Ich finde es gut 👍" + }, + "p5": { + "value": "5", + "text": "Ich finde es sehr gut 😊👍" + } + } + }, + "question2": { + "type": "textinput", + "name": "text_feedback", + "text": "Hier können sie uns Feedback geben", + "required": "false", + "size": "250" + }, + "question3": { + "type": "videoinput", + "text": "Hier können sie per Video Feedback geben", + "name": "video_feedback", + "required": "false" + } + }, + "infovideo": { + "videourl": "https://www.youtube-nocookie.com/embed/F_w50c5Us3Y?si=-H07MmQ4lYOC2Bwh", + "infotext": "Hier wird in Zukunft ein Erklärtext stehen, in dem die Fragestellungen erklärt werden.\\n Dazu werden alle Fragen der Seite einzeln durchgegangen und einfach erklärt.\\n Zum Beispiel wird hier erklärt, dass man um Feedback zu geben, ein Video aufnehmen kann. Dazu drückt man auf den Knopf mit dem Videokamera Symbol. Danach muss man oben links am Browser bestätigen, dass der Browser auf die Kamera zugreifen darf.", + "configuration": { + "embed": "yt" + } + }, + "database_table": { + "table_name": "single_video_responses", "fields": { - "accepted":{ - "type": "string", - "size": "7", + "likertscale": { + "type": "integer", "nullable": "false" + }, + "text_feedback": { + "type": "string", + "size": "250", + "nullable": "true" + }, + "video_upload": { + "type": "string", + "size": "100", + "nullable": "true" + } + } + } + }, + "Block 3": { + "type": "TaskTemplate", + "tempalte": "standard_template.html", + "stimuli": { + "type": "double_video", + "list_1": { + "video_1": "https://www.youtube-nocookie.com/embed/IqGVT1q1PtM?si=kel7ZWEQl3h-h522", + "video_2": "https://www.youtube-nocookie.com/embed/g9KA72jN5SM?si=O7dfqTXdFCCAScJ-" + }, + "list_2": { + "video_2": "https://www.youtube-nocookie.com/embed/g9KA72jN5SM?si=O7dfqTXdFCCAScJ-", + "video_1": "https://www.youtube-nocookie.com/embed/IqGVT1q1PtM?si=kel7ZWEQl3h-h522" + }, + "configuration": { + "embed": "yt" + } + }, + "questions": { + "question1": { + "type": "likert", + "name": "likertscale", + "text": "Welches Video gefällt ihnen besser?", + "required": "true", + "points": { + "p1": { + "value": "1", + "text": "Ich finde das linke Video besser" + }, + "p2": { + "value": "2", + "text": "Ich finde beide Videos gleich gut" + }, + "p3": { + "value": "3", + "text": "Ich finde das rechte Video besser" + } + } + } + }, + "infovideo": { + "videourl": "https://www.youtube-nocookie.com/embed/F_w50c5Us3Y?si=-H07MmQ4lYOC2Bwh", + "infotext": "Hier wird in Zukunft ein Erklärtext stehen, in dem die Fragestellungen erklärt werden. Dazu werden alle Fragen der Seite einzeln durchgegangen und einfach erklärt. Zum Beispiel wird hier erklärt, dass man um Feedback zu geben, ein Video aufnehmen kann. Dazu drückt man auf den Knopf mit dem Videokamera Symbol. Danach muss man oben links am Browser bestätigen, dass der Browser auf die Kamera zugreifen darf.", + "configuration": { + "embed": "yt" + } + }, + "database_table": { + "table_name": "double_video_responses", + "fields": { + "likertscale": { + "type": "integer", + "nullable": "false" + } + } + } + }, + "Block 4": { + "type": "TaskTemplate", + "tempalte": "standard_template.html", + "stimuli": { + "type": "empty", + "list": { + "empty_stimulus": "" + } + }, + "questions": { + "question1": { + "type": "textinput", + "name": "formfeedback", + "text": "Das war der Prototyp für dieses Studientool. Über Feedback würde ich mich freuen. Entweder hier oder per Email unter: jan.dickmann@web.de", + "required": "false", + "size": "1000" + } + }, + "infovideo": { + "videourl": "https://www.youtube-nocookie.com/embed/F_w50c5Us3Y?si=-H07MmQ4lYOC2Bwh", + "infotext": "Hier wird in Zukunft ein Erklärtext stehen, in dem die Fragestellungen erklärt werden. Dazu werden alle Fragen der Seite einzeln durchgegangen und einfach erklärt. Zum Beispiel wird hier erklärt, dass man um Feedback zu geben, ein Video aufnehmen kann. Dazu drückt man auf den Knopf mit dem Videokamera Symbol. Danach muss man oben links am Browser bestätigen, dass der Browser auf die Kamera zugreifen darf.", + "configuration": { + "embed": "yt" + } + }, + "database_table": { + "table_name": "feedback_responses", + "fields": { + "formfeedback": { + "type": "string", + "size": "1000", + "nullable": "true" } } } diff --git a/slaeforms/exports/default_block3_test.csv b/slaeforms/exports/default_block3_test.csv new file mode 100644 index 0000000..c518fc1 --- /dev/null +++ b/slaeforms/exports/default_block3_test.csv @@ -0,0 +1,4 @@ +id,user_id,date_created,stimulus_name,likertscale,text_feedback +e27365db-7e5a-443b-b6e5-996774baf359,662dc5a5-ff08-4270-ad33-444e8dd01514,2024-06-25 12:01:55.709616,"('video_3', 'video_3')",3, +9e880318-bc66-410e-bac8-d70adbf98de6,662dc5a5-ff08-4270-ad33-444e8dd01514,2024-06-25 12:01:59.317487,video_3,2, +d147ad99-d41e-48a2-91ee-d5610438e862,662dc5a5-ff08-4270-ad33-444e8dd01514,2024-06-25 12:02:01.661348,video_2,5, diff --git a/slaeforms/exports/default_demographic_test.csv b/slaeforms/exports/default_demographic_test.csv new file mode 100644 index 0000000..f2a5d43 --- /dev/null +++ b/slaeforms/exports/default_demographic_test.csv @@ -0,0 +1,2 @@ +id,user_id,date_created,stimulus_name,alter,geschlecht,hoerstatus,bevorzugte_kommunikation,gebrdenzeitraum,gebrdensprachkompetenz +024e75ae-c5b7-4594-8095-b9f360df9d0c,662dc5a5-ff08-4270-ad33-444e8dd01514,2024-06-25 12:01:47.038602,"('video_3', 'video_3')",27,Mnnlich,Hrend,Gesprochene Sprache,4.0,1 diff --git a/slaeforms/exports/demographic_data.csv b/slaeforms/exports/demographic_data.csv new file mode 100644 index 0000000..f046593 --- /dev/null +++ b/slaeforms/exports/demographic_data.csv @@ -0,0 +1,3 @@ +id,user_id,date_created,stimulus_name,alter,geschlecht,hoerstatus,bevorzugte_kommunikation,gebrdenzeitraum,gebrdensprachkompetenz +33b2f49f-ccc8-48c5-b7f6-fa4bb9aa1bf3,60c9c65b-b6b7-4510-8fb1-e9f220a7c46e,2024-06-27 17:43:45.381824,empty_stimulus,1,Mnnlich,Hrend,Gesprochene Sprache,1.0,1 +70afa75b-d522-4f26-b8f5-1a22ef425ad5,253b881d-cc08-4835-bf03-4d0ffdd8eddd,2024-06-27 17:44:43.877367,empty_stimulus,1,Weiblich,Schwerhrig,Text,1.0,1 diff --git a/slaeforms/exports/double_video_responses.csv b/slaeforms/exports/double_video_responses.csv new file mode 100644 index 0000000..6f179a6 --- /dev/null +++ b/slaeforms/exports/double_video_responses.csv @@ -0,0 +1,5 @@ +id,user_id,date_created,stimulus_name,likertscale +8240918c-aaf9-4dc8-b868-f4cec9920dfc,60c9c65b-b6b7-4510-8fb1-e9f220a7c46e,2024-06-27 17:43:33.469473,"('video_1', 'video_2')",2 +36ef34e3-0e47-4980-86f9-e3456b4bf12c,60c9c65b-b6b7-4510-8fb1-e9f220a7c46e,2024-06-27 17:43:35.573252,"('video_2', 'video_1')",2 +253a2bdd-3c33-47b6-a715-a2b167b11de3,253b881d-cc08-4835-bf03-4d0ffdd8eddd,2024-06-27 17:44:32.383837,"('video_1', 'video_2')",2 +ce8f86ee-fe37-45db-9a7e-a8cba56cd1da,253b881d-cc08-4835-bf03-4d0ffdd8eddd,2024-06-27 17:44:35.019425,"('video_2', 'video_1')",2 diff --git a/slaeforms/exports/double_video_test.csv b/slaeforms/exports/double_video_test.csv new file mode 100644 index 0000000..fd14f87 --- /dev/null +++ b/slaeforms/exports/double_video_test.csv @@ -0,0 +1,4 @@ +id,user_id,date_created,stimulus_name,likertscale +c317333a-e930-4a3a-93e4-5e213df2d2e6,662dc5a5-ff08-4270-ad33-444e8dd01514,2024-06-25 12:01:28.132611,"('video_1', 'video_1')",1 +860d97ef-4855-4995-9ff3-88177ab494af,662dc5a5-ff08-4270-ad33-444e8dd01514,2024-06-25 12:01:30.220347,"('video_2', 'video_2')",3 +b59c4adb-b730-404a-9d0b-b5630e4f445b,662dc5a5-ff08-4270-ad33-444e8dd01514,2024-06-25 12:01:36.894157,"('video_3', 'video_3')",2 diff --git a/slaeforms/exports/single_video_responses.csv b/slaeforms/exports/single_video_responses.csv new file mode 100644 index 0000000..d1e790d --- /dev/null +++ b/slaeforms/exports/single_video_responses.csv @@ -0,0 +1,5 @@ +id,user_id,date_created,stimulus_name,likertscale,text_feedback,video_upload +9affead9-d952-47dd-be8f-f1f746f9426d,60c9c65b-b6b7-4510-8fb1-e9f220a7c46e,2024-06-27 17:43:51.471157,video_2,3,test, +e4c5df2c-0244-4ec6-bd2c-02eff4a4c5f1,60c9c65b-b6b7-4510-8fb1-e9f220a7c46e,2024-06-27 17:43:55.326471,video_1,3,, +12313ba8-1f3e-4ea4-a39e-42021a46d0a7,253b881d-cc08-4835-bf03-4d0ffdd8eddd,2024-06-27 17:44:47.661124,video_1,3,, +c5cc69d6-d51e-4836-aabd-54d3b0682511,253b881d-cc08-4835-bf03-4d0ffdd8eddd,2024-06-27 17:44:50.468067,video_2,3,, diff --git a/slaeforms/exports/user.csv b/slaeforms/exports/user.csv new file mode 100644 index 0000000..7b0ac97 --- /dev/null +++ b/slaeforms/exports/user.csv @@ -0,0 +1,4 @@ +user_id,device_id,question_order,date_created,form_completed +60c9c65b-b6b7-4510-8fb1-e9f220a7c46e,f9a2bd4b-e1ef-43a2-a358-a74feea0076d,"{'Block 0': [('video_1', 'video_2'), ('video_2', 'video_1')], 'Block 1': ['empty_stimulus'], 'Block 2': ['video_2', 'video_1']}",2024-06-27 17:43:23.511495,False +253b881d-cc08-4835-bf03-4d0ffdd8eddd,f9a2bd4b-e1ef-43a2-a358-a74feea0076d,"{'Block 0': [('video_1', 'video_2'), ('video_2', 'video_1')], 'Block 1': ['empty_stimulus'], 'Block 2': ['video_1', 'video_2']}",2024-06-27 17:44:22.713605,True +89ad42ff-3310-4548-b179-7df9c138e794,f9a2bd4b-e1ef-43a2-a358-a74feea0076d,"{'Block 0': [('video_1', 'video_2'), ('video_2', 'video_1')], 'Block 1': ['empty_stimulus'], 'Block 2': ['video_2', 'video_1']}",2024-06-27 17:56:57.288776,False diff --git a/slaeforms/exports/usertable.csv b/slaeforms/exports/usertable.csv new file mode 100644 index 0000000..b39ef43 --- /dev/null +++ b/slaeforms/exports/usertable.csv @@ -0,0 +1,2 @@ +user_id,device_id,question_order,date_created +662dc5a5-ff08-4270-ad33-444e8dd01514,50bc84f6-6c55-4277-9651-5c3c98e973f5,"{'Block 0': [('video_1', 'video_1'), ('video_2', 'video_2'), ('video_3', 'video_3')], 'Block 1': ['empty_stimulus'], 'Block 2': ['video_1', 'video_3', 'video_2']}",2024-06-25 12:01:22.516505 diff --git a/slaeforms/static/icons/info-icon.png b/slaeforms/static/icons/info-icon.png new file mode 100644 index 0000000..c692b1c Binary files /dev/null and b/slaeforms/static/icons/info-icon.png differ diff --git a/slaeforms/static/infoDialogScript.js b/slaeforms/static/infoDialogScript.js new file mode 100644 index 0000000..897a04d --- /dev/null +++ b/slaeforms/static/infoDialogScript.js @@ -0,0 +1,13 @@ +const dialog = document.querySelector("dialog"); + const showButton = document.querySelector("dialog + button"); + const closeButton = document.querySelector("dialog button"); + + // "Show the dialog" button opens the dialog modally + showButton.addEventListener("click", () => { + dialog.showModal(); + }); + + // "Close" button closes the dialog + closeButton.addEventListener("click", () => { + dialog.close(); + }); \ No newline at end of file diff --git a/slaeforms/static/oldstyle.css b/slaeforms/static/oldstyle.css new file mode 100644 index 0000000..747478e --- /dev/null +++ b/slaeforms/static/oldstyle.css @@ -0,0 +1,247 @@ +html { + height: 100%; +} + +body { + width: 100%; + height: 100hv; + margin: 0; + /*align-items: center; this will make the content a square, with edges up and bottom*/ + background-color: #a4b5ff; + color: #000000; + font-family: Tahoma; + font-size: 16px; +} + +.centercontent { + height: 100%; + display: flex; + justify-content: center; +} +.container { + height: 100%; + + width: 80%; /* You can adjust this width as needed */ + max-width: 1200px; /* Maximum width to keep it from getting too wide on large screens */ + padding: 20px; + background-color: #7b8cdb; /* Just for visual differentiation */ + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +/* Form */ +form { + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + +} + + +/* Helper */ +.spacer { + clear: both; + box-sizing: border-box; +} + + +/* buttons */ +.buttondisable { + filter: invert(65%); +} + +#submitbutton { + cursor: pointer; + padding: 10px 20px; /* Increased padding for a bigger button */ + font-size: 20px; /* Increased font size */ + border: none; /* Removes default border */ + border-radius: 8px; /* Optional: rounds the corners of the button */ +} +#submitbutton:hover { + background-color: #0056b3; /* Darker shade for hover effect */ +} +.button-container { + display: flex; + justify-content: flex-end; + margin-top: 20px; /* Adjust as needed for spacing */ +} + +.centertext { + text-align: center; +} + +h2,h3 { + text-align: center; +} + +.textarea-container { + display: flex; + flex-direction: column; + align-items: center; +} +.textarea-label{ + align-self: flex-start; /* Aligns the label to the start of the container */ +} + + +video { + max-width: 100%; + max-height: 100%; + width: auto; + height: auto; +} +.aspect-ratio-16-9 { + width: 100%; + aspect-ratio: 16 / 9; +} + +/* Video recording controls */ +.videocontrols { + width: 100px; /* Set a specific width for the buttons */ + height: 70px; /* Set a specific height for the buttons */ + background-color: #cae4ff; + border: none; + color: white; + padding: 10px 20px; + margin: 0 10px; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; + display: inline-flex; /* Display button contents as a flexbox */ + justify-content: center; /* Center contents horizontally */ + align-items: center; /* Center contents vertically */ + text-align: center; +} + +.videocontrols img { + max-width: 65%; + max-height: 65%; + text-align: center; + margin: auto; + width: auto; /* Make the image fill its container */ + height: auto; /* Make the image fill its container */ + display: block; /* Remove any extra space around the image */ +} + +.columncontainer { + display: flex; +} + +.columnleft { + width: 100%; + border: 3px solid black; +} +.columnright { + width: 100%; + border: 3px solid black; +} + +/* Video recording iframe */ + +iframe { + display:block; + margin: auto; +} + +.video-container { + position: relative; + padding-bottom: 56.25%; /* 16:9 aspect ratio */ + height: 0; + overflow: hidden; + max-width: 100%; + background: #000; +} + +.video-container iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + + + + +/* Likert stuff */ +.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; + } +} + +input, label { + display: block; + margin: 0.5rem 0; + } + +.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: auto 1px; /*-webkit-focus-ring-color*/ +} + +.likert span:hover { + background: #f1f1f1; + outline: lightgrey auto 0.5px; +} + + +/* Table display stuff */ +table { + border-collapse: collapse; + margin: 20px 0; + table-layout: auto; /* Allows columns to adjust to their content */ + width: auto; /* Adjusts the table width to the content */ +} + +th, td { + border: 1px solid #dddddd; + text-align: left; + padding: 8px; + word-wrap: break-word; /* Ensures content wraps and doesn't overflow */ +} + +th { + background-color: #f2f2f2; +} \ No newline at end of file diff --git a/slaeforms/static/styles.css b/slaeforms/static/styles.css index acc8973..026893b 100644 --- a/slaeforms/static/styles.css +++ b/slaeforms/static/styles.css @@ -1,84 +1,219 @@ -html { - height: 100%; -} - body { - width: 100%; - height: 100%; margin: 0; - /*align-items: center; this will make the content a square, with edges up and bottom*/ background-color: #a4b5ff; color: #000000; font-family: Tahoma; font-size: 16px; } -.centercontent { - height: 100%; + +::backdrop { + background-color: grey; + opacity: 1; +} + +dialog { + width: 66%; +} + +dialog .iframe-container { + border-top: 1px solid #ccc; + margin-top: 20px; +} + +.dialog-content { + width: 300px; + height: 200px; display: flex; + align-items: center; justify-content: center; } + +.dialogTextContainer { + font-size: 25px; +} + +.dialogBtn { + width: 90px; + height: 90px; + padding: 8px; + position: fixed; + top: 30px; + left: min(calc(66vw + 30px + 34vw / 2), calc(1720px + calc(100vw - 1690px) / 2)); + /*first is the normal case, second if 66vw is more than 1690 */ +} + +.infoButtonIcon { + max-width: 100%; + max-height: 100%; +} + + +.login-container { + width: 300px; + background: #6cd1e1; + border-radius: 10px; + padding: 10px; + align-content: center; + margin-top: 40vh; + margin-left: auto; + margin-right: auto; + margin-bottom: 50vh; + text-align: center; +} + +.login-elements { + display: inline-block; + width: 90%; +} +#loginbutton { + cursor: pointer; + padding: 12px 24px; + /* Increased padding for a bigger button */ + font-size: 25px; + /* Increased font size */ + border: none; + /* Removes default border */ + border-radius: 8px; + /* Optional: rounds the corners of the button */ +} + + + .container { - height: 100%; - - width: 80%; /* You can adjust this width as needed */ - max-width: 1200px; /* Maximum width to keep it from getting too wide on large screens */ + margin: 0 auto; + /* height: 100vh;*/ + width: 66vw; + /* You can adjust this width as needed */ + max-width: 1690px; + /* Maximum width to keep it from getting too wide on large screens */ padding: 20px; - background-color: #7b8cdb; /* Just for visual differentiation */ + background-color: #7b8cdb; + /* Just for visual differentiation */ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } - - -.spacer { - clear: both; - box-sizing: border-box; +.textblock { + width: 60%; + margin: auto; + text-align: left; } +/* Form */ +form { + min-width: 300px; + margin: 0 auto; + padding-bottom: 2em; +} + + +.dsgvoform { + text-align: right; + width: 60%; +} + +label { + display: block; + margin-top: 1.5rem; + margin-bottom: 1.5rem; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 60%; + min-height: 2em; + display: block; +} + +.button-container input { + display: block; + width: 100%; + margin-top: 30px; + /* Adjust as needed for spacing */ + margin-right: 0; + margin-left: auto; +} + +.button-container { + margin: 0 auto; + width: 60%; +} + +/* buttons */ .buttondisable { filter: invert(65%); } #submitbutton { cursor: pointer; - padding: 10px 20px; /* Increased padding for a bigger button */ - font-size: 20px; /* Increased font size */ - border: none; /* Removes default border */ - border-radius: 8px; /* Optional: rounds the corners of the button */ + padding: 12px 24px; + /* Increased padding for a bigger button */ + font-size: 25px; + /* Increased font size */ + border: none; + /* Removes default border */ + border-radius: 8px; + /* Optional: rounds the corners of the button */ + width: auto; } + #submitbutton:hover { - background-color: #0056b3; /* Darker shade for hover effect */ -} -.button-container { - display: flex; - justify-content: flex-end; - margin-top: 20px; /* Adjust as needed for spacing */ + background-color: #0056b3; + /* Darker shade for hover effect */ } + .textarea-container { - display: flex; - flex-direction: column; - align-items: center; -} -.textarea-label{ - align-self: flex-start; /* Aligns the label to the start of the container */ + margin: auto; + width: 60%; } - -video { - max-width: 100%; - max-height: 100%; - width: auto; - height: auto; -} -.aspect-ratio-16-9 { +.textarea-container textarea { width: 100%; - aspect-ratio: 16 / 9; - } + margin: 1.5rem auto; +} +.textarea-label { + align-self: flex-start; + /* Aligns the label to the start of the container */ +} + +/* Helper */ +.spacer { + clear: both; + box-sizing: border-box; +} + +.centertext { + text-align: center; +} + +h2, +h3 { + text-align: center; +} + +.inline { + display: inline; + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +.compressWidth { + width: 60%; + margin: 0 auto; +} + + +/* Video recording controls */ .videocontrols { - width: 100px; /* Set a specific width for the buttons */ - height: 70px; /* Set a specific height for the buttons */ + width: 100px; + /* Set a specific width for the buttons */ + height: 70px; + /* Set a specific height for the buttons */ background-color: #cae4ff; border: none; color: white; @@ -87,9 +222,12 @@ video { border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; - display: inline-flex; /* Display button contents as a flexbox */ - justify-content: center; /* Center contents horizontally */ - align-items: center; /* Center contents vertically */ + display: inline-flex; + /* Display button contents as a flexbox */ + justify-content: center; + /* Center contents horizontally */ + align-items: center; + /* Center contents vertically */ text-align: center; } @@ -98,9 +236,12 @@ video { max-height: 65%; text-align: center; margin: auto; - width: auto; /* Make the image fill its container */ - height: auto; /* Make the image fill its container */ - display: block; /* Remove any extra space around the image */ + width: auto; + /* Make the image fill its container */ + height: auto; + /* Make the image fill its container */ + display: block; + /* Remove any extra space around the image */ } .columncontainer { @@ -111,26 +252,27 @@ video { width: 100%; border: 3px solid black; } + .columnright { width: 100%; border: 3px solid black; } -iframe { - display:block; - margin: auto; -} - -.video-container { - position: relative; - padding-bottom: 56.25%; /* 16:9 aspect ratio */ - height: 0; - overflow: hidden; +/* Video recording video and youtube iframe */ +video { + /* Video should not be bigger than 100% */ max-width: 100%; - background: #000; + width: auto; + height: auto; + margin: auto auto; } -.video-container iframe { +iframe { + /* center the iframe, mostly unnecessary */ + display: block; +} + +.iframe-container iframe { position: absolute; top: 0; left: 0; @@ -138,46 +280,62 @@ iframe { height: 100%; } -form { +.iframe-container { + position: relative; + padding-bottom: 56.25%; + /* 16:9 */ + height: 0; +} + +.video-container { + max-width: 100%; + position: relative; + padding-bottom: 56.25%; + /* 16:9 */ + height: 0; + overflow: hidden; +} + +.videomirror { + transform: rotateY(180deg); + /* Safari and Chrome */ + -webkit-transform: rotateY(180deg); + /* Firefox */ + -moz-transform: rotateY(180deg); +} + +/* Double Video */ +.dv_button { + display: inline-block; + width: 10%; + padding: 20px 5px; + margin: auto 10px; text-align: center; +} + +.dv_half { + display: inline-block; + width: 45%; + margin: auto; +} + +.double_video_container { + width: 100%; display: flex; - flex-direction: column; - align-items: center; - } -.centertext { - text-align: center; -} - -h2,h3 { - text-align: center; -} - - +/* Likert stuff */ .likert { - --likert-rows: 5; + /* --likert-rows: 5;*/ margin: auto; text-align: center; display: inline-grid; max-width: 900px; grid-auto-rows: 1fr; - gap: 1em; + gap: 2em; 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; - } -} - -input, label { - display: block; - margin: 0.5rem 0; - } - .likert input { max-width: 250px; position: fixed; @@ -185,10 +343,15 @@ input, label { pointer-events: none; } -.likercontainer{ +.likert label { + aspect-ratio: 1.5 / 1; +} + +.likercontainer { margin: 30px auto; text-align: center; } + .likert span { border-radius: 5px; display: flex; @@ -203,13 +366,14 @@ input, label { transition: background .2s ease-in-out; } -.likert input:checked + span { +.likert input:checked+span { outline: black auto 1px; background: transparent; } -.likert input:focus + span { - outline: auto 1px; /*-webkit-focus-ring-color*/ +.likert input:focus+span { + outline: auto 1px; + /*-webkit-focus-ring-color*/ } .likert span:hover { @@ -217,18 +381,31 @@ input, label { outline: lightgrey auto 0.5px; } +@media only screen and (max-width: 680px) { + .likert { + grid-template-columns: minmax(0, 400px); + justify-content: center; + } +} + + +/* Table display stuff */ table { border-collapse: collapse; margin: 20px 0; - table-layout: auto; /* Allows columns to adjust to their content */ - width: auto; /* Adjusts the table width to the content */ + table-layout: auto; + /* Allows columns to adjust to their content */ + width: auto; + /* Adjusts the table width to the content */ } -th, td { +th, +td { border: 1px solid #dddddd; text-align: left; padding: 8px; - word-wrap: break-word; /* Ensures content wraps and doesn't overflow */ + word-wrap: break-word; + /* Ensures content wraps and doesn't overflow */ } th { diff --git a/slaeforms/static/videoscript.js b/slaeforms/static/videoscript.js index 49adb5d..25dd1d0 100644 --- a/slaeforms/static/videoscript.js +++ b/slaeforms/static/videoscript.js @@ -6,11 +6,14 @@ const buttonCameraIcon = document.getElementById('buttonCameraIcon'); const buttonRecordIcon = document.getElementById('buttonRecordIcon'); const buttonDeleteIcon = document.getElementById('buttonDeleteIcon'); const videoContainer = document.getElementById('videoContainer'); +const videoContainerCss = document.querySelector(".video-container ") //might be unnecessary var mediaRecorder = null; var stream = null; let recordedVideoBlob = null; let isRecording = false; let videoAccess = false; +let videoHeigt = 720; +let videoWidth = 1280; // Handle form submission document.getElementById("question_form").addEventListener("submit", function (event) { @@ -32,7 +35,7 @@ document.getElementById("question_form").addEventListener("submit", function (ev // Use fetch to send the form data and video to the backend console.log("try to send the form and video"); - fetch("/send_json", { + fetch("/send", { method: "POST", body: formData }).then(response => { @@ -66,14 +69,31 @@ async function cameraButton() { console.log("stream is active"); videoAccess = true; + videoHeigt = stream.getVideoTracks()[0].getSettings().height + videoWidth = stream.getVideoTracks()[0].getSettings().width + + let aspectratio = (videoHeigt / videoWidth) *100 + console.log("videoHeigt: ",videoHeigt); + console.log("videoWidth: ",videoWidth); + console.log("aspect ratio: ",aspectratio); + console.log("device: ",stream.getVideoTracks()[0].getSettings().deviceId); + videoContainer.style.setProperty("padding-bottom", "min("+videoHeigt+"px,"+aspectratio+"%)"); + + if (videoHeigt > videoWidth){ //hochkant video + videoContainer.style.setProperty("max-width", "min(80%,576"); + }else{ //Normal, horizontal + videoContainer.style.setProperty("max-width", "100%"); + } + videoDisplay.srcObject = stream; buttonCameraIcon.src = ICON_PATHS.cameraofficon; buttonCameraIcon.alt = "Camera-off Icon"; buttonRecord.style.display = 'inline-block'; buttonDelete.style.display = 'inline-block'; - videoDisplay.style.display = 'inline-block'; - videoContainer.style.display = 'inline-block'; + videoDisplay.style.display = 'block'; + videoContainer.style.display = 'block'; + videoDisplay.classList.add("videomirror"); mediaRecorder = new MediaRecorder(stream, { mimeType: "video/webm", // could use different video format @@ -127,6 +147,7 @@ function recordButton() { if (!isRecording) { console.log("recordButton pressed case isRecording = false"); deleteButton(); + videoDisplay.classList.add("videomirror"); buttonDelete.setAttribute("disabled", ""); buttonDeleteIcon.classList.add("buttondisable"); videoDisplay.srcObject = stream; @@ -142,6 +163,7 @@ function recordButton() { } else { console.log("recordButton pressed case isRecording = true"); mediaRecorder.stop(); + videoDisplay.classList.remove("videomirror"); console.log("recording stops"); buttonDelete.removeAttribute("disabled"); @@ -154,6 +176,7 @@ function deleteButton() { videoDisplay.controls = false; videoDisplay.srcObject = stream; recordedVideoBlob = null + videoDisplay.classList.add("videomirror"); buttonDelete.setAttribute("disabled", ""); buttonDeleteIcon.classList.add("buttondisable"); } diff --git a/slaeforms/templates/all_links.html b/slaeforms/templates/all_links.html index 683be47..e2587be 100644 --- a/slaeforms/templates/all_links.html +++ b/slaeforms/templates/all_links.html @@ -6,7 +6,7 @@ all links - + diff --git a/slaeforms/templates/endpage.html b/slaeforms/templates/endpage.html new file mode 100644 index 0000000..eadae87 --- /dev/null +++ b/slaeforms/templates/endpage.html @@ -0,0 +1,21 @@ + + + + + + + DGS Avatar Study + + + +
+

Danke für ihre Teilnahme!

+ +
+

+ Falls sie noch Fragen oder Rückmeldungen haben, schreiben sie mir unter: jan.dickmann@web.de +

+
+
+ + \ No newline at end of file diff --git a/slaeforms/templates/login.html b/slaeforms/templates/login.html new file mode 100644 index 0000000..6c2bf6a --- /dev/null +++ b/slaeforms/templates/login.html @@ -0,0 +1,21 @@ + + + + + + + Login Page + + + + +
+ +
+ + \ No newline at end of file diff --git a/slaeforms/templates/popuptest.html b/slaeforms/templates/popuptest.html new file mode 100644 index 0000000..11920b0 --- /dev/null +++ b/slaeforms/templates/popuptest.html @@ -0,0 +1,68 @@ + + + + + + DGS Avatar Study + + + +
+

Hello! Thank you for participating in our study!

+ + + + +
+ +
+
+

Here is the text with the content of the explanation video. + Here participants can read the full text that is beeing shown in the video above in sign language. + From Feedback with a deaf sign language expert, we concluded that giving the whole text as additional resource + would be a good idea, since this would help if a participants looses track of the vide, can not understand the DGS dialect, + or just wants to read, because maybe that is what they prefer. This is especially relevant is the participant can not see very well.

+
+
+ + +
+

This is a placeholder EULA and Terms and Condition Text, this should obviously be replaced with some real Text later. + For now, be aware that this is a prototype for a sign language avatar study. + The Data that you input in this form, will be saved on our servers, but in an annonimized ways, so we can not infer who sent this data. + The Video recordings pose a special case. Any videos that are recorded, will be reviewed by sign language experts in our team, + the meaning will be transcribed in text form, then the video will be deleted. + If you have further questions, please send an email to testemail@notarealemail.deee +

+
+
+ +
+ +
+
+
+ + + \ No newline at end of file diff --git a/slaeforms/templates/standard_template.html b/slaeforms/templates/standard_template.html index 4c31468..02c0c9c 100644 --- a/slaeforms/templates/standard_template.html +++ b/slaeforms/templates/standard_template.html @@ -3,17 +3,51 @@ {% macro single_video(video_url, embed="yt", title="",width="560", height="315", class="center", code="

No code given

") -%} {% if (embed == "yt") %} -
- {% if (title != "") %} -

{{title}}

- {% endif %} -
- -
+ +{% if (title != "") %} +

{{title}}

+{% endif %} +
+
+ +{% else %} +{{code}} +{% endif %} +{%- endmacro %} + +{% macro double_video(video_url1, video_url2, embed="yt", title="",width="560", height="315", class="center", code="

+ No code given +

") -%} +{% if (embed == "yt") %} + +{% if (title != "") %} +

{{title}}

+{% endif %} +
+ +
+
+ +
+
+ + + +
+
+ +
+
+ +
+ {% else %} {{code}} {% endif %} @@ -27,13 +61,13 @@ required {% macro inputconfig(question) -%} {% if ("min" in question) %} -min={{question["min"]}} +min={{question["min"]}} {% endif %} {% if ("max" in question) %} -max={{question["max"]}} +max={{question["max"]}} {% endif %} {% if ("step" in question) %} -step={{question["step"]}} +step={{question["step"]}} {% endif %} {%- endmacro %} @@ -47,39 +81,59 @@ step={{question["step"]}} Testform - + + cameraofficon: "{{ url_for('static', filename='icons/camera-off-icon.png') }}", + cameraicon: "{{ url_for('static', filename='icons/camera-icon.png') }}", + stopicon: "{{ url_for('static', filename='icons/stop-icon.png') }}", + recordicon: "{{ url_for('static', filename='icons/record-icon.png') }}" + }; -
-

Stimulus part

+ + {% if (infovideo) %} + + + +
+ +
+
+

{{ infovideo["infotext"] }}

+
+
+ + + {% endif %} + + {% if (stimulus_type == "single_video") %} {{ single_video(**stimulus_configuration) }} + {% elif (stimulus_type == "double_video") %} + {{ double_video(**stimulus_configuration) }} {% elif (stimulus_type == "empty") %} {% else %}

Error: Block {{ stimulus["type"] }} could not be loaded!

{% endif %} - - -

Questions

-
+ + {% for question in questions %} {% if (questions[question]["type"] == "likert") %}
-
- {{ questions[question]['text']}} +

{{ questions[question]['text']}}

+
{% for point in questions[question]["points"] %}
- {% elif (questions[question]["type"] == "textinput") %}
{% elif (questions[question]["type"] == "dateinput") %} - - +
+ +
{% elif (questions[question]["type"] == "numberinput") %} - +
+ +
{% elif (questions[question]["type"] == "emailinput") %} - +
+ +
{% elif (questions[question]["type"] == "dropdowninput") %} - + {% endfor %} + + +
{% elif (questions[question]["type"] == "videoinput") %} -

Gib Feedback als Video

+ +

{{ questions[question]['text']}}

+
- {{ questions[question]['text']}} -
- -
- + + + + -
+ -
-
\ No newline at end of file diff --git a/slaeforms/templates/startpage.html b/slaeforms/templates/startpage.html index 4f8dc99..3de6867 100644 --- a/slaeforms/templates/startpage.html +++ b/slaeforms/templates/startpage.html @@ -8,7 +8,6 @@ -

Hello! Thank you for participating in our study!

@@ -19,7 +18,6 @@

-
\ No newline at end of file diff --git a/slaeforms/templates/test_page0.html b/slaeforms/templates/test_page0.html index 37e9e68..d8c16d6 100644 --- a/slaeforms/templates/test_page0.html +++ b/slaeforms/templates/test_page0.html @@ -5,18 +5,16 @@ Test Page 0 - Nothing - + -

This is just a test page for the single page option of the json configuration, but without something to submit

-

+
-
\ No newline at end of file diff --git a/slaeforms/templates/test_page1.html b/slaeforms/templates/test_page1.html index b2f54c6..f3d4611 100644 --- a/slaeforms/templates/test_page1.html +++ b/slaeforms/templates/test_page1.html @@ -9,7 +9,6 @@ -

This is just a test page for the single page option of the json configuration

@@ -22,6 +21,5 @@

-
\ No newline at end of file diff --git a/slaeforms/templates/teststartpage.html b/slaeforms/templates/teststartpage.html index a194d1b..25eb62d 100644 --- a/slaeforms/templates/teststartpage.html +++ b/slaeforms/templates/teststartpage.html @@ -1,25 +1,45 @@ - + DGS Avatar Study -
-

Hello! Thank you for participating in our study!

-
+

Hallo! Danke, dass sie bei dieser Studie teilnehmen!

+ +
+

+ Wilkommen bei dieser Prototyp Seite für eine Gebärdensprach-Avatar Studie. +

+

+ Dieses Projekt ist noch in Arbeit und nicht fertiggestellt. Es soll die bisher implementierten Funktionen zeigen und wurde nur zu Präsentationszwecken und um Feedback zu sammeln online gestellt. +

+

+ Das Ziel dieses Projekt ist, es Wissenschaftlern (und anderen) zu ermöglichen relativ einfach online Studien zu erstellen, die auf die besonderen Anforderungen von Gehörlosen Studienteilnehmern abgestimmt sind. + Dazu zählt insbesondere die Möglichkeit Videos aufnehmen zu können um Feedback zu geben, und das Einbinden von Videos die Fragen und Aufgabenstellungen in Gebärdensprache erklären sollen. + In diesem Prototyp finden sich aktuell aber nur Platzhaltervideos. Keine der Inhalte sind bereits Teil einer echten Studie. +

+

+ Wenn sie den Prototyp verwenden und dabei Eingaben machen oder Videos hochladen, sind diese auf dem Server gespeichert. Die Daten werden nach der Testphase gelöscht und können bis dahin nur von dem Admin eingesehen werden. + Wenn sie eingegebene oder hochgeladene Daten löschen wollen, wenden sie sich bitte an den Admin unter: jan.dickmann@web.de +

+

+ Auch bei sonstigen Fragen, wenden sie sich bitte an: jan.dickmann@web.de +

+ +
+ - -

+
+ +
-
- \ No newline at end of file diff --git a/slaeforms/uploads/8fa17956-484e-4fed-9941-2b944114d3b0_Block 4_empty_stimulus_2024.06.15 18-56-34.webm b/slaeforms/uploads/8fa17956-484e-4fed-9941-2b944114d3b0_Block 4_empty_stimulus_2024.06.15 18-56-34.webm deleted file mode 100644 index 8a5e35f..0000000 Binary files a/slaeforms/uploads/8fa17956-484e-4fed-9941-2b944114d3b0_Block 4_empty_stimulus_2024.06.15 18-56-34.webm and /dev/null differ diff --git a/slaeforms/uploads/8fa17956-484e-4fed-9941-2b944114d3b0_Block 4_video_3_2024.06.15 18-56-47.webm b/slaeforms/uploads/8fa17956-484e-4fed-9941-2b944114d3b0_Block 4_video_3_2024.06.15 18-56-47.webm deleted file mode 100644 index 8a5e35f..0000000 Binary files a/slaeforms/uploads/8fa17956-484e-4fed-9941-2b944114d3b0_Block 4_video_3_2024.06.15 18-56-47.webm and /dev/null differ diff --git a/slaeforms/uploads/a72f05bb-d6a7-4f0d-940d-e286746b015c_Block 4_video_2_2024.06.15 19-49-35.webm b/slaeforms/uploads/a72f05bb-d6a7-4f0d-940d-e286746b015c_Block 4_video_2_2024.06.15 19-49-35.webm deleted file mode 100644 index 6c77ad6..0000000 Binary files a/slaeforms/uploads/a72f05bb-d6a7-4f0d-940d-e286746b015c_Block 4_video_2_2024.06.15 19-49-35.webm and /dev/null differ diff --git a/slaeforms/uploads/acd47b24-2a64-400a-be52-258fa6dbfee3_Block 4_video_1_2024.06.15 19-15-06.webm b/slaeforms/uploads/acd47b24-2a64-400a-be52-258fa6dbfee3_Block 4_video_1_2024.06.15 19-15-06.webm deleted file mode 100644 index fff3622..0000000 Binary files a/slaeforms/uploads/acd47b24-2a64-400a-be52-258fa6dbfee3_Block 4_video_1_2024.06.15 19-15-06.webm and /dev/null differ diff --git a/slaeforms/uploads/adffef3d-4d54-4a4d-8230-ec1ef2ede482_Block 4_video_3_2024.06.15 19-25-08.webm b/slaeforms/uploads/adffef3d-4d54-4a4d-8230-ec1ef2ede482_Block 4_video_3_2024.06.15 19-25-08.webm deleted file mode 100644 index a1f87f6..0000000 Binary files a/slaeforms/uploads/adffef3d-4d54-4a4d-8230-ec1ef2ede482_Block 4_video_3_2024.06.15 19-25-08.webm and /dev/null differ diff --git a/slaeforms/uploads/b8819ad7-845f-4a37-be65-b5935dcdd116_Block 2_video_2_2024.06.27 13-04-37.webm b/slaeforms/uploads/b8819ad7-845f-4a37-be65-b5935dcdd116_Block 2_video_2_2024.06.27 13-04-37.webm new file mode 100644 index 0000000..e69de29 diff --git a/slaeforms/zip_exports/all_tables.zip b/slaeforms/zip_exports/all_tables.zip new file mode 100644 index 0000000..d8a0c7b Binary files /dev/null and b/slaeforms/zip_exports/all_tables.zip differ diff --git a/slaeforms/zip_exports/all_videos.zip b/slaeforms/zip_exports/all_videos.zip new file mode 100644 index 0000000..15cb0ec Binary files /dev/null and b/slaeforms/zip_exports/all_videos.zip differ