I am making a quiz using javascript as a fun thing for my website. I followed a tutorial using https://www.sitepoint.com/simple-javascript-quiz/ , and after a bit of trial and error got it working with one question. But, as it is a multiple choice quiz, there are different choices to click on. The choices are all on one line. How can I change the code so that they are on separate lines? To help with any misconceptions, here are the choices and the code:
. a : 28 . b : 34 . c : 33 . d : More Information needed
<!DOCTYPE>
<html>
<style>
#sometext {
background-color: black;
border-radius: 10px;
border-left: 2px solid black;
border-right: 2px solid black;
border-top: 2px solid black;
border-bottom: 2px solid black;
color: white;
}
/* Add padding to containers */
.container {
padding: 16px;
background-color: #9999;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover{
background-color: red;
}
body {
font-family: Verdana, sans-serif;
margin: 0;
text-align: center;
background-color: rgb(150, 175, 200);
}
#p {
position: relative;
font-family: sans-serif;
text-transform: uppercase;
font-size: 2em;
letter-spacing: 4px;
overflow: hidden;
background: linear-gradient(90deg, #000, #fff, #000);
background-repeat: no-repeat;
background-size: 80%;
animation: animate 3s linear infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
}
#Header {
background-color: rgb(150, 175, 200);
color: Black;
font-family: Courier;
font-size: 50px;
background-position: center;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
#keyframes animate {
0% {
background-position: -500%;
}
100% {
background-position: 500%;
}
}
</style>
<body>
<nav class="navbar">
<a href = "file:///C:/Users/xenia/De
sktop/InfoSpace/Home.html">Home</a>
<a href = "file:///C:/Users/xe
nia/Desktop/InfoSpace/Profile.html">My Profile</a>
<a href = "file:///C:/Users/xenia/Desktop
/InfoSpace/Articles.html">Articles</a>
<a href = "file:///C:/Users/xenia
/Desktop/InfoSpace/Reviews.html">Reviews</a>
<a href = "file:///C:/Users/xenia/Desktop
/InfoSpace/Tutorials.html">Tutorials</a>
<a href = "file:///C:/Users/xe
nia/Desktop/InfoSpace/Help.html">Help</a>
</nav>
<h1 id="Header"><strong>INFOSPACE</strong></h1>
<p id="sometext">
<br />
This site is dedicated to provide information for budding scientists.
We aim to give you
a enjoyable and informative experience. If you experience a bug in
the
site please email Samuel Crawford at samuelhbc#icloud.com. Our blogs are reviews of products.
In each one there is a link to the product. If the link is no longer relevent please email samuelhbc#icloud.com.
Thank you for your attention and enjoy!!!
<br />
<br />
</p>
<br />
<br />
<h1><strong>IQ Test</strong></h1>
<div id = "quiz">
</div>
<button id = "submit"><h1>Submit Quiz</h1></button>
<div id = "results">
</div>
<br />
<br />
<p id="p">A website for young scientists.</p>
</body>
<script>
const quizContainer = document.getElementById('quiz');
const resultsContainer = document.getElementById('results');
const submitButton = document.getElementById('submit');
const myQuestions = [
{
question: "What is the next number in this sequence:
1,1,2,3,5,8,13,21...",
answers: {
a: "28",
b: "34",
c: "33",
d: "More Information needed"
},
correctAnswer: "b"
},
];
function buildQuiz() {
const output = [];
myQuestions.forEach(
(currentQuestion, questionNumber) => {
const answers = [];
for(letter in currentQuestion.answers){
answers.push(
`<label>
<input type="radio" name="question${questionNumber}"
value="${letter}">
${letter} :
${currentQuestion.answers[letter]}
</label>`
);
}
output.push(
`<div class="question"> ${currentQuestion.question} </div>
<div class="answers"> ${answers.join('')} </div>`
);
}
);
quizContainer.innerHTML = output.join('');
}
function showResults() {
const answerContainers = quizContainer.querySelectorAll('.answers');
let numCorrect = 0;
myQuestions.forEach( (currentQuestion, questionNumber) => {
const answerContainer = answerContainers[questionNumber];
const selector = 'input[name=question'+questionNumber+']:checked';
const userAnswer = (answerContainer.querySelector(selector) || {}).value;
if(userAnswer===currentQuestion.correctAnswer){
numCorrect++;
answerContainers[questionNumber].style.color = 'lightgreen';
}
else{
answerContainers[questionNumber].style.color = 'red';
}
});
resultsContainer.innerHTML = numCorrect + ' out of ' +
myQuestions.length;
}
buildQuiz();
submitButton.addEventListener('click', showResults);
</script>
</html>
One relatively easy way to do this would be to use Flexbox. In this case, you would add the following styles to your document:
.answers {
display: flex;
flex-direction: column;
}
display: flex makes the .answers divs flex elements, and flex-direction: column displays the div's content from top to bottom instead of from left to right. Once you have that, you can apply other flex properties to arrange the answers even more precisely to your liking. If you want to read more about how to use Flexbox, this article is a good place to get started.
One note about Flexbox though: It doesn't work especially well on older browsers (e.g. IE 11) if that is a concern.
Related
I'm trying to make a simple comment system. It display comments, but when I refresh the page , all comments disappear, only to re-appear again when I add a new comment. I would like to see the comments even after refreshing the page. And preferably with time stamp and in reverse order: so latest on top.
const field = document.querySelector('textarea');
const comments = document.getElementById('comment-box');
// array to store the comments
var comments_arr = [];
if(!localStorage.commentData){localStorage.commentData = [];}
else{
comments_arr = JSON.parse(localStorage.commentData);
}
// to generate html list based on comments array
const display_comments = () => {
let list = '<ul>';
comments_arr.forEach(comment => {
list += `<li>${comment}</li>`;
})
list += '</ul>';
comments.innerHTML = list;
}
submit.onclick = function(event){
event.preventDefault();
const content = field.value;
if(content.length > 0){ // if there is content
// add the comment to the array
comments_arr.push(content);
localStorage.commentData = JSON.stringify(comments_arr);
// re-genrate the comment html list
display_comments();
// reset the textArea content
field.value = '';
}
}
html {
font-size: 14px;
font-family: "Open Sans", sans-serif;
background-color: rgb(239, 239, 238);
}
/*Comment section*/
textarea {
margin: 40px 0px 10px 0px;
background-color: rgb(255, 255, 255);
width: 800px;
padding: 10px;
line-height: 1.5;
border-radius: 5px;
border: 1px solid #7097d1;
box-shadow: 1px 1px 1px #999;
}
#submit {
border-radius: 5px;
border: 1px solid #7097d1;
background-color: #e2e9ea;
}
#submit:hover {
background-color: #7097d1;
}
li {
list-style-type: none;
width: 770px;
margin: 10px 0px 10px -20px;
padding: 5px;
border-radius: 5px;
border: 1px solid #7097d1;
box-shadow: 1px 1px 1px #999;
background-color: #e2e9ea;
}
<link href="comment.css" rel="stylesheet">
<form>
<textarea id="comment" placeholder="Your response pls." value=""></textarea>
</form>
<input id="submit" type="submit" value="add">
<h4>Responses</h4>
<div id="comment-box"></div>
<script src="comment.js"></script>
Adding window.addEventListener('load', display_comments) will fix
This will run the display_comments function on every refresh
You call display_comments after submitting a comment, but you don't call it anywhere else - it needs to be called when the page loads as well.
I am making a hang man game.
I created a randomWord using an array and a censoredWord, which is the randomWord but all its letters are hidden using "_" except the first and last.
I also have a lettersToGuess variable, used to know all the letters to guess, (I created it by simply slicing off the first and the last letter of the randomWord), and every time I guess a letter, that specific letter gets replaced with a " " in the lettersToGuess variable.
Now all works, but the problem is that when I guess a letter it just shows me the first of the censored ones.
For example, if the randomWord is "fish", the censoredWord would be "f__h", and if I click "i" on the keyboard the word will change in "fi_h", but if I click the "s" instead of the "i", it won't change to "f_sh".
Here is my code:
// Generating a random word
var wordsArray = ["cat", "rock", "sheep", "fish", "house"];
var randomWord = wordsArray[Math.floor(Math.random() * wordsArray.length)]; // Random word from wordsArray
var censoredWord = randomWord[0] + "_".repeat(randomWord.length - 2) + randomWord[randomWord.length - 1]; // Censored word created by using "_"
var lettersToGuess = randomWord.slice(1).slice(0, -1); // removing first and last letter
// Writing the word to web page
var randomWordOutput = document.getElementById("randomWord");
randomWordOutput.innerHTML = censoredWord;
// Function used to replace a letter of a string in a specific position
String.prototype.replaceAt = function (index, replacement) {
return this.substr(0, index) + replacement + this.substr(index + replacement.length);
}
// Function used to set the guessed letter to visible
function setCharVisible(censored, notCensored, index) {
for (i=1; i<censored.length-1; i++) {
if (index == i) {
console.log("guessed: " + notCensored[i]);
censored = censored.replaceAt(i, notCensored[i]);
}
}
return censored;
}
// Function used to know if the clicked letter is right
function checkForLetter(clickedId) {
var clickedLetter = document.getElementById(clickedId).textContent;
var clickedLetterButton = document.getElementById(clickedId);
console.log(lettersToGuess);
for (i in lettersToGuess) {
if (lettersToGuess[i] == clickedLetter) {
// Updating letters to guess variable
lettersToGuess = lettersToGuess.replace(clickedLetter, " ");
// Updating censored word removing "_" at the guessed letter position
censoredWord = setCharVisible(censoredWord, randomWord, i+1);
console.log(censoredWord);
// Set the clicked letter button to disabled
clickedLetterButton.classList.remove("keyboard-button");
clickedLetterButton.classList.add("guessed-disabled-button");
// Updating displayed censored word
randomWordOutput.innerHTML = censoredWord;
checkForWin(lettersToGuess);
}
}
}
// Checking for win function
function checkForWin(letters) {
guessedLettersSpaces = " ".repeat(lettersToGuess.length);
if (letters === guessedLettersSpaces) {
randomWordOutput.style.color = "#0cc206";
setTimeout(() => {
if (confirm("WIN")) {
window.location.reload();
}
}, 500);
}
}
* {
box-sizing: border-box;
font-family: Rubik, sans-serif;
}
body {
margin: 0;
padding: 0;
font-size: 16px;
background-color: #131313;
color: white;
}
.game-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #0c0c0c;
padding: 50px;
border-radius: 40px;
}
#randomWord {
text-align: center;
padding: 20px;
}
.keyboard-container {
width: 900px;
display: block;
margin: auto auto;
}
.keyboard-button {
box-sizing: border-box;
line-height: 80px;
font-size: 22px;
text-align: center;
width: 80px;
color: #ffffff;
cursor: pointer;
margin: 10px 8px;
height: 80px;
border-style: solid #0c0c0c;
box-shadow: 0 0.5px 1px #0c0c0c, 0 2px 6px #0c0c0c;
border-width: 1px;
border-radius: 10px;
background: -webkit-linear-gradient(top, #141414 0%, #0f0f0f 80%, #0e0e0e 100%);
font-family: sans-serif;
display: inline-block;
transition: box-shadow 0.3s ease, transform 0.15s ease;
}
.keyboard-button:hover,
:focus {
box-shadow: 0 0 1px #888, 0 1px 0 #fff, 0 4px 0 #C0C0C0, 0 2px 35px rgba(#444, 0.3), 2px 2px 4px rgba(#444, 0.25), -2px 2px 4px rgba(#444, 0.25), 0 7px 4px rgba(#444, 0.1);
transform: translateY(2px);
}
.keyboard-button:active {
box-shadow: 0 0 1px #888, 0 1px 0 #fff, 0 0 0 #C0C0C0, 0 0px 30px rgba(#444, 0.15), 2px 2px 4px rgba(#444, 0.25), -2px 2px 4px rgba(#444, 0.25), 0 0px 4px rgba(#444, 0.25);
transform: translateY(4px);
}
.guessed-disabled-button {
box-sizing: border-box;
line-height: 80px;
font-size: 22px;
text-align: center;
width: 80px;
color: #0cc206;
margin: 10px 8px;
height: 80px;
border-style: solid #0c0c0c;
box-shadow: 0 0.5px 1px #0c0c0c, 0 2px 6px #0c0c0c;
border-width: 1px;
border-radius: 10px;
background: #222222;
font-family: sans-serif;
display: inline-block;
transition: box-shadow 0.3s ease, transform 0.15s ease;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style/main.css">
<title>Hangman Game</title>
</head>
<body>
<div class="game-container">
<p id="randomWord"></p>
<div class="keyboard-container">
<div class="keyboard-button" id="key-a" onClick="checkForLetter(this.id)">a</div>
<div class="keyboard-button" id="key-b" onClick="checkForLetter(this.id)">b</div>
<div class="keyboard-button" id="key-c" onClick="checkForLetter(this.id)">c</div>
<div class="keyboard-button" id="key-d" onClick="checkForLetter(this.id)">d</div>
<div class="keyboard-button" id="key-e" onClick="checkForLetter(this.id)">e</div>
<div class="keyboard-button" id="key-f" onClick="checkForLetter(this.id)">f</div>
<div class="keyboard-button" id="key-g" onClick="checkForLetter(this.id)">g</div>
<div class="keyboard-button" id="key-h" onClick="checkForLetter(this.id)">h</div>
<div class="keyboard-button" id="key-i" onClick="checkForLetter(this.id)">i</div>
<div class="keyboard-button" id="key-j" onClick="checkForLetter(this.id)">j</div>
<div class="keyboard-button" id="key-k" onClick="checkForLetter(this.id)">k</div>
<div class="keyboard-button" id="key-l" onClick="checkForLetter(this.id)">l</div>
<div class="keyboard-button" id="key-m" onClick="checkForLetter(this.id)">m</div>
<div class="keyboard-button" id="key-n" onClick="checkForLetter(this.id)">n</div>
<div class="keyboard-button" id="key-o" onClick="checkForLetter(this.id)">o</div>
<div class="keyboard-button" id="key-p" onClick="checkForLetter(this.id)">p</div>
<div class="keyboard-button" id="key-q" onClick="checkForLetter(this.id)">q</div>
<div class="keyboard-button" id="key-r" onClick="checkForLetter(this.id)">r</div>
<div class="keyboard-button" id="key-s" onClick="checkForLetter(this.id)">s</div>
<div class="keyboard-button" id="key-t" onClick="checkForLetter(this.id)">t</div>
<div class="keyboard-button" id="key-u" onClick="checkForLetter(this.id)">u</div>
<div class="keyboard-button" id="key-v" onClick="checkForLetter(this.id)">v</div>
<div class="keyboard-button" id="key-x" onClick="checkForLetter(this.id)">x</div>
<div class="keyboard-button" id="key-y" onClick="checkForLetter(this.id)">y</div>
<div class="keyboard-button" id="key-z" onClick="checkForLetter(this.id)">z</div>
</div>
</div>
<script src="./js/WordGenerator.js"></script>
<script src="./js/LivesCounter.js"></script>
</body>
</html>
change this line :
censoredWord = setCharVisible(censoredWord, randomWord, i+1);
to the following line :
censoredWord = setCharVisible(censoredWord, randomWord, parseInt(i)+1);
Turns out i+1 was concatenating 1 instead of adding.
Ex: when i = 1 , i+1 was giving 11.
I am using the following css code:
html {
background: #2B2B2B url(images/bg.gif) repeat;
}
body {
max-width: 1000px;
margin: 0px auto;
font-family: sans-serif;
margin: 0 auto;
}
header,
footer,
aside {
display: block;
}
h1 {
text-align: center;
color: rgba(0, 0, 0, 0.6);
text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 35px rgba(255, 255, 255, 0.3);
text-decoration: underline;
}
label {
display: block;
}
fieldset {
border: 0px dotted red;
width: 400px;
margin: 0 auto;
}
input,
select {
width: 400px;
height: 30px;
border-radius: 5px;
padding-left: 10px;
font-size: 14px;
}
select {
line-height: 30px;
background: #f4f4f4;
}
button {
font-size: 14px;
padding: 5px;
background: #333333;
color: #FFFCEC;
float: right;
width: 100px;
}
button:hover {
font-size: 16px;
}
#edit {
background: #DC5B21;
}
#delete {} #course,
#name,
#profesor,
#subject {
background: #ABDCD6;
}
label {
font-size: 15px;
font-weight: bold;
color: #282827;
}
table {
border-spacing: 0.5rem;
border-collapse: collapse;
margin: 0 auto;
background: #ABDCD6;
}
th {
background: #E9633B;
}
th,
td {
border: 2px solid black;
padding: 10px;
}
td {
font-weight: bold;
font-style: oblique;
}
tr:nth-child(even) {
background: #ABDCD6
}
tr:nth-child(odd) {
background: #DCD8CF
}
.container {
width: 1000px;
margin: 0 auto;
}
.headerbar {
width: 988px;
float: left;
}
.headerbar.top {
background: linear-gradient(45deg, rgba(255, 102, 13, 1) 3%, rgba(255, 109, 22, 1) 32%, rgba(255, 121, 38, 1) 77%, rgba(255, 121, 38, 1) 100%);
min-height: 100px;
border-radius: 19px 30px 0px 0px;
box-shadow: #938D94 7px 7px 5px;
}
.headerbar.bottom {
background: linear-gradient(45deg, rgba(255, 102, 13, 1) 3%, rgba(255, 109, 22, 1) 32%, rgba(255, 121, 38, 1) 77%, rgba(255, 121, 38, 1) 100%);
min-height: 60px;
border-radius: 25px;
border-radius: 0px 0px 37px 34px;
box-shadow: #938D94 7px 1px 5px;
}
.leftbar {
width: 50%;
background: #EB593C;
min-height: 605px;
float: left;
border-radius: 4px;
border: 3px dashed #282827;
}
.rightbar {
width: 47%;
background: #221E1D;
min-height: 595px;
float: left;
padding: 5px;
border: 2px solid #EB593C;
box-shadow: #938D94 5px 5px 5px;
}
#submit,
#clear {
border-radius: 25px;
}
input:focus {
border: 1px solid #FF9933;
}
#media screen and (max-width: 700px) {
.leftbar,
.rightbar {
float: none;
}
.headerbar.top h1 {
margin-left: 50px;
text-align: center;
float: left;
}
and here is my HTML page very simple
<!DOCTYPE html>
<html>
<head>
<title>My web app</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="mystyle2.css" rel="stylesheet"/>
<script>
var studentsArray = [];
var selectedIndex = -1;
function init() {
document.getElementById("tablerows").innerHTML = "";
if (localStorage.studentsRecord) {
studentsArray = JSON.parse(localStorage.studentsRecord);
for (var i = 0; i < studentsArray.length; i++) {
prepareTableCell(i, studentsArray[i].course, studentsArray[i].name, studentsArray[i].profesor, studentsArray[i].subject);
}
}
}
function onRegisterPressed() {
if(validate()){
var course = document.getElementById("course").value;
var name = document.getElementById("name").value;
var profesor = document.getElementById("profesor").value;
var subject = document.getElementById("subject").value;
var stuObj = {course: course, name: name, profesor: profesor, subject: subject};
if (selectedIndex === -1) {
studentsArray.push(stuObj);
} else {
studentsArray.splice(selectedIndex, 1, stuObj);
}
localStorage.studentsRecord = JSON.stringify(studentsArray);
init();
onClarPressed();
}else{
}
}
function prepareTableCell(index, course, name, profesor, subject) {
var table = document.getElementById("tablerows");
var row = table.insertRow();
var courseCell = row.insertCell(0);
var nameCell = row.insertCell(1);
var profesorCell = row.insertCell(2);
var subjectCell = row.insertCell(3);
var actionCell = row.insertCell(4);
courseCell.innerHTML = course;
nameCell.innerHTML = name;
profesorCell.innerHTML = profesor;
subjectCell.innerHTML = subject;
actionCell.innerHTML = '<button id="edit" onclick="onEditPressed(' + index + ')">Edit</button><br/><button id="delete" onclick="deleteTableRow(' + index + ')">Delete</button>';
}
function deleteTableRow(index) {
studentsArray.splice(index, 1);
localStorage.studentsRecord = JSON.stringify(studentsArray);
init();
}
function onClarPressed() {
selectedIndex = -1;
document.getElementById("course").value = "";
document.getElementById("name").value = "";
document.getElementById("profesor").value = "";
document.getElementById("subject").value = "Math";
document.getElementById("submit").innerHTML = "Register";
}
function onEditPressed(index) {
selectedIndex = index;
var stuObj = studentsArray[index];
document.getElementById("course").value = stuObj.course;
document.getElementById("name").value = stuObj.name;
document.getElementById("profesor").value = stuObj.profesor;
document.getElementById("subject").value = stuObj.subject;
document.getElementById("submit").innerHTML = "Update";
}
function validate(){
var errors = [];
var re = /^[\w]+$/;
var id = document.getElementById("course");
if(id.value==="" ){
errors.push("Course name is empty");
}else if(id.value.length<3){
errors.push("Course name is to shoort");
}else if(!re.test(id.value)){
errors.push("Input contains invalid characters");
}
var name = document.getElementById("name");
var regEx = /^[a-zA-Z ]+$/;
if(name.value===""){
errors.push("Name cannot be empty");
}else if(!regEx.test(name.value)){
errors.push("Name contains invalid characters");
}
var profesor = document.getElementById("profesor");
if(profesor.value===""){
errors.push("Professor field cannot be empty");
}else if(!regEx.test(profesor.value)){
errors.push("Professor field contains invalid characters");
}
if(errors.length>0){
var message = "ERRORS:\n\n";
for(var i = 0;i<errors.length;i++){
message+=errors[i]+"\n";
}
alert(message);
return false;
}
return true;
}
</script>
</head>
<body onload="init()">
<header class="headerbar top"><h1>ITEC3506: Assignment#2</h1></header>
<aside class="leftbar">
<div>
<fieldset>
<label for="course"><span>Course Name</span></label>
<input type="text" placeholder="enter name of course" id="course">
</fieldset>
<fieldset>
<label for="name">Your Name</label>
<input type="text" placeholder="enter your name" id="name">
</fieldset>
<fieldset>
<label for="profesor">Course Professor</label>
<input type="text" placeholder="enter course Professor" id="profesor">
</fieldset>
<fieldset>
<label for="subject">Subject</label>
<select id="subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="English">English</option>
<option value="CS">CS</option>
</select>
</fieldset>
<fieldset>
<label for="submit"> </label>
<button id="submit" onclick="onRegisterPressed()">Submit</button>
<button id="clear" onclick="onClarPressed()">Clear</button>
</fieldset>
</div>
</aside>
<aside class="rightbar">
<table id="regtable">
<thead>
<tr>
<th>Course</th>
<th>Student</th>
<th>Professor</th>
<th>Subject</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tablerows">
</tbody>
</table>
</aside>
<footer class="headerbar bottom"></footer>
</div>
</body>
</html>
My question is how can I transform this code into a responsive site.
Everything is resizing normally, except I cannot seem to resize my table and form. Could somebody help me?
A few things going on here.
First, you don't have a set width on a few of your fields, so change:
fieldset{
border: 0px dotted red;
width: 400px;
margin: 0 auto;
}
to:
fieldset{
border: 0px dotted red;
width: 400px;
margin: 0 auto;
max-width: 100%;
}
Also change .headerbar from width: 988px; to width: 100%;.
For responsive frameworks, you need to ensure that you never have a set a fixed width without ensuring there is a max-width attached to it, otherwise your content size will never drop below the size of your fixed width.
Second, I noticed the following:
.leftbar{
width: 50%;
background: #EB593C;
min-height: 605px;
float: left;
border-radius: 4px;
border: 3px dashed #282827;
}
You didn't specifically call this out, but when I check your code in a smaller view, I notice that your width: 50%; is causing the backgrounds to look off, which does not seem to be your intention. I would recommend adding .leftbar { width: 100%; } as well as .rightbar { width: 100%; } inside of #media screen and (max-width:700px){
That just leaves the table. Tables do not automatically break down, so are generally not something we want to use when developing a responsive site, but of course sometimes there is no getting around this.
There are a few ways to tackle the issue with the table. One is to set the table to display:block; and apply overflow-x: scroll; to it inside of your #media screen and (max-width:700px){, which will allow the user to scroll left/right when viewing it from smaller screens. Another is to use one of the various Javascript plugins that can achieve this.
Hope this helps get you on the right track. Best of luck!
Do not set width for these
input,select{/*width: 400px;*/}
fieldset{/*width: 400px;*/}
If you are setting width obviously you cannot obtain a responsive layout
I'm trying to make a 'Choose your Adventure' game, and I want to know if it's possible to make a styled/custom 'Prompt' window, and if it can be not opened up as a 'prompt' window, but have the prompt and user input in a selected HTML box? This is what I mean.
If my HTML has
HTML
<html>
<body>
<textarea class="prompt" disabled="1"></textarea><br>
<input class="input" type="text" value="inputText"></input>
<input type="submit" value="userInput"></input>
</body>
</html>
and CSS of
CSS
.prompt {
width: 300px;
height: 500px;
background: black;
color: #FFA500;
}
and JavaScript (I probably will mess up the code)
JavaScript
var prompt = document.getElementByClassName("prompt");
var choice = prompt("What is your choice? CHOICE1, CHOICE2, or CHOICE3?").toUpperCase();
prompt.innerHTML = choice;
and I hope to get something like the prompt not showing up a dialogue window but instead putting the prompt text into the textarea, and the user put in their choice with the input, then submit it by the submit button. How could I get it so that the prompt window instead outputs the question/text to the textarea, and the user puts in their answer via the input text field, and submitting it via the input submit button, and it works like normal. Is this even possible?
If not, is it at least possible to style the prompt dialogue box itself? Here's my code so far.
function fight() {
var intro = prompt("You are a hero who saved your town from a dragon attack years ago. You had fun murdering that dragon, but sadly no dragon has attacked since. Just when all hope is lo, you hear the sirens ring through the city. You know what that means. Do you PREPARE, or IGNORE THE SIRENS?").toUpperCase();
switch(intro) {
case 'PREPARE':
if(intro === "PREPARE") {
prompt("You decided to " + intro + ". You need to choose what you will do. Keep in mind, the more activities you do, the less energy you have! You only have 3 days to prepare! What do you do? Do you SEARCH ARMOR STAND, SEARCH WEAPON STAND, GO TO MERCHANT, FIGHT DRAGON, TRAIN, or SLEEP?").toUpperCase();
}
}
}
#import url(http://fonts.googleapis.com/css?family=Permanent+Marker);
html, body {
background: #000;
margin: 0;
padding: 0;
}
#wrap {
width: 760px;
margin-left: auto;
margin-right: auto;
}
.container {
position: relative;
top: 50px;
margin-left: auto;
margin-right: auto;
width: 570px;
height: 350px;
border: 6px ridge orange;
padding: 0;
}
.container img {
position: absolute;
bottom: 0px;
width: 570px;
height: 350px;
z-index: -1;
}
p.intro {
color: black;
text-shadow:
-1px -1px 0 #FFF,
1px -1px 0 #FFF,
-1px 1px 0 #FFF,
1px 1px 0 #FFF;
}
h2.header {
text-shadow:
-1px -1px 0 #FFA500,
1px -1px 0 #FFA500,
-1px 1px 0 #FFA500,
1px 1px 0 #FFA500;
}
.box {
float: left;
min-width: 567px;
min-height: 350px;
}
.box h2 {
font-family: 'Permanent Marker', cursive;
font-size: 200%;
text-align: center;
}
.box p {
font-family: 'Permanent Marker', arial;
text-align: center;
}
.box a {
position: absolute;
left: 165px;
display: inline-block;
border: 3px groove #000;
border-radius: 5px;
background: red;
margin-left: auto;
margin-right: auto;
width: 225px;
height: 75px;
font-family: 'Permanent Marker', cursive;
color: #FFA500;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
text-align: center;
}
.battles img {
}
<html>
<body>
<div id="wrap">
<div class="box">
<div class="container">
<h2 class="header">Dragon Slayer - REBORN!</h2>
<p class="intro">You are a hero who saved your town from a dragon attack years ago. You had fun murdering that dragon, but sadly no dragon has attacked since. Just when all hope is lost, you hear the sirens ring through the city. You know what that means.</p>
<br>BEGIN!
<img class="scenario" src="http://www.thegaminghideout.com/school/stage1.png">
<div class="battles">
</div>
</div>
</div>
</div>
</body>
</html>
Here is an example using jQuery. jQuery is useful for manipulating DOM elements. Instead of selecting an object by doing:
document.getElementById('someid');
You would select the element as you would in CSS:
$('#someid);
In my adventure game example, I used a JSON object to contain my story and its paths. The story object is a map of path id (e.g. 'intro', 'choose_weapon') to a scenario object. This helps to organize your story.
I used buttons instead of input fields for the options since making the user input their choices gets pretty annoying.
// Contains the story and paths
var story = {
intro: {
prompt: 'It is 12am and you are starving. It\'s too late to order delivery. You know what that means.',
options: [{
name: 'Fight',
path: 'choose_weapon'
}, {
name: 'Starve',
path: 'die_starve'
}]
},
choose_weapon: {
prompt: 'Choose your weapon!',
options: [{
name: 'Knife',
path: 'die_cut'
}, {
name: 'Toaster',
path: 'toast'
}]
},
toast: {
prompt: 'You toast some bread. What do you do next?',
options: [{
name: 'Eat it!',
path: 'eat'
}, {
name: 'Slather on some peanut butter!',
path: 'peanut_butter'
}]
},
peanut_butter: {
prompt: 'There is now peanut butter on your bread. Excellent choice. What do you do next?',
options: [{
name: 'Eat it!',
path: 'eat'
}, {
name: 'Throw it away',
path: 'die_starve'
}]
},
eat: {
prompt: 'It was delicious! You are no longer hungry.',
options: [{
name: 'Start Again',
path: 'intro'
}]
},
die_cut: {
prompt: 'You accidentally cut yourself and bleed to death.',
options: [{
name: 'Start Again',
path: 'intro'
}]
},
die_starve: {
prompt: 'You have died of hunger!',
options: [{
name: 'Start Again',
path: 'intro'
}]
}
}
/**
* Chosen option is an object with properties {name, path}
*/
function display_scenario(chosen_option) {
var option_name = chosen_option.name;
var option_path = chosen_option.path;
var scenario = story[option_path];
// Clear the #prompt div and the #options div
$('#prompt').empty();
$('#options').empty();
// Create a <p> to display what the user has chosen if option_name is not null and append it to the #prompt <div>
if (option_name) {
$('<p>').html('You have chosen <b>' + option_name + '</b>').appendTo('#prompt');
}
// Append the scenario's prompt
$('<p>').html(scenario.prompt).appendTo('#prompt');
// Append the options into the #options <div>
// We want to loop through all the options and create buttons for each one. A regular for-loop would not suffice because adding a button is not asynchronous. We will create an asynchronous loop by using recursion
function add_option_button(index) {
if (index === scenario.options.length) {
// Base case
return;
}
var option = scenario.options[index];
// Create a <button> for this option and append it to the #options <div>
$('<button>')
.html(option.name)
.click(function(e) {
// This is an onclick handler function. It decides what to do after the user has clicked on the button.
// First, prevent any default thing that the button is going to do, since we're specifying our own action for the button
e.preventDefault();
// We'll want to call display_scenario() with this option
display_scenario(option);
})
.appendTo('#options');
// Add the next option button
add_option_button(index + 1);
}
add_option_button(0);
}
// This function waits until the document is ready
$(document).ready(function() {
// Start the story
display_scenario({
name: null,
path: 'intro'
});
});
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
* {
margin: 0px;
padding: 0px;
color: #32363F;
font: 18px 'Open Sans', sans-serif;
border: none;
outline: none;
box-sizing: border-box;
}
html {
display: table;
width: 100%;
height: 100%;
}
body {
display: table-cell;
background: #32363F;
vertical-align: middle;
}
#wrapper {
margin: 40px;
background: #D6C2A3;
width: calc(100% - 80px);
}
h1 {
display: block;
padding: 20px 20px 12px;
font: 700 36px 'Open Sans', sans-serif;
background: #E84949;
color: #FAFAFA;
text-transform: uppercase;
}
#prompt {
padding: 20px;
}
#prompt p {
padding-bottom: 8px;
}
#prompt p b {
font-weight: 700;
}
#options {
display: flex;
padding: 0px 20px 28px;
text-align: center;
}
#options button {
margin: 0px 8px;
padding: 8px 20px;
background: #C2AE8F;
width: 100%;
cursor: pointer;
}
#options button:hover,
#options button:active {
background: #E84949;
color: #FAFAFA;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<h1>Food Adventure</h1>
<div id="prompt"></div>
<div id="options"></div>
</div>
I know CSS is "cascading", but in this case I want the effect to ascend. I'm open for either a JS or CSS solution, but honestly I'd prefer the solution with the least amount of code or overhead.
When I hover over a (child) letter, I want the entire background color to change for the ENTIRE WINDOW, not just the child element. Each letter is contained within the parent #word div which fills the whole window (or body).
It would be nice if something like the below existed in css:
#h:hover #word{
background-color: rgba(0, 102, 0, .5);
}
But it's not working. Anyone have any ideas??
HTML:
<div id="word">
<h1><a id="h" class= "letter" href=#>H</a></h1>
<h1><a class= "letter" href=#>E</a></h1>
<h1><a class= "letter" href=#>L</a></h1>
<h1><a class= "letter" href=#>L</a></h1>
<h1><a class= "letter" href=#>O</a></h1>
</div>
CSS:
body {
/*font-family: 'Sigmar One', cursive;*/
font-family: 'Chango', cursive;
font-size: 115px;
color: white;
text-shadow: 5px 5px 5px #000;
/* background-color: #0047b2 */
width: 100%;
height: 100%;
margin: 0px;
background: url(img/texture.png) repeat;
}
#word {
position:absolute;
height:100%;
width: 70%;
display: table;
padding: 0 15% 0 15%;
background: rgba(0, 71, 178, .5);
}
h1 {
display: table-cell;
vertical-align: middle;
text-align:center;
height: 1em;
}
a {
/*border: 1px solid black;*/
display: inline-block;
line-height: 100%;
overflow: hidden;
}
a:visited, a:active {
text-decoration: none;
color: white;
/*color: #E8E8E8;*/
}
a:link {
text-decoration: none;
color: white;
text-shadow: 3px -3px 0px black, -2px 2px 5px #0056b2;
}
a:hover {
text-shadow: 5px 5px 5px #000;
color: white;
}
#h:hover #word{
background-color: rgba(0, 102, 0, .5);
}
#media (max-width: 1330px){
#word {
width: 100%;
padding: 0px;
}
}
Fiddle: http://jsfiddle.net/SZ9ku/1/
The solution would probably be JS:
$(".letter").hover(function() {
$(this).closest("#word").toggleClass("hovered")
});
Here is a fiddle: http://jsfiddle.net/zT9AS/2
True;
#word #h:hover {
background-color: rgba(0, 102, 0, .5);
}
False;
#h:hover #word{
background-color: rgba(0, 102, 0, .5);
}
A without jquery solution:
onload = function()
{
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; ++i)
{
if (links[i].className == 'letter')
{
links[i].onmouseover = function() {
document.getElementById('word').style.backgroundColor="#0000FF";
};
links[i].onmouseout = function() {
document.getElementById('word').style.backgroundColor="#FFFFFF";
};
}
}
}
It can be done in pure JS, no jQuery (I assume you don't want that since it wouldn't be that light in code), this is the best I could came out with:
var word = document.getElementsByClassName("letter");
for (i=0; i<word.length; i++) {
word[i].addEventListener("mouseenter", function( event ) {
parent = event.target.parentNode.parentNode;
//whenever the mouse hovers over a letter this will be evaluated once
parent.style.backgroundColor = "green";
});
word[i].addEventListener("mouseout", function( event ) {
parent = event.target.parentNode.parentNode;
//whenever the mouse hovers over a letter this will be evaluated once
parent.style.backgroundColor = "";
});
}
Try it in this fiddle: http://jsfiddle.net/SZ9ku/17/
In POJS, add the following
CSS
.wordBg {
background: rgba(0, 102, 0, .5) !important;
}
Javascript
var changeWordBg = (function (word) {
return function (evt) {
if (evt.target.classList.contains("letter")) {
switch (evt.type) {
case "mouseover":
word.classList.add("wordBg");
break;
case "mouseout":
word.classList.remove("wordBg");
break;
default:
}
}
};
}(document.getElementById("word")));
document.body.addEventListener("mouseover", changeWordBg, false);
document.body.addEventListener("mouseout", changeWordBg, false);
On jsfiddle