Options

Create Flash Card Review

New UserNew User Member Posts: 75 ■■□□□□□□□□
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-->

Comments

  • Options
    MercifulMerciful 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.
  • Options
    New UserNew User Member Posts: 75 ■■□□□□□□□□
    Thanks :)

    Hope that most if not everyone that tries it can get it to work for them.
  • Options
    Ricka182Ricka182 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....
  • Options
    New UserNew 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. :)
Sign In or Register to comment.