Skip to content

Instantly share code, notes, and snippets.

@SMotaal

SMotaal/grid.html

Created November 14, 2020 13:48
Show Gist options
  • Save SMotaal/a9852b7bce7e8755ed9df6fb6a2e776f to your computer and use it in GitHub Desktop.
Save SMotaal/a9852b7bce7e8755ed9df6fb6a2e776f to your computer and use it in GitHub Desktop.
Download ZIP
smotaal.io/experimental/psychometrics/teq/
Raw
grid.html
<html>
<head>
<title>SMotaal's TEQ</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="theme-color" content="#262f36" />
<meta name="background-color" content="#999999" />
<link rel="stylesheet" href="/markout/styles/fonts/iosevka.css" />
<link rel="stylesheet" href="/markout/styles/root.css" />
</head>
<body class="light-scheme">
<main>
<form class="psychometrics">
<object id="psychometrics.teq" type="text/json" data="./teq.json"></object>
<section class="psychometrics-grid">
<header>TEQ</header>
<datalist id="psychometrics.teq.options">
<option id="psychometrics.teq.options[0]" value="0" label="Never"></option>
<option id="psychometrics.teq.options[1]" value="1" label="Rarely"></option>
<option id="psychometrics.teq.options[2]" value="2" label="Sometimes"></option>
<option id="psychometrics.teq.options[3]" value="3" label="Always"></option>
<option id="psychometrics.teq.options[4]" value="4" label="Often"></option>
<label>Never</label>
<label>Rarely</label>
<label>Sometimes</label>
<label>Always</label>
<label>Often</label>
</datalist>
<label for="psychometrics.teq.items[0]">When someone else is feeling excited, I tend to get excited too.</label>
<input id="psychometrics.teq.items[0]" type="range" min="0" max="4" list="psychometrics.teq.options" />
<label for="psychometrics.teq.items[1]">Other people’s misfortunes do not disturb me a great deal.</label>
<input id="psychometrics.teq.items[1]" type="range" min="0" max="4" list="psychometrics.teq.options" />
<label for="psychometrics.teq.items[2]">It upsets me to see someone being treated disrespectfully.</label>
<input id="psychometrics.teq.items[2]" type="range" min="0" max="4" list="psychometrics.teq.options" />
<label for="psychometrics.teq.items[3]">I remain unaffected when someone close to me is happy.</label>
<input id="psychometrics.teq.items[3]" type="range" min="0" max="4" list="psychometrics.teq.options" />
<label for="psychometrics.teq.items[4]">I enjoy making other people feel better.</label>
<input id="psychometrics.teq.items[4]" type="range" min="0" max="4" list="psychometrics.teq.options" />
<label for="psychometrics.teq.items[5]">I have tender, concerned feelings for people less fortunate than me.</label>
<input id="psychometrics.teq.items[5]" type="range" min="0" max="4" list="psychometrics.teq.options" />
<label for="psychometrics.teq.items[6]">When a friend starts to talk about his/her problems, I try to steer the conversation towards something else.</label>
<input id="psychometrics.teq.items[6]" type="range" min="0" max="4" list="psychometrics.teq.options" />
<label for="psychometrics.teq.items[7]">I can tell when others are sad even when they do not say anything.</label>
<input id="psychometrics.teq.items[7]" type="range" min="0" max="4" list="psychometrics.teq.options" />
<label for="psychometrics.teq.items[8]">I find that I am “in tune” with other people’s moods.</label>
<input id="psychometrics.teq.items[8]" type="range" min="0" max="4" list="psychometrics.teq.options" />
<label for="psychometrics.teq.items[9]">I do not feel sympathy for people who cause their own serious illnesses.</label>
<input id="psychometrics.teq.items[9]" type="range" min="0" max="4" list="psychometrics.teq.options" />
<label for="psychometrics.teq.items[10]">I become irritated when someone cries.</label>
<input id="psychometrics.teq.items[10]" type="range" min="0" max="4" list="psychometrics.teq.options" />
<label for="psychometrics.teq.items[11]">I am not really interested in how other people feel.</label>
<input id="psychometrics.teq.items[11]" type="range" min="0" max="4" list="psychometrics.teq.options" />
<label for="psychometrics.teq.items[12]">I get a strong urge to help when I see someone who is upset.</label>
<input id="psychometrics.teq.items[12]" type="range" min="0" max="4" list="psychometrics.teq.options" />
<label for="psychometrics.teq.items[13]">When I see someone being treated unfairly, I do not feel very much pity for them.</label>
<input id="psychometrics.teq.items[13]" type="range" min="0" max="4" list="psychometrics.teq.options" />
<label for="psychometrics.teq.items[14]">I find it silly for people to cry out of happiness.</label>
<input id="psychometrics.teq.items[14]" type="range" min="0" max="4" list="psychometrics.teq.options" />
<label for="psychometrics.teq.items[15]">When I see someone being taken advantage of, I feel kind of protective towards him/her.</label>
<input id="psychometrics.teq.items[15]" type="range" min="0" max="4" list="psychometrics.teq.options" />
</section>
</form>
</main>
<footer style="height: 50vh; background-color: #9999;"><span></span></footer>
<style>
:root {
--light-background-color: #eee;
--light-color: #000;
--dark-background-color: #111;
--dark-color: #fff;
/* background-color: var(--background-color); */
}
:root {
--background-color: var(--light-background-color);
--color: var(--light-color);
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: var(--dark-background-color);
--color: var(--dark-color);
}
}
.light-scheme {
--background-color: var(--light-background-color);
--color: var(--light-color);
}
.dark-scheme {
--background-color: var(--dark-background-color);
--color: var(--dark-color);
}
body {
color: var(--color);
background-color: var(--background-color);
/* zoom: 1.25; */
margin: 0;
padding: 1em;
font-family: var(--markout--body-font-family);
min-height: 100vh;
}
form.psychometrics {
--form-color: var(--color, inherit);
--form-background-color: var(--background-color, inherit);
color: var(--form-color);
background-color: var(--form-background-color);
opacity: 0.9;
}
form.psychometrics * {
outline: 1px dotted #9999;
}
form.psychometrics>.psychometrics-grid {
display: grid;
grid: "prompt options"auto / minmax(15em, 2fr) minmax(auto, 1fr);
gap: 1em 0.25em;
/* place-items: stretch; */
/* justify-items: center; */
/* place-content: center; */
justify-content: center;
align-items: center;
place-self: stretch;
/* max-height: 100vh; */
/* overflow-y: scroll; */
}
form.psychometrics>.psychometrics-grid>* {
padding: 0.25em 0;
/* margin: 0.25em; */
}
form.psychometrics>.psychometrics-grid>header {
/* border-block-start: 1px solid black; */
/* border-block-end: 1px solid black; */
margin: 0;
grid-row: 0;
margin-block-start: 1em;
grid-column: prompt / options;
/* outline: 1px dotted #9999; */
font-size: larger;
text-align: center;
place-self: stretch;
/* grid-row: 1/2; */
z-index: 1;
background-color: var(--form-background-color);
/* border: 1px solid #9993; */
border-radius: 1ex;
}
form.psychometrics>.psychometrics-grid>datalist {
grid-column: options;
display: flex;
place-items: center;
place-content: space-between;
place-self: stretch;
/* outline: 1px dotted #9999; */
gap: 1em;
margin-inline-start: 0;
margin-inline-end: 0;
position: sticky;
top: 0;
bottom: 0;
-webkit-appearance: unset;
background-color: var(--form-background-color);
/* backdrop-filter: blur(20px); */
/* mix-blend-mode: hard-light; */
opacity: 0.9;
/* grid-row: 2/2; */
height: 1.5em;
padding: 0.25em;
/* margin: 0; */
/* border: 1px solid #9993; */
border-radius: 1ex;
}
form.psychometrics>.psychometrics-grid>datalist>label {
text-overflow: ellipsis;
word-wrap: normal;
width: min-content;
padding: 0.25em;
/* backdrop-filter: blur(50px) grayscale(50%) contrast(150%); */
}
form.psychometrics>.psychometrics-grid>datalist>option {
display: none;
}
form.psychometrics>.psychometrics-grid>label {
grid-column: prompt;
/* outline: 1px dotted #9999; */
place-self: stretch;
display: list-item;
list-style-type: decimal;
list-style-position: outside;
padding-inline-start: 0;
padding-inline-end: 0;
margin-inline-start: 2em;
margin-inline-end: 0;
}
form.psychometrics>.psychometrics-grid>input {
grid-column: options;
/* outline: 1px dotted #9999; */
place-self: stretch;
margin-inline-start: 1em;
margin-inline-end: 1em;
}
form.psychometrics>.psychometrics-grid>input[list] {
/* appearance: ; */
/* -webkit-appearance:unset; */
}
form.psychometrics>object {
display: none;
}
@media only screen and (max-width: 800px),
only screen and (orientation: landscape) and (max-height: 400px),
only screen and (orientation: landscape) and (min-resolution: 2dppx) and (max-height: 800px) {
form.psychometrics>.psychometrics-grid {
grid: auto / auto;
/* place-items: stretch; */
/* place-content: stretch; */
/* place-self: stretch; */
gap: 1em 0;
/* width: 100%; */
/* justify-content: stretch; */
/* justify-items: center; */
}
form.psychometrics>.psychometrics-grid>* {
/* place-self: stretch; */
/* place-items: stretch; */
/* place-content: stretch; */
/* grid-column: 1 / -1; */
margin-inline-start: 0;
margin-inline-end: 0;
/* padding: 0; */
}
}
@media only screen and (orientation: landscape) and (max-height: 400px),
only screen and (orientation: landscape) and (min-resolution: 2dppx) and (max-height: 800px) {
html {
scroll-snap-type: y proximity;
/* scroll-padding: 25%; */
}
form.psychometrics>.psychometrics-grid {
/* position: sticky; */
/* top:0; */
/* height: 100vh; */
/* overflow-y: scroll; */
scroll-snap-type: y mandatory;
}
form.psychometrics>.psychometrics-grid>header,
form.psychometrics>.psychometrics-grid>label {
height: 80vh;
scroll-snap-align: start;
scroll-snap-stop: always;
scroll-snap-type: y mandatory;
margin-block-start: 0;
margin-block-end: 0;
/* margin-block-start: 10vh; */
/* margin-block-end: 10vh; */
/* margin-block-start: 10vh; */
/* margin-block-end: 10vh; */
scroll-margin-block-start: 10vh;
/* scroll-margin-block-end: 10vh; */
}
form.psychometrics>.psychometrics-grid>header {
/* height: 80vh; */
}
form.psychometrics>.psychometrics-grid>label {
/* height: 50vh; */
margin-block-start: 20vh;
}
form.psychometrics>.psychometrics-grid>input {
/* height: 10vh; */
/* margin-block-start: -10vh; */
/* margin-block-end: -10vh; */
transform: translateY(-20vh);
scroll-snap-align: none;
scroll-snap-type: none;
/* scroll-snap-align: none; */
/* scroll-snap-stop: none; */
/* scroll-snap-align: end; */
/* scroll-snap-stop: none; */
/* margin-block-end: 20vh; */
/* scroll-snap-align: end; */
}
form.psychometrics>.psychometrics-grid>label,
form.psychometrics>.psychometrics-grid>input,
form.psychometrics>.psychometrics-grid>header {}
form.psychometrics>.psychometrics-grid>datalist {
/* grid-row: end; */
/* bottom:0; */
}
}
</style>
</body>
</html>
Raw
teq.json
{
"psychometrics": {
"teq": {
"options": ["Never", "Rarely", "Sometimes", "Often", "Always"],
"weights": {
"standard": {"Never": 0, "Rarely": 1, "Sometimes": 2, "Often": 3, "Always": 4},
"inverted": {"Never": 4, "Rarely": 3, "Sometimes": 2, "Often": 1, "Always": 0}
},
"items": [
{
"prompt": "When someone else is feeling excited, I tend to get excited too.",
"weights": "standard"
},
{
"prompt": "Other people’s misfortunes do not disturb me a great deal.",
"weights": "inverted"
},
{
"prompt": "It upsets me to see someone being treated disrespectfully.",
"weights": "standard"
},
{
"prompt": "I remain unaffected when someone close to me is happy.",
"weights": "inverted"
},
{
"prompt": "I enjoy making other people feel better.",
"weights": "standard"
},
{
"prompt": "I have tender, concerned feelings for people less fortunate than me.",
"weights": "standard"
},
{
"prompt": "When a friend starts to talk about his/her problems, I try to steer the conversation towards something else.",
"weights": "inverted"
},
{
"prompt": "I can tell when others are sad even when they do not say anything.",
"weights": "standard"
},
{
"prompt": "I find that I am “in tune” with other people’s moods.",
"weights": "standard"
},
{
"prompt": "I do not feel sympathy for people who cause their own serious illnesses.",
"weights": "inverted"
},
{
"prompt": "I become irritated when someone cries.",
"weights": "inverted"
},
{
"prompt": "I am not really interested in how other people feel.",
"weights": "inverted"
},
{
"prompt": "I get a strong urge to help when I see someone who is upset.",
"weights": "standard"
},
{
"prompt": "When I see someone being treated unfairly, I do not feel very much pity for them.",
"weights": "inverted"
},
{
"prompt": "I find it silly for people to cry out of happiness.",
"weights": "inverted"
},
{
"prompt": "When I see someone being taken advantage of, I feel kind of protective towards him/her.",
"weights": "standard"
}
]
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment