forked from nrkbeta/nrkbetaquiz
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Modify the JavaScript component so it works seamlessly with no-JS WP.
With this commit, the JavaScript component now renders itself inside a `FORM` element, rather than outside. This begins addressing the issues listed in nrkbeta#1, and means that both JavaScript and non-JavaScript variations work; the JavaScript now creates inputs as the WordPress back-end expects them. Further, this commit also fixes the error animation, and changes the animation for when the user enters the quiz answers correctly. Previously, this component hid the comment form and revealed it when the quiz was answered, but this required rendering the quiz outside the form. With the above change, the animation has been changed to disabling the comment form's textareas and re-enabling them when the quiz is answered correctly, along with showing a bolded green success message.
- Loading branch information
Showing
4 changed files
with
112 additions
and
102 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,27 +1,27 @@ | ||
.nrkbetaquiz, | ||
.nrkbetaquiz + * { | ||
overflow: hidden; | ||
transition: .5s; | ||
height: 0; | ||
} | ||
.nrkbetaquiz { height: auto } | ||
.nrkbetaquiz label { | ||
cursor: pointer; | ||
display: inline-block; | ||
margin: 0 7px 6px 0; | ||
border-radius: 5px; | ||
padding: 10px 15px; | ||
background: #eee; | ||
transition: .2s; | ||
.nrkbetaquiz label.answer { | ||
cursor: pointer; | ||
display: inline-block; | ||
margin: 0 7px 6px 0; | ||
border-radius: 5px; | ||
padding: 10px 15px; | ||
background: #eee; | ||
} | ||
.nrkbetaquiz label:hover { | ||
background: #ccc; | ||
background: #ccc; | ||
} | ||
.nrkbetaquiz p.correct, | ||
.nrkbetaquiz p.error { | ||
font: inherit; | ||
animation: .5s nrkbetaquiz; | ||
} | ||
.nrkbetaquiz p.correct { | ||
color: green; | ||
font-weight: bold; | ||
} | ||
.nrkbetaquiz p.error { | ||
color: red; | ||
} | ||
.nrkbetaquiz h3 { | ||
color: red; | ||
font: inherit; | ||
animation: nrkbetaquiz forward; | ||
@keyframes nrkbetaquiz { | ||
from { transform: scale(0); } | ||
to { transform: scale(1); } | ||
} | ||
@keyframes nrkbetaquiz{ | ||
from{transform:scale(0)} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters