[SOLVED] simple flashcard script

sw45acp · November 2, 2009

Hi, I am trying to create a very simple flash card script. Problem is, I can't find any examples on how to navigate the array containing the questions. When a person clicks next it will show the answer to the question, then next again to show the question in the sequence. I have this code so far.

cards = new Array( "question 1", "answer", "question 2", "answer" );

function prevcard() {
?
}

function nextcard() {
?
}

any help you can give would greatly be appreciated!

sw45acp · November 2, 2009

I kind of just figured out a simple one. It writes to a textbox:

<html>
<head>
  <script type="text/javascript">
var stuff = new Array()
var which = 0;

stuff[0] = "one";
stuff[1] = "two";
stuff[2] = "three";
             //previous card
function prevcard() {
	if (which>0) {
		which --;
		theform.key.value = stuff[which];
	}
}
             //next card
function nextcard() {
	if (which<stuff.length-1) {
		which ++;
		theform.key.value = stuff[which];
	}
}
</script>
</head>
<body>

<form action="" name="theform">
<input type="text" name="key" /><br />
<input type="button" name="back" value="Previous card" onClick="prevcard()" />    
<input type="button" name="next" value="Next card" onClick="nextcard()" />    
</form>

</body>
</html>

However, I can't get it write to div element instead of a textbox. I am accessing it via id and using innerHTML. Can't get it to work...

  <style type="text/css">
  div {
	width: 200px;
	height: 150px;
	border: 1px solid #FF0000;
}
  </style>
  <script type="text/javascript">
var x = document.getElementById("mainbox");
var stuff = new Array()
var which = 0;

stuff[0] = "one";
stuff[1] = "two";
stuff[2] = "three";

function prevcard() {
	if (which>0) {
		which --;
		x.innerHTML = stuff[which];
	}
}

function nextcard() {
	if (which<stuff.length-1) {
		which ++;
		x.innerHTML = stuff[which];
	}
}
</script>
</head>
<body>
<div id="mainbox"></div><br />

<input type="button" name="back" value="Previous card" onClick="prevcard()" />    
<input type="button" name="next" value="Next card" onClick="nextcard()" />

Alex · November 2, 2009

I wrote this while you were writing your solution... Maybe it'll help, if you need an explanation just ask.

<script type="text/javascript">
var qnum = 0;
var anum = 0;
var questions = new Array('Question 1', 'Question 2', 'Question 3');
var answers = new Array('Answer 1', 'Answer 2', 'Answer 3');

function nextStep()
{
if(anum == answers.length)
	qnum = anum = 0;
if(qnum == anum)
{
	document.getElementById("question").innerHTML = questions[qnum++];
	document.getElementById("answer").innerHTML = '???';
	document.getElementById("next").value = 'Next Answer';
}
else
{
	document.getElementById("answer").innerHTML = answers[anum++];
	document.getElementById("next").value = 'Next Question';
}
}
</script>

<div>
Question: <span id="question"></span><br />
Answer: <span id="answer"></span><br />
<input type="submit" value="First Question!" id="next" name="next" onclick="nextStep();" />
</div>

sw45acp · November 2, 2009

This will work just fine! However, can we put in a back button to go back one card at a time also?

sw45acp · November 2, 2009

I added this but it after going back 2 the next button has to be clicked twice which is odd

function backStep()
{
if (qnum == anum)
{
	qnum -- ;
	anum -- ;
	document.getElementById("question").innerHTML = questions[qnum];
	document.getElementById("answer").innerHTML = '???';
}
else {
	qnum --;
	document.getElementById("question").innerHTML = questions[qnum];
}
}

Adam · November 2, 2009

Perhaps try this..

var qna = [['question 1', 'answer 1'],
           ['question 2', 'answer 2'],
           ['question 3', 'answer 3']];

var i = 0;

window.onload = function() {
    display();
}

function backStep() {
    i = (i == 0) ? qna.length-1 : i-1;
    display();
}

function nextStep() {
    i = (i == qna.length-1) ? 0 : i+1;
    display();
}

function display() {
    document.getElementById('question').innerHTML = qna[i][0];
    document.getElementById('answer').innerHTML   = qna[i][1];
}

sw45acp · November 3, 2009

This one works great. Thank you. I'm just a little confused on next and back functions on how exactly the code works there. I know with php that the ? and : means that: if x=2 ? (do this), if not : do that. Is that the same here?

Adam · November 3, 2009

Yeah, exactly the same..

Sign In

[SOLVED] simple flashcard script

Recommended Posts

sw45acp

Link to comment

Share on other sites

sw45acp

Link to comment

Share on other sites

Alex

Link to comment

Share on other sites

sw45acp

Link to comment

Share on other sites

sw45acp

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

sw45acp

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information