Skip to content

Commit

Permalink
User question flow.Page transition flickering. Automatic unhiding of …
Browse files Browse the repository at this point in the history 
…input boxes
  • Loading branch information
Liv Green authored and Liv Green committed Jul 25, 2019
1 parent 7537bc3 commit f07c63c
Show file tree
Hide file tree
Showing 7 changed files with 204 additions and 113 deletions.
82 changes: 50 additions & 32 deletions app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,10 @@ h4 {
font-weight: 500;
}

.linkBtn {
font-size: 1.8rem;
}

/* utilities */

.container {
Expand Down Expand Up @@ -133,53 +137,67 @@ input::placeholder {
}

.window-column {
columns: 1 auto;
width: 100%;
columns: 1 auto;
width: 100%;
}

@media (min-width: 51rem) {
.window-column {
columns: 2 auto;
width: 100%;
}
.window-column {
columns: 2 auto;
width: 100%;
}
}

.content-container a {
text-decoration: none;
border: 0.1rem solid rgba(123, 173, 182, 0.5);
padding: 0.75rem;
margin: 0.75rem;
margin-left: 0rem;
width: 20rem;
text-align: center;
font-size: 1.4rem;
color: #fff;
background-color: #7badb6;

text-decoration: none;
border: 0.1rem solid rgba(123, 173, 182, 0.5);
padding: 0.75rem;
margin: 0.75rem;
margin-left: 0rem;
width: 20rem;
text-align: center;
font-size: 1.4rem;
color: #fff;
background-color: #7badb6;
}

.content-container {
display: flex;
margin: 0.25rem 0;
width: 100%;
border: 0.1rem solid #7badb6;
background-color: white;
display: flex;
margin: 0.25rem 0;
width: 100%;
border: 0.1rem solid #7badb6;
background-color: white;
}

.content-container h4 {
padding: 1rem;
width: 100%;
color: #a9431e;
padding: 1rem;
width: 100%;
color: #a9431e;
}

.btn-link {
display: flex;
align-items: center;
justify-content: center;
color: white;
flex-direction: column;
height: 100%;

display: flex;
align-items: center;
justify-content: center;
color: white;
flex-direction: column;
height: 100%;
}

#loader {
border: 1.6rem solid white;
border-top: 1.6rem solid #7badb6;
border-radius: 50%;
width: 12rem;
height: 12rem;
animation: spin 1s linear infinite;
}

@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
73 changes: 37 additions & 36 deletions game.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,45 +10,46 @@
</head>
<body>
<div class="container">
<div id="loader"></div>
<div id="segment-index" class="flex-column flex-center hidden">
<h1>Choose a segment!</h1>
<ul id="all-btns"> </ul>
<ul id="segment-buttons" class="window-column">
</ul>
</div>

<div id="game" class="hidden">
<div id="hud">
<div id="hud-item">
<p class="hud-prefix"></p>
<h1 id="questionCounter" class="hud-main-text"></h1></div>
<div id="hud-item">
<div id="loader"></div>
<div id="segment-index" class="flex-column flex-center hidden">
<h1>Choose a segment!</h1>
<ul id="all-btns"> </ul>
<ul id="segment-buttons" class="window-column">
</ul>
</div>

<div id="game" class="hidden">
<div id="hud">
<div id="hud-item">
<p class="hud-prefix"></p>
<h1 id="score" class="hud-main-text"></h1>
<h1 id="questionCounter" class="hud-main-text"></h1></div>
<div id="hud-item">
<p class="hud-prefix"></p>
<h1 id="score" class="hud-main-text"></h1>
</div>
</div>
<h4 id="contentName"></h4>
<a id="episodeurl" href="url" target="_blank" ><h3 id="episodeName"></h3></a>
<h2 id="question"></h2>

<div class="choice-container">
<p class="choice-prefix">1</p>
<p class="choice-text" data-number="1"></p>
</div>
<div class="choice-container">
<p class="choice-prefix">2</p>
<p class="choice-text" data-number="2"></p>
</div>
<div class="choice-container">
<p class="choice-prefix">3</p>
<p class="choice-text" data-number="3"></p>
</div>
<div class="choice-container">
<p class="choice-prefix">4</p>
<p class="choice-text" data-number="4"></p>
</div>
</div>
</div>
<h4 id="contentName"></h4>
<a id="episodeurl" href="url" target="_blank" ><h3 id="episodeName"></h3></a>
<h2 id="question"></h2>

