================================================
FILE: docker-compose.yml
================================================
version: "3.9"
services:
db:
image: postgres
volumes:
- ./data/db:/var/lib/postgresql/data
environment:
- POSTGRES_DB=postgres
- POSTGRES_USER=postgres
- POSTGRES_PASSWORD=postgres
web:
build: .
command: python manage.py runserver 0.0.0.0:8000
volumes:
- .:/code
ports:
- "8000:8000"
depends_on:
- db
migration:
build: .
command: python manage.py migrate --noinput
volumes:
- .:/code
depends_on:
- db
================================================
FILE: form/__init__.py
================================================
================================================
FILE: form/asgi.py
================================================
"""
ASGI config for form project.
It exposes the ASGI callable as a module-level variable named ``application``.
For more information on this file, see
https://docs.djangoproject.com/en/3.1/howto/deployment/asgi/
"""
import os
from django.core.asgi import get_asgi_application
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'form.settings')
application = get_asgi_application()
================================================
FILE: form/settings.py
================================================
"""
Django settings for form project.
Generated by 'django-admin startproject' using Django 3.1.3.
For more information on this file, see
https://docs.djangoproject.com/en/3.1/topics/settings/
For the full list of settings and their values, see
https://docs.djangoproject.com/en/3.1/ref/settings/
"""
from pathlib import Path
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.1/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '5&41du-&cv-cazt$r@k84h*gz-s!*jk2b)131ek^2-lpou#2y4'
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
import socket
s = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
s.connect(("8.8.8.8", 80))
ALLOWED_HOSTS = [s.getsockname()[0], '127.0.0.1', 'localhost']
s.close()
# Application definition
INSTALLED_APPS = [
'index',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'form.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'form.wsgi.application'
# Database
# https://docs.djangoproject.com/en/3.1/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': BASE_DIR / 'db.sqlite3',
}
}
# Password validation
# https://docs.djangoproject.com/en/3.1/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
AUTH_USER_MODEL = "index.User"
# Internationalization
# https://docs.djangoproject.com/en/3.1/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/
STATIC_URL = '/static/'
'''SECURE_SSL_REDIRECT = True
SESSION_COOKIE_SECURE = True
CSRF_COOKIE_SECURE = True
SECURE_HSTS_SECONDS = 31536000
SECURE_HSTS_INCLUDE_SUBDOMAINS = True
SECURE_HSTS_PRELOAD = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
PROJECT_ROOT = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_ROOT = os.path.join(PROJECT_ROOT, 'staticfiles')
STATIC_URL = '/static/'
COMPRESS_ENABLED = os.environ.get('COMPRESS_ENABLED', False)
# Extra lookup directories for collectstatic to find static files
STATICFILES_DIRS = (
os.path.join(PROJECT_ROOT, 'static'),
)
# Add configuration for static files storage using whitenoise
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
prod_db = dj_database_url.config(conn_max_age=500)
DATABASES['default'].update(prod_db)
'''
================================================
FILE: form/urls.py
================================================
"""form URL Configuration
The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/3.1/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path, include
from django.contrib.staticfiles.storage import staticfiles_storage
from django.views.generic.base import RedirectView
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('index.urls')),
path('favicon.ico', RedirectView.as_view(url = staticfiles_storage.url('favicon.ico')))
]
================================================
FILE: form/wsgi.py
================================================
"""
WSGI config for form project.
It exposes the WSGI callable as a module-level variable named ``application``.
For more information on this file, see
https://docs.djangoproject.com/en/3.1/howto/deployment/wsgi/
"""
import os
from django.core.wsgi import get_wsgi_application
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'form.settings')
application = get_wsgi_application()
================================================
FILE: index/__init__.py
================================================
================================================
FILE: index/admin.py
================================================
from django.contrib import admin
# Register your models here.
================================================
FILE: index/apps.py
================================================
from django.apps import AppConfig
class IndexConfig(AppConfig):
name = 'index'
================================================
FILE: index/migrations/0001_initial.py
================================================
# Generated by Django 3.1.3 on 2020-11-28 13:29
from django.conf import settings
import django.contrib.auth.models
import django.contrib.auth.validators
from django.db import migrations, models
import django.db.models.deletion
import django.utils.timezone
class Migration(migrations.Migration):
initial = True
dependencies = [
('auth', '0012_alter_user_first_name_max_length'),
]
operations = [
migrations.CreateModel(
name='User',
fields=[
('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
('password', models.CharField(max_length=128, verbose_name='password')),
('last_login', models.DateTimeField(blank=True, null=True, verbose_name='last login')),
('is_superuser', models.BooleanField(default=False, help_text='Designates that this user has all permissions without explicitly assigning them.', verbose_name='superuser status')),
('username', models.CharField(error_messages={'unique': 'A user with that username already exists.'}, help_text='Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.', max_length=150, unique=True, validators=[django.contrib.auth.validators.UnicodeUsernameValidator()], verbose_name='username')),
('first_name', models.CharField(blank=True, max_length=150, verbose_name='first name')),
('last_name', models.CharField(blank=True, max_length=150, verbose_name='last name')),
('is_staff', models.BooleanField(default=False, help_text='Designates whether the user can log into this admin site.', verbose_name='staff status')),
('is_active', models.BooleanField(default=True, help_text='Designates whether this user should be treated as active. Unselect this instead of deleting accounts.', verbose_name='active')),
('date_joined', models.DateTimeField(default=django.utils.timezone.now, verbose_name='date joined')),
('email', models.EmailField(max_length=254, unique=True)),
('groups', models.ManyToManyField(blank=True, help_text='The groups this user belongs to. A user will get all permissions granted to each of their groups.', related_name='user_set', related_query_name='user', to='auth.Group', verbose_name='groups')),
('user_permissions', models.ManyToManyField(blank=True, help_text='Specific permissions for this user.', related_name='user_set', related_query_name='user', to='auth.Permission', verbose_name='user permissions')),
],
options={
'verbose_name': 'user',
'verbose_name_plural': 'users',
'abstract': False,
},
managers=[
('objects', django.contrib.auth.models.UserManager()),
],
),
migrations.CreateModel(
name='Answer',
fields=[
('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
('answer', models.CharField(max_length=5000)),
],
),
migrations.CreateModel(
name='Choices',
fields=[
('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
('choice', models.CharField(max_length=5000)),
('is_answer', models.BooleanField(default=False)),
],
),
migrations.CreateModel(
name='Form',
fields=[
('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
('code', models.CharField(max_length=30)),
('title', models.CharField(max_length=200)),
('description', models.CharField(blank=True, max_length=10000)),
('background_color', models.CharField(default='#d9efed', max_length=20)),
('text_color', models.CharField(default='#272124', max_length=20)),
('collect_email', models.BooleanField(default=False)),
('authenticated_responder', models.BooleanField(default=False)),
('edit_after_submit', models.BooleanField(default=False)),
('see_response', models.BooleanField(default=False)),
('confirmation_message', models.CharField(default='Your response has been recorded.', max_length=10000)),
('is_quiz', models.BooleanField(default=False)),
('allow_view_score', models.BooleanField(default=True)),
('createdAt', models.DateTimeField(auto_now_add=True)),
('updatedAt', models.DateTimeField(auto_now=True)),
('creator', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='creator', to=settings.AUTH_USER_MODEL)),
],
),
migrations.CreateModel(
name='Responses',
fields=[
('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
('response_code', models.CharField(max_length=20)),
('responder_ip', models.CharField(max_length=30)),
('responder_email', models.EmailField(max_length=254)),
('responder', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, related_name='responder', to=settings.AUTH_USER_MODEL)),
('response', models.ManyToManyField(related_name='response', to='index.Answer')),
('response_to', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='response_to', to='index.form')),
],
),
migrations.CreateModel(
name='Questions',
fields=[
('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
('question', models.CharField(max_length=10000)),
('question_type', models.CharField(max_length=20)),
('required', models.BooleanField(default=False)),
('answer_key', models.CharField(blank=True, max_length=5000)),
('score', models.IntegerField(blank=True, default=0)),
('feedback', models.CharField(max_length=5000, null=True)),
('choices', models.ManyToManyField(related_name='choices', to='index.Choices')),
],
),
migrations.AddField(
model_name='form',
name='questions',
field=models.ManyToManyField(related_name='questions', to='index.Questions'),
),
migrations.AddField(
model_name='answer',
name='answer_to',
field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='answer_to', to='index.questions'),
),
]
================================================
FILE: index/migrations/0002_auto_20201128_2040.py
================================================
# Generated by Django 3.1.3 on 2020-11-28 13:40
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('index', '0001_initial'),
]
operations = [
migrations.AlterField(
model_name='responses',
name='responder_email',
field=models.EmailField(blank=True, max_length=254),
),
]
================================================
FILE: index/migrations/0003_remove_form_see_response.py
================================================
# Generated by Django 3.1.3 on 2020-11-28 14:58
from django.db import migrations
class Migration(migrations.Migration):
dependencies = [
('index', '0002_auto_20201128_2040'),
]
operations = [
migrations.RemoveField(
model_name='form',
name='see_response',
),
]
================================================
FILE: index/migrations/__init__.py
================================================
================================================
FILE: index/models.py
================================================
from django.db import models
from django.contrib.auth.models import AbstractUser
# Create your models here.
class User(AbstractUser, models.Model):
email = models.EmailField(unique = True)
class Choices(models.Model):
choice = models.CharField(max_length=5000)
is_answer = models.BooleanField(default=False)
class Questions(models.Model):
question = models.CharField(max_length= 10000)
question_type = models.CharField(max_length=20)
required = models.BooleanField(default= False)
answer_key = models.CharField(max_length = 5000, blank = True)
score = models.IntegerField(blank = True, default=0)
feedback = models.CharField(max_length = 5000, null = True)
choices = models.ManyToManyField(Choices, related_name = "choices")
class Answer(models.Model):
answer = models.CharField(max_length=5000)
answer_to = models.ForeignKey(Questions, on_delete = models.CASCADE ,related_name = "answer_to")
class Form(models.Model):
code = models.CharField(max_length=30)
title = models.CharField(max_length=200)
description = models.CharField(max_length=10000, blank = True)
creator = models.ForeignKey(User, on_delete = models.CASCADE, related_name = "creator")
background_color = models.CharField(max_length=20, default = "#d9efed")
text_color = models.CharField(max_length=20, default="#272124")
collect_email = models.BooleanField(default=False)
authenticated_responder = models.BooleanField(default = False)
edit_after_submit = models.BooleanField(default=False)
confirmation_message = models.CharField(max_length = 10000, default = "Your response has been recorded.")
is_quiz = models.BooleanField(default=False)
allow_view_score = models.BooleanField(default= True)
createdAt = models.DateTimeField(auto_now_add = True)
updatedAt = models.DateTimeField(auto_now = True)
questions = models.ManyToManyField(Questions, related_name = "questions")
class Responses(models.Model):
response_code = models.CharField(max_length=20)
response_to = models.ForeignKey(Form, on_delete = models.CASCADE, related_name = "response_to")
responder_ip = models.CharField(max_length=30)
responder = models.ForeignKey(User, on_delete = models.CASCADE, related_name = "responder", blank = True, null = True)
responder_email = models.EmailField(blank = True)
response = models.ManyToManyField(Answer, related_name = "response")
================================================
FILE: index/static/index/HurlUI.css
================================================
@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed");
@import url("https://fonts.googleapis.com/css?family=Poppins");
@import url("https://fonts.googleapis.com/css?family=Montserrat");
@import url("https://fonts.googleapis.com/css?family=Times+New+Roman");
body{
margin: 0;
padding: 0;
font-family: "Times New Roman","Roboto Condensed", "Poppins","Arial";
}
.center{
text-align: center;
}
.link{
color: #000;
text-decoration: none;
opacity: .7;
}
.link:hover{opacity: .4;}
.margin{
margin: 20px;
}
.margin-top-bottom{
margin: 20px 0;
}
.margin-left-right{
margin: 0 20px;
}
.text-link{
opacity: .8;
}
.text-link:hover{
opacity: .4;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.container-fluid {
width: 100%;
}
[class*="col-"] {
float: left;
}
.row{
grid-row-gap: 5px;
grid-column-gap: 5px;
float: left;
}
.bg-dark, .btn-dark{
background-color: #1c1e1f !important;
color: #FFF !important;
}
.bg-light, .btn-light{
background-color: #DAE0E2 !important;
color: #000 !important;
}
.bg-black{
background-color: #000 !important;
color: #FFF !important;
}
.bg-white{
background-color: #FFF !important;
color: #000 !important;
}
body[theme="dark"]{
background-color: #080808;
color: #FFF;
}
body[theme="light"]{
background-color: #F5F5F5;
color: #000;
}
.text-dark{color: #1c1e1f !important;}
.text-light{color: #DAE0E2 !important;}
.text-danger{color: #E71C23 !important;}
.text-success{color: #6AB04A !important;}
.text-warning{color: #FFF222 !important;}
.text-blur{opacity: .7;}
.text-red{color : #e60000 !important;}
.text-darkblue{color : #000066 !important;}
.text-blue{color : #0000ff !important;}
.text-green{color: #00b300 !important;}
.text-darkgreen{color: #004d00 !important;}
.text-lightgreen{color: #00e600 !important;}
.text-orange{color: #ff9900 !important;}
.text-cyan{color: #33ffff !important;}
.text-gray{color: #ccccb3 !important;}
.col-1 , .col-ex-1{width: 8.33%;}
.col-2 , .col-ex-2{width: 16.66%;}
.col-3 , .col-ex-3{width: 25%;}
.col-4 , .col-ex-4{width: 33.33%;}
.col-5 , .col-ex-5{width: 41.66%;}
.col-6 , .col-ex-6{width: 50%;}
.col-7 , .col-ex-7{width: 58.33%;}
.col-8 , .col-ex-8{width: 66.66%;}
.col-9 , .col-ex-9{width: 75%;}
.col-10, .col-ex-10 {width: 83.33%;}
.col-11, .col-ex-11 {width: 91.66%;}
.col-12, .col-ex-1 {width: 100%;}
.btn{
padding: 10px;
border: 1px solid black;
border-radius: 5px;
text-decoration: none;
font-size: 1rem;
color: black;
font-family: "Poppins";
}
.btn-hover:hover{
box-shadow: 5px 2px 8px;
opacity: .7;
}
.btn-danger{background-color: #E71C23; color: #FFF;}
.btn-success{background-color: #6AB04A; color: #FFF;}
.btn-warning{background-color: #FFF222; color: #000;}
.box{
padding: 10px;
border: 1px solid #999;
border-radius: 5px;
width: -webkit-fill-available;
width: -moz-available;
}
.box-image img, .box-image{
width: 100%;
}
.box-title, .heading-title{
font-weight: bold;
text-align: center;
font-family: "Montserrat";
padding: 2px 5px;
border-bottom: 0.5px solid #e6e6e6;
}
.box-text{
font-family: "Roboto Condensed";
}
.box-shadow{
box-shadow: 3px 5px 11px;
}
.form-label, .text-label{
font-family: "Poppins", "Arial";
margin: 10px 0;
}
.form-group{
margin: 16px 14px;
}
.form-control{
color: black;
border: 1px solid #bfbfbf;
width: -webkit-fill-available;
width: -moz-available;
border-radius: 5px;
padding: 8px;
}
.form-hover:hover{
opacity: .7;
box-shadow: 2px 2px 3px;
}
.navbar{
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
width: 100%;
}
.nav-list{
margin: 0;
list-style-type: none;
}
.nav-logo, .nav-logo a{
float: left;
max-width: 200px;
margin: 10px;
text-decoration: none;
color: black;
font-size: 1.5rem;
}
.navbar .nav-item{
display: block;
text-align: center;
padding: 14px 16px;
font-size: 17px;
float: right;
}
.navbar .nav-item a{
text-decoration: none;
color: black;
}
.navbar .nav-item a:hover{
opacity: .7;
}
.nav-icon{
display: none !important;
}
.fixed-top{
top: 0px;
position: fixed;
}
.fixed-bottom{
bottom: 0;
position: fixed;
}
.text-center{
text-align: center;
}
footer, .footer{
width: 100%;
float: left;
}
.copyright{
text-align: center;
font-size: 20px;
border-top: 1px solid;
padding: 10px;
background-color: #000;
color: #FFF;
margin: 0;
}
code{
text-align: center;
padding: 10px 20px;
border-radius: 5px;
}
.img-frame{
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
.img-hover:hover{
opacity: .4;
}
table{
width: 100%;
}
th{
height: 40px;
}
td{padding: 8px;}
.table-border, .table-border table, .table-border th, .table-border tr, .table-border td{
border: 1px solid;
}
.table-white-black tr:nth-child(even){background-color: #000; color: #FFF;}
.table-white-black tr:nth-child(odd){background-color: #FFF; color: #000;}
.table-black-white tr:nth-child(odd){background-color: #000; color: #FFF;}
.table-black-white tr:nth-child(even){background-color: #FFF; color: #000;}
@media only screen and (max-width: 600px){
.nav-icon{
display: block !important;
position: absolute;
right: 20px;
top: 20px;
}
.nav-item{
float: left;
width: 100vw;
}
.nav-responsive{
display: block !important;
}
.nav-list-responsive{
display: none;
}
}
@media only screen and (max-width: 600px) {
[class*="col-"] {
width: 100% !important;
}
}
@media only screen and (max-width: 768px){
.col-1{
width: 16.66%;
}
.col-2{
width: 25%;
}
.col-3, .col-4, .col-5, .col-6{
width: 50%;
}
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12{
width: 100%;
}
[class*="col-ex-"]{
width: 100%;
}
}
@media only screen and (min-width: 768px) {
.container {
width: 750px;
}
}
@media only screen and (min-width: 992px) {
.container {
width: 970px;
}
}
@media only screen and (min-width: 1200px) {
.container {
width: 1170px;
}
}
================================================
FILE: index/static/index/form.js
================================================
document.addEventListener("DOMContentLoaded", () => {
const csrf = Cookies.get('csrftoken');
document.body.style.backgroundColor = document.querySelector("#bg-color").innerHTML;
document.body.style.color = document.querySelector("#text-color").innerHTML;
document.querySelectorAll(".txt-clr").forEach(element => {
element.style.color = document.querySelector("#text-color").innerHTML;
})
document.querySelectorAll(".input-form-title").forEach(title => {
title.addEventListener("input", function(){
fetch(`edit_title`, {
method: "POST",
headers: {'X-CSRFToken': csrf},
body: JSON.stringify({
"title": this.value
})
})
document.title = `${this.value} - Google Forms CLONE`
document.querySelectorAll(".input-form-title").forEach(ele => {
ele.value = this.value;
})
})
})
document.querySelector("#input-form-description").addEventListener("input", function(){
fetch('edit_description', {
method: "POST",
headers: {'X-CSRFToken': csrf},
body: JSON.stringify({
"description": this.value
})
})
})
document.querySelectorAll(".textarea-adjust").forEach(tx => {
tx.style.height = "auto";
tx.style.height = (10 + tx.scrollHeight)+"px";
tx.addEventListener('input', e => {
tx.style.height = "auto";
tx.style.height = (10 + tx.scrollHeight)+"px";
})
})
document.querySelector("#customize-theme-btn").addEventListener('click', () => {
document.querySelector("#customize-theme").style.display = "block";
document.querySelector("#close-customize-theme").addEventListener('click', () => {
document.querySelector("#customize-theme").style.display = "none";
})
window.onclick = e => {
if(e.target == document.querySelector("#customize-theme")) document.querySelector("#customize-theme").style.display = "none";
}
})
document.querySelector("#input-bg-color").addEventListener("input", function(){
document.body.style.backgroundColor = this.value;
fetch('edit_background_color', {
method: "POST",
headers: {'X-CSRFToken': csrf},
body: JSON.stringify({
"bgColor": this.value
})
})
})
document.querySelector("#input-text-color").addEventListener("input", function(){
document.querySelectorAll(".txt-clr").forEach(element => {
element.style.color = this.value;
})
fetch('edit_text_color', {
method: "POST",
headers: {'X-CSRFToken': csrf},
body: JSON.stringify({
"textColor": this.value
})
})
})
document.querySelectorAll(".open-setting").forEach(ele => {
ele.addEventListener('click', () => {
document.querySelector("#setting").style.display = "block";
})
document.querySelector("#close-setting").addEventListener('click', () => {
document.querySelector("#setting").style.display = "none";
})
window.onclick = e => {
if(e.target == document.querySelector("#setting")) document.querySelector("#setting").style.display = "none";
}
})
document.querySelectorAll("#send-form-btn").forEach(btn => {
btn.addEventListener("click", () => {
document.querySelector("#send-form").style.display = "block";
})
document.querySelector("#close-send-form").addEventListener("click", () => {
document.querySelector("#send-form").style.display = "none";
})
window.onclick = e => {
if(e.target == document.querySelector("#send-form")) document.querySelector("#send-form").style.display = "none";
}
})
document.querySelectorAll("[copy-btn]").forEach(btn => {
btn.addEventListener("click", () => {
var url = document.getElementById("copy-url");
navigator.clipboard.writeText(url.value);
document.querySelector("#send-form").style.display = "none";
})
})
document.querySelector("#setting-form").addEventListener("submit", e => {
e.preventDefault();
fetch('edit_setting', {
method: "POST",
headers: {'X-CSRFToken': csrf},
body: JSON.stringify({
"collect_email": document.querySelector("#collect_email").checked,
"is_quiz": document.querySelector("#is_quiz").checked,
"authenticated_responder": document.querySelector("#authenticated_responder").checked,
"confirmation_message": document.querySelector("#comfirmation_message").value,
"edit_after_submit": document.querySelector("#edit_after_submit").checked,
"allow_view_score": document.querySelector("#allow_view_score").checked,
})
})
document.querySelector("#setting").style.display = "none";
if(!document.querySelector("#collect_email").checked){
if(document.querySelector(".collect-email")) document.querySelector(".collect-email").parentNode.removeChild(document.querySelector(".collect-email"))
}else{
if(!document.querySelector(".collect-email")){
let collect_email = document.createElement("div");
collect_email.classList.add("collect-email")
collect_email.innerHTML = `Email address *
This form is collecting email addresses. Change settings
` document.querySelector("#form-head").appendChild(collect_email) } } if(document.querySelector("#is_quiz").checked){ if(!document.querySelector("#add-score")){ let is_quiz = document.createElement('a') is_quiz.setAttribute("href", "score"); is_quiz.setAttribute("id", "add-score"); is_quiz.innerHTML = `
`;
document.querySelector(".question-options").appendChild(is_quiz)
}
if(!document.querySelector(".score")){
let quiz_nav = document.createElement("span");
quiz_nav.classList.add("col-4");
quiz_nav.classList.add("navigation");
quiz_nav.classList.add('score');
quiz_nav.innerHTML = `Scores`;
[...document.querySelector(".form-navigation").children].forEach(element => {
element.classList.remove("col-6")
element.classList.add('col-4')
})
document.querySelector(".form-navigation").insertBefore(quiz_nav, document.querySelector(".form-navigation").childNodes[2])
}
}else{
if(document.querySelector("#add-score")) document.querySelector("#add-score").parentNode.removeChild(document.querySelector("#add-score"))
if(document.querySelector(".score")){
[...document.querySelector(".form-navigation").children].forEach(element => {
element.classList.remove("col-4")
element.classList.add('col-6')
})
document.querySelector(".score").parentNode.removeChild(document.querySelector(".score"))
}
}
})
document.querySelector("#delete-form").addEventListener("submit", e => {
e.preventDefault();
if(window.confirm("Are you sure? This action CANNOT be undone.")){
fetch('delete', {
method: "DELETE",
headers: {'X-CSRFToken': csrf}
})
.then(() => window.location = "/")
}
})
const editQuestion = () => {
document.querySelectorAll(".input-question").forEach(question => {
question.addEventListener('input', function(){
let question_type;
let required;
document.querySelectorAll(".input-question-type").forEach(qp => {
if(qp.dataset.id === this.dataset.id) question_type = qp.value
})
document.querySelectorAll('.required-checkbox').forEach(rc => {
if(rc.dataset.id === this.dataset.id) required = rc.checked;
})
fetch('edit_question', {
method: "POST",
headers: {'X-CSRFToken': csrf},
body: JSON.stringify({
id: this.dataset.id,
question: this.value,
question_type: question_type,
required: required
})
})
})
})
}
editQuestion();
const editRequire = () => {
document.querySelectorAll(".required-checkbox").forEach(checkbox => {
checkbox.addEventListener('input', function(){
let question;
let question_type;
document.querySelectorAll(".input-question-type").forEach(qp => {
if(qp.dataset.id === this.dataset.id) question_type = qp.value
})
document.querySelectorAll('.input-question').forEach(q => {
if(q.dataset.id === this.dataset.id) question = q.value
})
fetch('edit_question', {
method: "POST",
headers: {'X-CSRFToken': csrf},
body: JSON.stringify({
id: this.dataset.id,
question: question,
question_type: question_type,
required: this.checked
})
})
})
})
}
editRequire()
const editChoice = () => {
document.querySelectorAll(".edit-choice").forEach(choice => {
choice.addEventListener("input", function(){
fetch('edit_choice', {
method: "POST",
headers: {'X-CSRFToken': csrf},
body: JSON.stringify({
"id": this.dataset.id,
"choice": this.value
})
})
})
})
}
editChoice()
const removeOption = () => {
document.querySelectorAll(".remove-option").forEach(ele => {
ele.addEventListener("click",function(){
fetch('remove_choice', {
method: "POST",
headers: {'X-CSRFToken': csrf},
body: JSON.stringify({
"id": this.dataset.id
})
})
.then(() => {
this.parentNode.parentNode.removeChild(this.parentNode)
})
})
})
}
removeOption()
const addOption = () => {
document.querySelectorAll(".add-option").forEach(question =>{
question.addEventListener("click", function(){
fetch('add_choice', {
method: "POST",
headers: {'X-CSRFToken': csrf},
body: JSON.stringify({
"question": this.dataset.question
})
})
.then(response => response.json())
.then(result => {
let element = document.createElement("div");
element.classList.add('choice');
if(this.dataset.type === "multiple choice"){
element.innerHTML = `
×`;
}else if(this.dataset.type === "checkbox"){
element.innerHTML = `
×`;
}
document.querySelectorAll(".choices").forEach(choices => {
if(choices.dataset.id === this.dataset.question){
choices.insertBefore(element, choices.childNodes[choices.childNodes.length -2]);
editChoice()
removeOption()
}
});
})
})
})
}
addOption()
const deleteQuestion = () => {
document.querySelectorAll(".delete-question").forEach(question => {
question.addEventListener("click", function(){
fetch(`delete_question/${this.dataset.id}`, {
method: "DELETE",
headers: {'X-CSRFToken': csrf},
})
.then(() => {
document.querySelectorAll(".question").forEach(q =>{
if(q.dataset.id === this.dataset.id){
q.parentNode.removeChild(q)
}
})
})
})
})
}
deleteQuestion()
const changeType = () => {
document.querySelectorAll(".input-question-type").forEach(ele => {
ele.addEventListener('input', function(){
let required;
let question;
document.querySelectorAll('.required-checkbox').forEach(rc => {
if(rc.dataset.id === this.dataset.id) required = rc.checked;
})
document.querySelectorAll('.input-question').forEach(q => {
if(q.dataset.id === this.dataset.id) question = q.value
})
fetch('edit_question', {
method: "POST",
headers: {'X-CSRFToken': csrf},
body: JSON.stringify({
id: this.dataset.id,
question: question,
question_type: this.value,
required: required
})
})
if(this.dataset.origin_type === "multiple choice" || this.dataset.origin_type === "checkbox"){
document.querySelectorAll(".choices").forEach(choicesElement => {
if(choicesElement.dataset.id === this.dataset.id){
if(this.value === "multiple choice" || this.value === "checkbox"){
fetch(`get_choice/${this.dataset.id}`, {
method: "GET"
})
.then(response => response.json())
.then(result => {
let ele = document.createElement("div");
ele.classList.add('choices');
ele.setAttribute("data-id", result["question_id"])
let choices = '';
if(this.value === "multiple choice"){
for(let i in result["choices"]){
if(i){ choices += `
×
`}
}
}else if(this.value === "checkbox"){
for(let i in result["choices"]){
if(i){choices += `
×
`}
}
}
ele.innerHTML = `${choices}
×
`}
}
}else if(this.value === "checkbox"){
for(let i in result["choices"]){
if(i){choices += `
×
`}
}
}
ele.innerHTML = `${choices}
×
Email address *
This form is collecting email addresses. Change settings
` document.querySelector("#form-head").appendChild(collect_email) } } if(document.querySelector("#is_quiz").checked){ if(!document.querySelector("#add-score")){ let is_quiz = document.createElement('a') is_quiz.setAttribute("href", "score"); is_quiz.setAttribute("id", "add-score"); is_quiz.innerHTML = ``;
document.querySelector(".question-options").appendChild(is_quiz)
}
if(!document.querySelector(".score")){
let quiz_nav = document.createElement("span");
quiz_nav.classList.add("col-4");
quiz_nav.classList.add("navigation");
quiz_nav.classList.add('score');
quiz_nav.innerHTML = `Scores`;
[...document.querySelector(".form-navigation").children].forEach(element => {
element.classList.remove("col-6")
element.classList.add('col-4')
})
document.querySelector(".form-navigation").insertBefore(quiz_nav, document.querySelector(".form-navigation").childNodes[2])
}
}else{
if(document.querySelector("#add-score")) document.querySelector("#add-score").parentNode.removeChild(document.querySelector("#add-score"))
if(document.querySelector(".score")){
[...document.querySelector(".form-navigation").children].forEach(element => {
element.classList.remove("col-4")
element.classList.add('col-6')
})
document.querySelector(".score").parentNode.removeChild(document.querySelector(".score"))
}
}
})
document.querySelectorAll(".textarea-adjust").forEach(tx => {
tx.style.height = "auto";
tx.style.height = (10 + tx.scrollHeight)+"px";
tx.addEventListener('input', e => {
tx.style.height = "auto";
tx.style.height = (10 + tx.scrollHeight)+"px";
})
})
if(document.querySelector("#delete-responses")){
document.querySelector("#delete-responses").addEventListener("click", () => {
if(window.confirm("Are you sure? This action CANNOT be undone.")){
fetch('responses/delete', {
method: "DELETE",
headers: {'X-CSRFToken': csrf}
})
.then(() => {
let ele = document.createElement("div");
ele.classList.add('margin-top-bottom');
ele.classList.add('box');
ele.classList.add('question-box');
ele.innerHTML = '0 responses
'; document.querySelector("#responses").parentNode.replaceChild(ele, document.querySelector("#responses")) }) } }) } }) ================================================ FILE: index/static/index/score.js ================================================ document.addEventListener("DOMContentLoaded", () => { const csrf = Cookies.get('csrftoken'); document.body.style.backgroundColor = document.querySelector("#bg-color").innerHTML; document.body.style.color = document.querySelector("#text-color").innerHTML; document.querySelector("#customize-theme-btn").addEventListener('click', () => { document.querySelector("#customize-theme").style.display = "block"; document.querySelector("#close-customize-theme").addEventListener('click', () => { document.querySelector("#customize-theme").style.display = "none"; }) window.onclick = e => { if(e.target == document.querySelector("#customize-theme")) document.querySelector("#customize-theme").style.display = "none"; } }) document.querySelector("#input-bg-color").addEventListener("input", function(){ document.body.style.backgroundColor = this.value; fetch('edit_background_color', { method: "POST", headers: {'X-CSRFToken': csrf}, body: JSON.stringify({ "bgColor": this.value }) }) }) document.querySelector("#input-text-color").addEventListener("input", function(){ document.querySelectorAll(".txt-clr").forEach(element => { element.style.color = this.value; }) fetch('edit_text_color', { method: "POST", headers: {'X-CSRFToken': csrf}, body: JSON.stringify({ "textColor": this.value }) }) }) document.querySelectorAll(".open-setting").forEach(ele => { ele.addEventListener('click', () => { document.querySelector("#setting").style.display = "block"; }) document.querySelector("#close-setting").addEventListener('click', () => { document.querySelector("#setting").style.display = "none"; }) window.onclick = e => { if(e.target == document.querySelector("#setting")) document.querySelector("#setting").style.display = "none"; } }) document.querySelector("#delete-form").addEventListener("submit", e => { e.preventDefault(); if(window.confirm("Are you sure? This action CANNOT be undone.")){ fetch('delete', { method: "DELETE", headers: {'X-CSRFToken': csrf} }) .then(() => window.location = "/") } }) document.querySelectorAll("#send-form-btn").forEach(btn => { btn.addEventListener("click", () => { document.querySelector("#send-form").style.display = "block"; }) document.querySelector("#close-send-form").addEventListener("click", () => { document.querySelector("#send-form").style.display = "none"; }) window.onclick = e => { if(e.target == document.querySelector("#send-form")) document.querySelector("#send-form").style.display = "none"; } }) document.querySelectorAll("[copy-btn]").forEach(btn => { btn.addEventListener("click", () => { var url = document.getElementById("copy-url"); navigator.clipboard.writeText(url.value); document.querySelector("#send-form").style.display = "none"; }) }) document.querySelector("#setting-form").addEventListener("submit", e => { e.preventDefault(); fetch('edit_setting', { method: "POST", headers: {'X-CSRFToken': csrf}, body: JSON.stringify({ "collect_email": document.querySelector("#collect_email").checked, "is_quiz": document.querySelector("#is_quiz").checked, "authenticated_responder": document.querySelector("#authenticated_responder").checked, "confirmation_message": document.querySelector("#comfirmation_message").value, "edit_after_submit": document.querySelector("#edit_after_submit").checked, "allow_view_score": document.querySelector("#allow_view_score").checked }) }) document.querySelector("#setting").style.display = "none"; if(!document.querySelector("#collect_email").checked){ if(document.querySelector(".collect-email")) document.querySelector(".collect-email").parentNode.removeChild(document.querySelector(".collect-email")) }else{ if(!document.querySelector(".collect-email")){ let collect_email = document.createElement("div"); collect_email.classList.add("collect-email") collect_email.innerHTML = `Email address *
This form is collecting email addresses. Change settings
` document.querySelector("#form-head").appendChild(collect_email) } } if(document.querySelector("#is_quiz").checked){ if(!document.querySelector("#add-score")){ let is_quiz = document.createElement('a') is_quiz.setAttribute("href", "/"); is_quiz.setAttribute("id", "add-score"); is_quiz.innerHTML = ``;
document.querySelector(".question-options").appendChild(is_quiz)
}
}else{
if(document.querySelector("#add-score")){
document.querySelector("#add-score").parentNode.removeChild(document.querySelector("#add-score"))
}
}
})
document.querySelectorAll(".textarea-adjust").forEach(tx => {
tx.style.height = "auto";
tx.style.height = (10 + tx.scrollHeight)+"px";
tx.addEventListener('input', e => {
tx.style.height = "auto";
tx.style.height = (10 + tx.scrollHeight)+"px";
})
})
document.querySelectorAll(".input-score").forEach(element => {
element.addEventListener("input", function(){
fetch('edit_score', {
method: "POST",
headers: {'X-CSRFToken': csrf},
body: JSON.stringify({
question_id: this.dataset.id,
score: this.value
})
})
})
})
document.querySelectorAll("[answer-key]").forEach(element => {
element.addEventListener("input", function(){
if(this.dataset.question_type === "multiple choice"){
fetch('answer_key', {
method: "POST",
headers: {'X-CSRFToken': csrf},
body: JSON.stringify({
"question_id": this.dataset.id,
"answer_key": document.querySelector(`input[name="${this.name}"]:checked`).value
})
})
}else if(this.dataset.question_type === "checkbox"){
answers = []
document.getElementsByName(this.name).forEach(element => {
if(element.checked) answers.push(element.value)
})
fetch('answer_key', {
method: "POST",
headers: {'X-CSRFToken': csrf},
body: JSON.stringify({
"question_id": this.dataset.id,
"answer_key": answers
})
})
}
else{
fetch('answer_key', {
method: "POST",
headers: {'X-CSRFToken': csrf},
body: JSON.stringify({
"question_id": this.dataset.id,
"answer_key": this.value
})
})
}
})
})
document.getElementsByName('feedback').forEach(element => {
element.addEventListener("input", function(){
fetch('feedback', {
method: "POST",
headers: {'X-CSRFToken': csrf},
body: JSON.stringify({
"question_id": this.dataset.id,
"feedback": this.value
})
})
})
})
})
================================================
FILE: index/static/index/style.css
================================================
@import url("https://fonts.googleapis.com/css?family=Permanent+Marker");
@import url("https://fonts.googleapis.com/css?family=Product+Sans");
@import url("https://fonts.googleapis.com/css?family=Google+Sans");
body{
scroll-behavior: smooth;
}
.form-error{
font-family: "Permanent Marker";
color: red;
}
.form-icon{
width: 40px;
margin-bottom: 0.5rem;
}
.topnav{
float: left;
width: 100vw;
}
.navbar-icon{
float: left;
}
.nav-text{
float: left;
position: relative;
vertical-align: middle;
margin-top: 0.75rem;
font-family: "Product Sans";
color: #5f6368;
padding-left: 1rem;
}
.nav-link{
color: #000;
text-decoration: none;
}
.nav-effect{box-shadow: 0 2px 30px -2px rgba(0,0,0,.2);}
.float-right{
float: right;
}
.logout-icon{
width: 40px;
cursor: pointer;
}
.nav-padding{
padding: 10px 20px 10px;
}
.sidebar{
height: 100%;
width: 0;
position: fixed;
z-index: 5;
top: 0;
left: 0;
overflow-x: hidden;
transition: 0.5s;
background-color: #FFF;
box-shadow: 10px 0 5px -2px #888;
}
.nav-ham{
float: left;
font-size: 1.8rem;
position: relative;
vertical-align: middle;
margin-right: 1rem;
cursor: pointer;
}
.close-sidebar{
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
cursor: pointer;
}
.sidebar-content{
margin: 20px
}
.sidebar-title{
margin-top: 50px;
font-family: "Google Sans";
font-size: 1.3rem;
border-bottom: 1px solid #888;
text-align: center;
cursor: pointer;
}
.sidebar-title-link{
text-decoration: none;
color: #414244;
}
.github-icon{
width: 1.3rem;
}
.create-form{
background-color: #f1f3f4;
width: 100vw;
float: left;
}
.forms-label{
font-family: "Google Sans";
margin: 10px 10px 5px 10px;
}
.form-template-box{
margin: 5px 30px 10px 0;
float: left;
}
.form-template-box img{
width: 10em;
height: 7em;
float: left;
}
.form-template-box:hover{
border: 1px solid black;
}
.form-box{
width: 250px;
border: 1px solid rgb(182, 179, 179);
padding: 5px;
cursor: pointer;
margin: 10px;
position: relative;
}
.form-box:hover{
border: 1px solid darkblue;
}
.form-list{
float: left;
margin-top: 20px;
}
.form-list-title{
align-items: flex-end;
display: flex;
flex-direction: row;
position: relative;
}
.form-list-title-text{
text-align: left;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
text-overflow: ellipsis;
font-family: "Google Sans";
margin: 2.5px;
}
.form-list-timestamp{
margin: 2.5px ;
color: gray;
}
.form-list-link{
color: #000000;
text-decoration: none;
float: left;
}
.error-page{
text-align: center;
font-family: "Roboto Condensed";
}
.form-topnav{
padding: 15px;
overflow: hidden;
background-color: #fff;
}
.nav-form-title{
width: 300px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
text-overflow: ellipsis;
}
.edit-on-click{
border: none;
font-size: 1.2rem;
transition: 1s;
overflow-y: hidden;
}
.edit-on-click:focus{
outline: none !important;
border-bottom: 1px solid #202124;
}
.nav-form-menu-icon{
width: 1.5rem;
margin: 10px 15px;
cursor: pointer;
float: left;
}
.send-form-btn{
position: relative;
background-color: #673ab7;
color: #ddd;
font-size: 1rem;
font-family: "Google Sans";
vertical-align: middle;
border: 1px solid #ddd;
padding: 10px 20px;
float: left;
margin: 0.2px 15px;
}
.question-box{
background-color: #FFF;
}
.form-title{
font-size: 2rem;
font-family: "Google Sans";
font-weight: normal;
margin: 10px;
width: -webkit-fill-available;
width: -moz-available;
}
.form-description{
font-size: 1rem;
font-family: "Roboto Condensed";
margin: 10px;
width: -webkit-fill-available;
width: -moz-available;
}
.form-title-box{
border-bottom: 1px solid #ddd;
}
.modal{
display: none;
position: fixed;
z-index: 6;
padding: calc(10vh - 20px) 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content{
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-height: 80%;
overflow: auto;
max-width: 600px;
border-radius: 10px;
}
.modal-close-btn{
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.modal-close-btn:hover, .modal-close-btn:focus{
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-title{
font-family: "Google Sans";
font-size: 1.2rem;
border-bottom: 1px solid rgb(233, 232, 232);
margin-bottom: 0;
}
.modal-subtitle{
font-family: "Roboto Condensed";
font-size: 1rem;
font-weight: normal;
}
.setting-form-label{
font-family: "Roboto Condensed";
}
.modal-division{
margin: 30px 0;
}
.confirmation-msg-input{
width: -webkit-fill-available;
width: -moz-available;
border-bottom: 1px solid #202124;
min-height: 20px !important;
}
.setting-options{
position: relative;
}
.setting-option-cancel{
margin: 20px 10px;
cursor: pointer;
color: #84878b;
}
.btn-save-setting{
background-color: #673ab7;
color: #ddd;
font-size: 1rem;
font-family: "Google Sans";
}
.setting-preview-form, .setting-preview-form a{
cursor: pointer;
color: #bbb;
font-family: "Google Sans";
text-decoration: none;
}
.setting-preview-form:hover{
opacity: .5;
}
.danger-zone{
font-weight: bold;
font-family: "Google Sans";
font-size: 1.4rem;
}
.delete-form-title{
margin: 0;
font-family: "Roboto Condensed";
}
.delete-form-description{
margin: 0;
font-family: "Poppins";
}
.delete-form-btn{
font-size: 1rem;
font-family: "Poppins";
padding: 3px !important;
background-color: #E71C23;
color: #fff;
}
.question-options{
background-color: #fff;
margin: 20px 0;
position: fixed;
bottom: 10%;
right: 0;
border: 1px solid #84878b;
}
.form-option-icon{
width: 2rem;
margin: 5px;
cursor: pointer;
display: block;
}
.collect-email{
margin: 10px;
}
.question-title{
font-family: "Google Sans";
font-size: 1.3rem;
font-weight: normal;
}
.require-star{
color: #E71C23;
}
.require-email-edit{
padding: 5px;
border: none;
border-bottom: 1px solid #84878b;
width: 50%;
cursor: not-allowed;
}
.collect-email-desc{
color: #70757a;
margin: 10px 0;
}
.open-setting{
color: #1a73e8;
cursor: pointer;
}
.question-title{
font-family: "Google Sans";
font-size: 1.5rem;
width: 65%;
}
.question-type-select{
width: calc(35% - 8px);
padding: 5px 35px 5px 5px;
font-size: 1.2rem;
border: 1px solid #ccc;
height: 34px;
}
.question-type-select::-ms-expand{
display: none;
}
.choices{
margin: 10px 0;
}
.choice{
margin: 5px 0;
font-family: "Google Sans";
}
.add-option{
cursor: pointer;
color: #70757a;
}
.edit-choice{
display: inline;
width: 80%;
border: none;
overflow-y: hidden;
font-family: "Google Sans";
}
.remove-option{
display: inline;
font-size: 1.3rem;
cursor: pointer;
margin-left: 10px;
}
.choice-option{
padding: 10px;
display: block;
border-top: 1px solid #ccc;
}
.required{
font-family: "Roboto Condensed";
}
.answers{
margin: 5px;
font-family: "Google Sans";
}
.short-answer{
width: 50%;
border: none;
padding: 5px;
border-bottom: 1px solid #70757a;
}
.long-answer{
width: -webkit-fill-available;
width: -moz-available;
border: none;
padding: 5px;
border-bottom: 1px solid #70757a;
}
.question-option-icon{
width: 1.5rem;
cursor: pointer;
}
.form-navigation{
background-color: #fff;
width: 400px;
margin: auto;
}
.navigation{
text-align: center;
cursor: pointer;
}
.form-navigation .active{
color:rgb(0, 132, 223);
font-weight: bold;
font-family: "Google Sans";
font-size: 0.8rem;
}
.question-score{
max-width: calc(25% - 8px);
display: inline-block;
font-family: "Google Sans";
margin: 1rem;
}
.input-score{
width: 30px;
border: none;
border-bottom: 1px solid rgb(0, 132, 223);
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.question-title-score{
font-family: "Google Sans";
display: inline-block;
width: 75%;
font-size: 1.5rem;
font-weight: normal;
margin: 1rem;
}
.answer-key, .feedback{
margin: 5px 10px;
}
.answer-key-title, .feedback-title{
margin: 0;
font-family: "Roboto Condensed";
display: inline-block;
}
.multiple-choice{
width: 100%;
margin: 5px;
}
.btn-submit{
background-color: #1a73e8;
color: #fff;
border: 1px solid #fff;
cursor: pointer;
}
.required-info{
color: #E71C23;
margin: 10px;
}
.edit-form-link{
width: 4rem;
height: 4rem;
position: fixed;
bottom: 50px;
right: 0%;
border-radius: 50%;
border: 1px solid #5f6368;
}
.response-title{
font-family: "Google Sans";
font-size: 1.5rem;
font-weight: normal;
}
.score-title{
font-family: "Google Sans";
margin: 10px;
font-size: 1.2rem;
font-weight: normal;
}
.question-title{
font-family: "Google Sans";
font-size: 1.5rem;
}
.view-score-btn{
position: relative;
background-color: #673ab7;
color: #ddd;
font-family: "Google Sans";
border: 1px solid #ddd;
padding: 10px 20px;
margin: 5px 15px;
}
.feedback{
margin: 10px 5px;
}
.feedback-title{
font-family: "Poppins";
font-size: 1.1rem;
font-weight: normal;
}
.edit-response-link{
margin-left: 15px;
}
.form-template-label{
font-family: "Google Sans";
margin: 10px;
display: block;
}
.form-animate {
position: relative;
display: block;
overflow: hidden;
}
.input-animate {
width: -webkit-fill-available;
width: -moz-available;
border: none;
display: inline-block;
outline: none;
padding: 10px;
font-size: 20px;
background-color: transparent;
border-bottom: 1px solid #7c7c7c;
}
.input-onFocus {
transition: all 0.5s;
display: inline-block;
bottom: 0;
left: -100%;
position: absolute;
width: 100%;
height: 2px;
background: #1a73e8;
}
.form-animate, .input-animate {
color: inherit;
}
.form-animate .input-animate:focus + .input-onFocus {
left: 0;
}
.response-summary{
margin: .5rem 1rem;
}
.response-summary-title{
font-family: "Google Sans";
font-size: 1rem;
font-weight: normal;
}
blockquote{
font-size: 1.4em;
font-family:Open Sans;
font-style:italic;
color: #555555;
padding: 10px;
border-left:8px solid #78C0A8 ;
position: relative;
background:#EDEDED;
}
blockquote span{
display:block;
color:#333333;
font-style: normal;
font-weight: bold;
margin-top:1em;
}
.pie-chart{
width: 70% !important;
height: 70% !important;
margin: auto;
}
@media only screen and (max-width: 768px){
.nav-form-title{
width: 100px;
}
.form-list-link, .form-box{
width: -webkit-fill-available;
width: -moz-available;
}
.modal{
padding: 0;
}
.modal-content{
max-width: none;
max-height: none;
width: -webkit-fill-available;
width: -moz-available;
height: calc(100% - 40px);
border-radius: 0%;
}
.question-title, .question-title-score{
width: 100%;
}
.question-type-select{
width: 100%;
display: block;
}
.big-screen{
display: none;
}
.navigation{
width: calc((100% - 60px)/3) !important;
}
.question-score{
max-width: 100%;
width: 100%;
}
.input-score{
width: 50px;
}
}
@media only screen and (min-width: 768px){
.small-screen{
display: none;
}
}
================================================
FILE: index/static/index/viewform.js
================================================
document.addEventListener("DOMContentLoaded", () => {
document.body.style.backgroundColor = document.querySelector("#bg-color").innerHTML;
document.body.style.color = document.querySelector("#text-color").innerHTML;
document.querySelectorAll(".txtClr").forEach(element => {
element.style.color = document.querySelector("#text-color").innerHTML;
})
document.querySelectorAll(".textarea-adjust").forEach(tx => {
tx.style.height = "auto";
tx.style.height = (10 + tx.scrollHeight)+"px";
tx.addEventListener('input', e => {
tx.style.height = "auto";
tx.style.height = (10 + tx.scrollHeight)+"px";
})
})
document.querySelectorAll('input[type="checkbox"]').forEach(element => {
document.getElementsByName(element.name).forEach(checkbox => {
checkbox.addEventListener("input", function(){
let totalChecked = 0
document.getElementsByName(element.name).forEach(checkbox => {
if(checkbox.checked) totalChecked++;
})
if(totalChecked > 0){
document.getElementsByName(element.name).forEach(checkbox => {
checkbox.removeAttribute("required")
})
}else{
document.getElementsByName(element.name).forEach(checkbox => {
checkbox.setAttribute("required", '')
})
}
})
})
})
})
================================================
FILE: index/templates/error/403.html
================================================
{% extends 'index/layout.html' %}
{% block body %}
Error 403 Forbidden.
{% endblock %} ================================================ FILE: index/templates/error/404.html ================================================ {% extends 'index/layout.html' %} {% block body %}Error 404 not found
{% endblock %} ================================================ FILE: index/templates/index/edit_response.html ================================================ {% extends 'index/layout.html' %} {% load static %} {% load get_response %} {% load to_int %} {% load is_response %} {% block title %}{{form.title}} ~ Google Forms CLONE{% endblock %} {% block script %} {% endblock %} {% block body %}
{% if user == form.creator %}
{% endif %}
{% endblock %}
================================================
FILE: index/templates/index/form.html
================================================
{% extends 'index/layout.html' %}
{% block title %}
{{form.title}} ~ Google Forms CLONE
{% endblock %}
{% load static %}
{% block script %}
{% endblock %}
{% block body %}
{% endif %}
Email address *
This form is collecting email addresses. Change settings
{% if question.question_type == "multiple choice" %}
{% elif question.question_type == "paragraph" %}
{% endif %}
{% endfor %}
{% for choice in question.choices.all %}
{% elif question.question_type == "checkbox" %}
×
{% endfor %}
{% for choice in question.choices.all %}
{% elif question.question_type == "short" %}
×
{% endfor %}
{% if form.is_quiz %}
{% endif %}
{{form.title}}
{{form.confirmation_message}}
{% if form.edit_after_submit %} Edit response {% endif %} {% if form.is_quiz and form.allow_view_score %} {% endif %}
Google Forms CLONE
Found bug? Submit an issue here
License: MIT
Source code:
Support creator by give a star on GitHub
Start a new form
Blank Form
Contact Information
Customer Feedback
Event Registration
Your forms:
{% for i in forms %}{{i.title}}
{{form.title}}
{% if form.is_quiz %}Score: {{score}} / {{total_score}}
{% endif %}* Required
{{form.description|linebreaksbr}}
Email address: *
{{response.responder_email}}
{{question.question}} {% if question.required %}*{% endif %} {% if form.is_quiz %}{{response|score:question.pk}} / {{question.score}}{% endif %}
{% if question.question_type == "short" %}{{response|get_response:question.pk}}
{% elif question.question_type == "paragraph" %}{{response|get_response:question.pk|linebreaksbr}}
{% elif question.question_type == "multiple choice" %} {% for choice in question.choices.all %}
{% if response|get_response:question.pk|to_int == choice.pk|to_int %}
{% else %}
{% endif %}
{% endfor %}
{% elif question.question_type == "checkbox" %}
{% for choice in question.choices.all %}
{% if response|get_responses:question.pk|is_response:choice.pk %}
{% else %}
{% endif %}
{% endfor %}
{% endif %}
{% if user != form.creator and question.feedback != None and question.feedback != "" %}
Feedback:
{{question.feedback|linebreaksbr|urlize}}
{% endif %}
{% if responses.count > 0 %}
Individual Response:
-
{% for i in responses %}
{% if form.collect_email %}
- {{i.responder_email}}'s response {% elif form.authenticated_responder %}
- {{i.responder.username}}'s response {% else %}
- {{i.responder_ip}}'s response {% endif %} {% endfor %}
0 responses
{% endif %}Questions Summary:
{% for r in responsesSummary %}{{r.question.question}}
{% if r.answers|count > 0 or filteredResponsesSummary|get_property:r.question.question|count > 0 %} {% if r.question.question_type == 'short' or r.question.question_type == 'paragraph' %} {% for i in r.answers %}{{i.answer}}{% endfor %} {% else %} {% endif %} {% else %}
No responses{% endif %}
{% if form.is_quiz %}
{% endif %}
{{form.title}}
{{form.description|linebreaksbr}}
{% if form.collect_email %}Email address *
This form is collecting email addresses. Change settings
{{question.question}}
Answer key:
{% if question.question_type == "short" %} {% elif question.question_type == "paragraph" %} {% elif question.question_type == "multiple choice" %} {% for i in question.choices.all %}Feedback:
{% if question.feedback != None %} {% else %} {% endif %}
{% if user == form.creator %}
{% endif %}
{% endblock %}
================================================
FILE: index/templatetags/count.py
================================================
from django import template
register = template.Library()
@register.filter
def count(array):
return len(array)
================================================
FILE: index/templatetags/generate_color.py
================================================
from django import template
import random
register = template.Library()
@register.filter
def generate_color(_):
return f"rgb({random.randint(0, 255)},{random.randint(0, 255)},{random.randint(0, 255)})"
================================================
FILE: index/templatetags/get_property.py
================================================
from django import template
register = template.Library()
@register.filter
def get_property(array, index):
return array[index]
================================================
FILE: index/templatetags/get_response.py
================================================
from django import template
register = template.Library()
@register.filter
def get_response(responses, pk):
return responses.response.get(answer_to__pk = pk).answer
================================================
FILE: index/templatetags/is_response.py
================================================
from django import template
register = template.Library()
@register.filter
def get_responses(responses, pk):
return responses.response.filter(answer_to__pk = pk)
@register.filter
def is_response(responses, pk):
for i in responses:
if int(i.answer) == int(pk):
return True
return False
================================================
FILE: index/templatetags/score.py
================================================
from django import template
register = template.Library()
@register.filter
def score(responses, question):
response = responses.response.filter(answer_to__pk = question)
for i in response:
if i.answer_to.question_type == "short" or i.answer_to.question_type == "paragraph":
if i.answer == i.answer_to.answer_key: return i.answer_to.score
else: return 0
elif i.answer_to.question_type == "multiple choice":
answerKey = None
for j in i.answer_to.choices.all():
if j.is_answer: answerKey = j.id
if answerKey is not None and int(answerKey) == int(i.answer): return i.answer_to.score
else: return 0
elif i.answer_to.question_type == "checkbox":
answers = []
answer_keys = []
for j in responses.response.filter(answer_to__pk = i.answer_to.pk):
answers.append(int(j.answer))
for k in j.answer_to.choices.all():
if k.is_answer and k.pk not in answer_keys: answer_keys.append(k.pk)
if answers == answer_keys: return i.answer_to.score
else: return 0
================================================
FILE: index/templatetags/to_int.py
================================================
from django import template
register = template.Library()
@register.filter
def to_int(number):
return int(number)
================================================
FILE: index/tests.py
================================================
from django.test import TestCase
# Create your tests here.
================================================
FILE: index/urls.py
================================================
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name="index"),
path('login', views.login_view, name="login"),
path('register', views.register, name="register"),
path('form/
{% endif %}