Need Help: Make the quiz random [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I'm having trouble making the questions random. If you could help, it would be awesome!
(If you have spear time; I've been given the task to mark correct answer with a green feather and wrong answers with red feather, for instance, if you get 3 correct and 2 wrong. It will show 3 green feathers and 2 red feathers as score.) Thank you!
<script type="text/javascript">
var questions = [
['firstcar.gif','0'],
['secondcar.gif','1'],
['thirdcar.gif','2'],
['firstcar.gif','0'],
['secondcar.gif','1'],
['thirdcar.gif','2'] // Note: no comma after last entry
];
var qNo = 0;
var correct = 0;
var cnt = 0;
function NextQuestion(response) {
if ((qNo < questions.length) && (response == questions[qNo][1])) {
correct++;
}
document.getElementById('score').innerHTML = 'Correct ' + correct + ' of 6 questions';
qNo++;
if (qNo < questions.length) {
document.getElementById('Pic').src = questions[qNo][0];
cnt++;
}else{
alert('Quiz is done. You got ' + correct + ' points!');
}
}
onload = function() {
document.getElementById('Pic').src = questions[0][0];
}
</script>
</head>
<body>
<div align="center">
<h1>Which car is it?</h1>
<img src="" id="Pic" height="200" width="250">
<p>Is it
<button onclick="NextQuestion('0')">Red</button>
<button onclick="NextQuestion('1')">Black</button>
<button onclick="NextQuestion('2')">Yellow</button>
<p>Your score: <br>
<span id="score"></span>
</div>
</body>
</html>

Well, your questions are in an array. So what you should be researching is how to randomise the order of an array.
questions.sort(function() { return Math.floor(Math.random() * 2); });

Related

How to place a variable inside getElementbyId() that changes during each repetition of a loop? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I want something similar to f" {variable} " of python
Ive tried
function press()
{
for(var i=0; i<4; i++)
{
if(!document.getElementById('ip'+i).value)
{
alert("error");
break;
}
}
but it didnt work.
I want something similar to f" {variable} " of python
template strings ${variable}
In JavaScript you can use template strings
The usage is
` ${variable} `
document.getElementById('btn').addEventListener('click', press)
function press() {
for (var i = 0; i < 4; i++) {
if (!document.getElementById(`ip${i}`).value) {
alert("error");
break;
}
}
}
<input id="ip0"/>
<input id="ip1"/>
<input id="ip2"/>
<input id="ip3"/>
<button id="btn">Click</button>

How do I replace strings with new ones in javascript/html? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have a slot machine that I made recently, but I would like to make it look a bit better.
https://codesandbox.io/s/slot-machine-xip7x?file=/index.html:0-1480 (I apologize, I was having issues copy and pasting the code into a code sample :( I am new to this site.)
Here is the result of that code: https://xip7x.csb.app/
Every time you roll, a bullet point show up at the left side of your screen with the result in the middle. When you roll multiple times, the new results are just added to what is already there. Can anybody make it so that there are no bullet points, and every time you roll it replaces your previous roll and only shows the new one, so you only have one roll on the page at all times. I am new to coding and would love to complete this project. If anybody could help me out and explain what they did, I would love that. Thanks!
is this what u want?
var firstx = ["X", "O", "L", "L"];
var secondx = ["X", "O", "L", "L"];
var thirdx = ["X", "O", "L", "L"];
function randIndex() {
var randIndex1 = Math.floor(Math.random() * 4);
var randIndex2 = Math.floor(Math.random() * 4);
var randIndex3 = Math.floor(Math.random() * 4);
var first = firstx[randIndex1];
var second = secondx[randIndex2];
var third = thirdx[randIndex3];
var btn = document.getElementById("btn");
var sent = document.getElementById("sent");
var result = first + " " + second + " " + third;
if (result == "X X X") {
alert("CONGRATULATIONS! YOU WIN!");
}
sent.innerHTML ="<li>" + result + "</li>";
btn.innerText = "Roll Again";
}
font-family: helvetica;
text-align: center;
-webkit-text-fill-color: black;
}
body {
background-color: lightcoral;
}
<!DOCTYPE html>
<html>
<head>
<title>Slot Machine</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>Slot Machine</h1>
<p>
Welcome to the slot machine! To play, click the "Roll" button. If you get
three X's, YOU WIN! Have fun and Enjoy your new gambling addiction!
</p>
<br />
<button id="btn" onclick="randIndex();">
Roll
</button>
<ul id="sent"></ul>
<br /><br />
<hr />
<br /><br />
</body>
</html>

I made a jquery script and I need help on how to make it auto switch between the 4 [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I am trying to make this script auto change between the four after 30 seconds, I am not to good at jquery but I wanted to give it a try. This is all on a .php page I am using to bring up the javascript from my other folders.
<div id="subnavi">
<div id="subnavi-user">
<div style="margin-top:7px"><b>Fact:</b> <script language="JavaScript">
var r_text = new Array ();
r_text[0] = "{hotelName} was founded in 2011 by Kyle";
r_text[1] = "{hotelName} strives to remain as professional as possible.";
r_text[2] = "{hotelName} will only keep on growing if you vote daily!";
r_text[3] = "Purchasing VIP in the forums helps with the monthly server costs.";
r_text[4] = "{hotelName} Is a new and developing RP!";
window.setInterval(function(){
var i = Math.floor(4 * Math.random())
document.write(r_text[i]);
var random = r_text[1];
}, 5000);
</script>
</div>
</div>
<div id="subnavi-search">
<div id="subnavi-search-upper">
<ul id="subnavi-search-links">
<li>Sign Out</li>
I am not sure if this is what you are looking for but here it is:
This script will run every time you reload the page. IF you need it to work in a different way just update your question and i will update my script.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var r_text = new Array();
r_text[0] = "Hello";
r_text[1] = "Test";
r_text[2] = "We are the lions";
r_text[3] = "Fight";
r_text[4] = "Switch!";
window.setInterval(function(){
var i = Math.floor(5 * Math.random())
var random = r_text[i];
$('#r_text').html(random);
}, 5000); // you can change the interval here
The HTML part
<div id="r_text"></div>
Check this out here
Update
Change your Math.floor to count to 5 because your array has 5 elements in it not 4
Update 2 Your file should look like something like this
<!Document html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var r_text = new Array();
r_text[0] = "Hello";
r_text[1] = "Test";
r_text[2] = "We are the lions";
r_text[3] = "Fight";
r_text[4] = "Switch!";
window.setInterval(function(){
var i = Math.floor(5 * Math.random())
var random = r_text[i];
$('#r_text').html(random);
}, 5000); // you can change the interval here
</script>
</head>
<body>
//Add your html/php code here and pick a place where to show the response of your function. Something like <div id="r_text"></div>
</body>
</html>

Hide <br /> tag from textarea [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
<script type='text/javascript'>
function replaceNewlines(e) {
var element = document.getElementById('myTextarea');
if (e.keyCode == 13) {
element.value = element.value.replace("\r", "<br />");
element.value += "___NEWLINE___\n";
element.value = element.value.replace("___NEWLINE___\n", "<br />");
}
}
</script>
This code works fine but when I press enter, <br /> appears in the textarea and I don't want to appear this in my textarea.
Can somebody help me?
So, how about replacing <br /> with a new line?
<script type='text/javascript'>
function replaceNewlines(e) {
var element = document.getElementById('myTextarea');
element.value = element.value.replace(/<br\s*\/?>/g, '\n');
}
</script>
See http://jsfiddle.net/tkR9S/ for a full demo.

How short can this script be and still achieve the same thing - display a message "loading.." followed by an extra period every 1 second for 7 seconds [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
<script>
var dot = ".";
var counter = 0;
var message = "Loading Page";
function writeLoadingMessage(){
if (counter > 6) return;
setTimeout('writeMessage();',1000);
}
function writeMessage(){
document.getElementById('loadingMessageSpan').innerHTML = message + dot;
message += dot
counter++
writeLoadingMessage();
}
</script>
<BODY>
<span style="font-weight:bold;" id="loadingMessageSpan"></span>
<SCRIPT>writeLoadingMessage();</SCRIPT>
</BODY>
(function(){var i=6,a=setInterval(function(){document.getElementById('loadingMessageSpan').innerHTML+=".";!i--&&clearInterval(a);},1E3)})()
You will need to have Loading already in your span tag. As a note it is pointless to worry about getting it this small though. Also, the page will will have to be already loaded.
If you want it shorter: http://jsfiddle.net/pimvdb/wBFSy/.
<script>
var counter = 0;
function writeMessage() {
document.getElementById('loadingMessageSpan').innerHTML += ".";
if(++counter < 7) {
setTimeout(writeMessage, 1000);
}
}
window.onload = writeMessage;
</script>
<body>
<span style="font-weight:bold;" id="loadingMessageSpan">Loading Page</span>
</body>
Minifying also helps :)
var a=0;function b(){document.getElementById("loadingMessageSpan").innerHTML+=".";++a<7&&setTimeout(b,1E3)}window.onload=b
1) User setInterval instead.
2) Just set the message once and append . to end
3) Put all the js at the bottom
<body>
<span style="font-weight:bold;" id="loadingMessageSpan">Loading Page</span>
<script type="text/javascript">
var counter = 0;
var id = setInterval(function(){
document.getElementById('loadingMessageSpan').innerHTML += ".";
if(++counter>6) {
clearInterval(id);
}
}, 1000);
</script>
</body>
If you really want it short you can go this route:
<BODY>
<span style="font-weight:bold;" id="loadingMessageSpan">Loading Page</span>
<script>
var counter = 0;
var interval = setInterval(function(){
document.getElementById('loadingMessageSpan').innerHTML += ".";
if(++counter > 6)
clearInterval(interval);
},1000)
</script>
</BODY>
http://jsfiddle.net/kc3fb/2/

Categories