<div class="choice-container">
<p class="choice-prefix">1</p>
<p class="choice-text" data-number="1"></p>
</div>
<div class="choice-container">
<p class="choice-prefix">2</p>
<p class="choice-text" data-number="2"></p>
</div>
<div class="choice-container">
<p class="choice-prefix">3</p>
<p class="choice-text" data-number="3">
</p>
</div>
<div class="choice-container">
<p class="choice-prefix">4</p>
<p class="choice-text" data-number="4"></p>
</div>
</div>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="game.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion game.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const startGame = () => {
availableQuestions = [...questions];
maxQuestions = 50;
getNewQuestion();
} else {
} else if (contributed) {
segmentBox.classList.remove("hidden");
segmentSelector();
}
Expand Down
14 changes: 6 additions & 8 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,7 @@ d3.csv(
).then(data => {
getData(data);
});
const contentTitles = [
...new Set(questions.map(question => question.content))
];
const contentTitles = [...new Set(questions.map(question => question.content))];
const getData = questions => {
const contentTitles = [
...new Set(questions.map(question => question.content))
Expand All @@ -18,10 +16,10 @@ const getData = questions => {
title: title,
id: questions.filter(question => question.content === title)[0].contentId
}));
createLinkBtn("All Content", 0);
content.forEach(content => {
createLinkBtn(content.title, content.id);
});
createLinkBtn("All Content", 0);
};

const createLinkBtn = (text, id) => {
Expand All @@ -32,8 +30,8 @@ const createLinkBtn = (text, id) => {
h4.innerText = text;
const gameLink = document.createElement("a");
div.appendChild(gameLink);
const buttonText = document.createElement("p")
gameLink.appendChild(buttonText)
const buttonText = document.createElement("p");
gameLink.appendChild(buttonText);
buttonText.classList.add("btn-link");
buttonText.innerText = "Play!";
const gameHref = document.createAttribute("href");
Expand All @@ -42,8 +40,8 @@ const createLinkBtn = (text, id) => {
const highScoreLink = document.createElement("a");
//highScoreLink.classList.add("btn-gamelink");
div.appendChild(highScoreLink);
const hsbuttonText = document.createElement("p")
highScoreLink.appendChild(hsbuttonText)
const hsbuttonText = document.createElement("p");
highScoreLink.appendChild(hsbuttonText);
hsbuttonText.classList.add("btn-link");

const highScoreHref = document.createAttribute("href");
Expand Down
3 changes: 3 additions & 0 deletions user-questions.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.questionEntry {
margin-bottom: 1rem;
}
67 changes: 38 additions & 29 deletions user-questions.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,63 +9,70 @@
</head>
<body>
<div class="container">
<div id="userGenerated" class="flex-center flex-column">
<div id="loader"></div>
<div id="contributionForm" class="flex-center flex-column hidden">
<h1>Your Question Contribution</h1>
<h3 id="brief"></h3>
<form name="questionEntry">
<input
type="text"
name="username"
placeholder="Username"
id="username"
/>
<h3>Choose segment</h3>
<select id="contentSelector" name="contentSegment"> </select>

<h3>The question</h3>
<input
type="text"
name="question"
placeholder="Your Question"
id="question"
/>
<div id="question" class="flex-center flex-column hidden">
<h3>The question</h3>
<input type="text" name="question" placeholder="Your Question" />
</div>
<input
type="text"
name="choice1"
placeholder="Choice 1"
id="choice1"
class="hidden"
/>

<input
type="text"
name="choice2"
placeholder="Choice 2"
id="choice2"
class="hidden"
/>
<input
type="text"
name="choice3"
placeholder="Choice 3"
id="choice3"
class="hidden"
/>
<input
type="text"
name="choice4"
placeholder="Choice 4"
id="choice4"
class="hidden"
/>
<h3>Indicate correct answer:</h3>
<select name="answer" id="answer">
<option value="choose">Choose correct</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<h3>Can be an open question?</h3>
<input type="checkbox" name="open" value="true" />
<div id="answer" class="flex-center flex-column hidden">
<h3>Indicate correct answer:</h3>
<select name="answer">
<option value="choose">Choose correct</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div id="open" class="flex-center flex-column hidden">
<h3>Can be an open question?</h3>
<input type="checkbox" name="open" value="true" />
</div>

<input
type="text"
name="username"
placeholder="Username"
id="username"
class="hidden"
/>
<button
class="btn"
class="btn hidden"
type="submit"
value="Submit"
id="submitBtn"
Expand All @@ -75,11 +82,13 @@ <h3>Can be an open question?</h3>
Submit
</button>
</form>

<a class="btn" href="index.html">Go Home</a>
<a class="linkBtn" id="skipBtn" href="url"
>Go directly to Quiz without contributing, asshole</a
>
</div>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="user-questions.js"></script>
</div>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="user-questions.js"></script>
</body>
</html>
Loading

0 comments on commit f07c63c

Please sign in to comment.