Create Flash Card Review
Hope its okay to share this. Only fear I have is that some people might not be comfortable working with html or javascript.
Anyway, this is a cool and short bit of html/javascript/css that allows for flash card/multiple choice question generation. And it is pretty easy to use.
Copy and paste code in to your favorite text editor (notepad, textpad, whatever). Delete the that is found at the end of the code section. Now, save file with a .htm or .html extension.
For example:
"CustomExam.htm"
"CustomExam.html"
Now, just double click on the file to open it.
Here's how it works. You simply roll your mouse cursor over the question and the answer is revealed in windows status bar (at bottom of browser).
Two things:
1 - Scripting needs to be enabled (it probably already is)
2 - Windows status bar must be enabled too (View->Status Bar)
If you're not familiar with html or javascript all I can say is look at the code. You should be able to figure it out.
<!--STARTCODE
<html>
<style>
body
{
margin-left: 1cm;
background-color="lightblue";
}
H1
{
text-align: center;
color: "#ffffff";
}
.question
{
font-family: Arial;
color: #ffffff;
font-size: 18px;
}
</style>
<head><title>Practice Questions</title></head>
<body>
<H1>Sample Questions</H1>
<H2>PRINTERS</H2>
<div class="question"
onMouseover="window.status='The Drum'" onMouseout="window.status=' '">
1. Which part of the laser printer should you never expose to sunlight (or strong light)?
</div>
<div class="question"
onMouseover="window.status='To transfer the toner from the drum to the paper.'" onMouseout="window.status=' '">
2. In laser printers, what is the purpose of the transfer corona wire?
</div>
</body>
</html>
ENDCODE-->
Anyway, this is a cool and short bit of html/javascript/css that allows for flash card/multiple choice question generation. And it is pretty easy to use.
Copy and paste code in to your favorite text editor (notepad, textpad, whatever). Delete the that is found at the end of the code section. Now, save file with a .htm or .html extension.
For example:
"CustomExam.htm"
"CustomExam.html"
Now, just double click on the file to open it.
Here's how it works. You simply roll your mouse cursor over the question and the answer is revealed in windows status bar (at bottom of browser).
Two things:
1 - Scripting needs to be enabled (it probably already is)
2 - Windows status bar must be enabled too (View->Status Bar)
If you're not familiar with html or javascript all I can say is look at the code. You should be able to figure it out.
<!--STARTCODE
<html>
<style>
body
{
margin-left: 1cm;
background-color="lightblue";
}
H1
{
text-align: center;
color: "#ffffff";
}
.question
{
font-family: Arial;
color: #ffffff;
font-size: 18px;
}
</style>
<head><title>Practice Questions</title></head>
<body>
<H1>Sample Questions</H1>
<H2>PRINTERS</H2>
<div class="question"
onMouseover="window.status='The Drum'" onMouseout="window.status=' '">
1. Which part of the laser printer should you never expose to sunlight (or strong light)?
</div>
<div class="question"
onMouseover="window.status='To transfer the toner from the drum to the paper.'" onMouseout="window.status=' '">
2. In laser printers, what is the purpose of the transfer corona wire?
</div>
</body>
</html>
ENDCODE-->
Comments
-
Merciful
Member Posts: 9 ■□□□□□□□□□
Very cool stuff.
This is ideal for someone who wants to concentrate studies on a few specific items that they are having a rough time with. -
New User
Member Posts: 75 ■■□□□□□□□□
Thanks
Hope that most if not everyone that tries it can get it to work for them. -
Ricka182
Member Posts: 3,359
I got it to work I think. I put the code into html format with notepad, and viewed the page. This is just a template, right? I can just add on, and make the flashcards by adding the material......I appreciate the one who can do that. I don't have the patience, although it is pretty cool. Did you make it yourself?i remain, he who remains to be....
-
New User
Member Posts: 75 ■■□□□□□□□□
Yup. All you have to do is copy and paste as many as the following as you want and fill in the portions for the questions (Q) and answers (A).
<div class="question"
onMouseover="window.status='A'"
onMouseout="window.status=' '">
Q
</div>
So for example, the following represents 3 new questions:
<div class="question"
onMouseover="window.status='A garbage truck'"
onMouseout="window.status=' '">
1) What has four wheels and flies?
</div>
<div class="question"
onMouseover="window.status='thump thump thump'"
onMouseout="window.status=' '">
2) Three nuns walk into a bar
</div>
<div class="question"
onMouseover="window.status='Green'"
onMouseout="window.status=' '">
3) Ummm...Whats my favorite color?
</div>
Try it out.
Add a question, then save the file, then refresh the browser that is showing your test page.
Make sure that you paste all new entries immediately following the existing ones. If you do this you'll have no problems
Yeah I made it myself but I remember a similar example in one of my old javascript books so I guess I sorta borrowed the idea.