My Nerdy Proposal - Website Quiz

The Story and Idea

This hub is dedicated to the way I proposed to my girlfriend in 2011. I wanted ask her in a way that was unique to me and would be personable to us both. At the time, I was going to school for computer science so I was handy with computers and had skills in software development. Almost as soon as I decided I was going to ask her to marry me, I knew I would create some kind of nerdy application or website that I would use in my proposal so I started brainstorming. I finally settled on a quiz where the final question would be "Will you marry me?" Luckily this was months from an anniversary of ours so it gave me a perfect time frame to develop this quiz app and get it ready.

From a technical standpoint, the programming language I was most familiar with was Java, but I didn't just want to make a java app that I would have to send to people. I wanted this app to be accessible to my family and friends so a website was an obvious choice for me. At this point I knew minimal html but enough to start building a working knowledge of what I needed to do to pull this project off and to my standards. Over the course of the remaining months until, roughly, our anniversary, I spent countless hours developing this app that involved so many new things that I hadn't learned in school, like java applets, embedding applets in websites, hosting a website, etc. Thankfully I was able to pull it off and get my applet written, compiled, and posted to my (extremely basic) site. My app was full of inside jokes and my kind of humor so everyone would know I created it.

Although my app was developed, posted to my site and seemingly ready to go, I ran into another problem. I was planning on spending an anniversary night with my girlfriend in the city and our only way to access a website would be our cell phones. If you don't know, android phones, as of 2011, could not execute java apps so, if we were to go to this proposal site I had created, we would just see the background and title. However, I knew that there was a way to remote desktop into a computer from my girlfriends phone and still access the website!! :) I managed to convince my girlfriend to download a remote desktop app on here phone and told her I made her something I wanted her to see. We spent the day in the city together and finally sat down in a park so I could show her my quiz. After multiple connection issues throughout the quiz, she finally arrived at the last question, I got down on one knee, asked her to marry me, and she said yes! It was one of the most stress-filled projects I've ever attempted with all the issues developing and finally taking the quiz but it was definitely worth it.

For You

I decided to share this story and idea with the hubpage and (hopefully) the online community. I will post a link to the current proposal site so you can see what mine is like. I will also include some snippets of code, ideas, suggestions, etc. so that you can make a similar creation that personifies you and your relationship in anticipation of your proposal/engagement. These pieces of code and this overall concept can be applied elsewhere as well if you have another life-changing event you want to create a quiz and/or website for. You can also read this hub to create one just for fun or to learn how to write some code in java or html. I will break down most parts of the code and the entire process as a whole to give you an overview of how to: write an applet, create a web page, host a web page, and embed your applet in the website.

I hope you enjoyed my story and hope the guide below helps you if you want to create something similar. Please leave a comment about this hub, story, information, or whatever else you would like. Feel free to post questions in the comments or in a private message. I would be happy to help you through any issues you come across as much as I can.

• Tips for Proposal
• Web Site Hosting
• Code the App
• Web Page - HTML File
• Final Steps
• Java Code Example

Web Site Hosting

Before you start coding make sure you have a hosting option you can use, assuming you want to put your app in a web site to share. There are a variety of hosting sites that provide priced hosting and domain names or some are free. The free hosting doesn't allow you to get a free domain name so it is usually some kind of domain extension or sub-domain that you are given. A full, custom domain name is something similar to normal sites like google.com so something like proposalquiz.com. An extension address is something like proposalquiz.freehosting.com. Free hosting also tracks activity and will discontinue your site if you don't log in to the admin panel every 30 days or a similar time period. I will provide links in this hub to some free and priced hosting sites. Most hosters allow for java to be uploaded and embedded in your html files, but you can double check if you feel insecure about it.

Code the App

This section will include some snippets of code and explanations of what the code is doing. The language I am writing in is Java and some code is specific to applets and being able to embed in web sites so make sure you have those. Please do not copy any variables or strings verbatim so you aren't just making a copy of my app for you. Give your application your personality, not mine. :) I will explain as much as I can/remember and will put the code in italicized font for better readability. This guide is for people who are somewhat familiar with coding already. If you do not know how to code or haven't developed an application before, please utilize the tutorial link on the right or send me a message (I may just refer you to the tutorial though if I see fit).

I recommend coding with an IDE like netbeans or visual studio so that you are notified of errors in your code and of missing imports and of other flaws in your code. Notepad++ can also be used to write code (basically regular notepad for coding).

It is critical to test WHILE developing. Do not write all this code and test it afterwards. Fix issues as you go along. Also, it will probably help to create the web page and embed the applet early on so you know how to do it and how it'll look (see Web Page and Final Steps sections below).

Okay so lets get coding!!!!

You will want to use your IDE to create a new Java project. I named mine testapplet so all my java files have this name. If you name your project something else, you will need to make sure its changed in all of my instructions where I use the file name testapplet.

The following code is used to import object libraries. Basically you put these at the top of your code to import code that already exists and that you can reference so you are not reinventing the wheel with common, rudimentary code. The applet, obviously, allows you to add code to make an applet, the awt imports are for window/gui creation as well as the swing imports. You may need additional imports if you are using different objects or functions than I am (your IDE will probably let you know if something's missing or your program will fail if you try to run it).

import java.applet.Applet;
import java.awt.*;
import java.awt.event.*;
import java.io.PrintStream;
import javax.swing.*;

Now we will create the applet object and attach event listeners to it. We will mark the object as an applet and add action listeners that allow the code to react to a user's interactions so, when a user clicks a button or interacts in any way with the applet, the code can respond accordingly. The following line creates an applet testapplet and attaches two action listeners.

public class testapplet extends Applet implements ActionListener, ItemListener {

Okay so now we are ready to tell the applet what we want it to look like and how we'd like it to behave. The variables and objects I used are declared inside the class declaration so they are globally accessible to the different methods inside the class. These objects/variables track the quiz and are the different objects used to move from question to question, select an answer, or display a label. The int's and boolean track the user through the quiz with what question/step they are on so the correct question is displayed or the user doesn't exceed the bounds of the quiz's steps. Here are my objects:

boolean step;
int steps;
int max;
Panel qpanel;
Panel apanel;
Panel spanel;
Label label;
TextField tf;
Button submit;
Button register;
Button last;
Button restart;
CheckboxGroup cbg;
Checkbox radioOther;
Checkbox radio1;
Checkbox radio2;
Checkbox radio3;
Checkbox radio4;

The applet will run an init() method that will initialize the applet, create objects and initialize variables. It will also generate the starting screen where a single button with the label "Start Quiz" will be displayed. An action listener will be attached to the button so it generates a response when clicked. Here is the init() method that initializes these objects and variables:

public void init()
{
step = false;
steps = 0;
max = 10;
setLayout(new BorderLayout());
Panel p = new Panel();
setSize(600, 500);
submit = new Button("Start Quiz");
submit.addActionListener(this);
submit.setPreferredSize(new Dimension(150, 100));
p.add(submit);
add(p, "Center");
steps++;
}

Woo! Finally time for the fun stuff haha.

You will now implement your quiz code in the applet. There is a function that is called whenever an action event occurs so, when your user clicks a button, it will execute the function. Therefore, you use the step counter to go to the next page/question each time the user clicks the submit button. Essentially, the action event function acts as a loop. Each time a question is answered correctly the next question will reset the layout, objects and variables and reuse them so you use the objects over and over again through each step. The object that is calling the function is passed as the parameter so it is easy to find out what caused the action. My actionPerformed function first checks if the button clicked was the restart button so it can reinitialize all the variables and objects, effectively resetting the quiz. If the restart button did not cause the action, the code goes forward through the event code. Here is the initial code for the event function:

public void actionPerformed(ActionEvent e)
{
if(e.getSource() == restart)
{
super.removeAll();
step = false;
steps = 0;
max = 10;
setLayout(new BorderLayout());
Panel p = new Panel();
setSize(600, 500);
submit = new Button("Start Quiz");
submit.addActionListener(this);
submit.setPreferredSize(new Dimension(150, 100));
p.add(submit);
add(p, "Center");
validate();
steps++;
}

Following this code is a switch statement that checks the value of steps and goes to the corresponding page/question number which is then generated and displayed to the user. I will show the first, second and the last cases since the in-betweens are copies of the second case with different options and labels. The last question is special as it stops the quiz and displays the reset button. The way I have it set up is that, when a user answers a question and clicks submit, the next question won't display unless the last question was correct. If incorrect, an error message will pop up and tell the user they got the question wrong and will need to reanswer, if necessary, to advance the quiz. Here is the code for the first, second and last questions (make sure you include a default case in your switch statement):

if(e.getSource() == submit || e.getSource() == register || e.getSource() == last)
switch(steps)
{
case 1: // '\001'
super.removeAll();
setLayout(new BorderLayout());
qpanel = new Panel();
apanel = new Panel();
apanel.setLayout(new BoxLayout(apanel, 1));
spanel = new Panel();
label = new Label("Question 1?");
cbg = new CheckboxGroup();
radio1 = new Checkbox("Answer 1", false, cbg);
radio2 = new Checkbox("Answer 2", false, cbg);
radio3 = new Checkbox("Answer 3", false, cbg);
radio4 = new Checkbox("Answer 4", false, cbg);
submit = new Button("SUBMIT");
submit.setPreferredSize(new Dimension(60, 50));
submit.addActionListener(this);
spanel.add(submit);
add(label, "North");
apanel.add(radio1);
apanel.add(radio2);
apanel.add(radio3);
apanel.add(radio4);
add(spanel, "South");
add(apanel, "West");
validate();
steps++;
break;

case 2: // '\002'
if(cbg.getSelectedCheckbox().getLabel().equals("Correct answer label from last question"))
{
JOptionPane.showMessageDialog(new JFrame(), "CORRECT!!\nClick OK to continue.", "RIGHT!", -1);
removeAll();
setLayout(new BorderLayout());
qpanel = new Panel();
apanel = new Panel();
apanel.setLayout(new BoxLayout(apanel, 1));
spanel = new Panel();
label = new Label("Question 2?");
qpanel.add(prel);
qpanel.add(label);
cbg = new CheckboxGroup();
radio1 = new Checkbox("Answer 1", false, cbg);
radio2 = new Checkbox("Answer 2", false, cbg);
radio3 = new Checkbox("Answer 3", false, cbg);
radio4 = new Checkbox("Answer 4", false, cbg);
submit = new Button("SUBMIT");
submit.setPreferredSize(new Dimension(60, 50));
submit.addActionListener(this);
spanel.add(submit);
add(qpanel, "North");
apanel.add(radio1);
apanel.add(radio2);
apanel.add(radio3);
apanel.add(radio4);
add(spanel, "South");
add(apanel, "West");
validate();
steps++;
} else
{
JOptionPane.showMessageDialog(new JFrame(), "Wrong Answer.\nTry again.", "WRONG!", 0);
}
break;

case 11: // '\013'
if(cbg.getSelectedCheckbox().getLabel().equals("Correct Answer from previous question - case 10"))
super.removeAll();
setLayout(new BorderLayout());
qpanel = new Panel();
apanel = new Panel();
apanel.setLayout(new BoxLayout(apanel, 1));
spanel = new Panel();
restart = new Button("Restart Quiz"); //creates restart button to click and reset the quiz
restart.setPreferredSize(new Dimension(125, 50));
restart.addActionListener(this);
spanel.add(restart);
add(label, "North");
add(spanel, "South");
validate();
break;

You can create as many cases as you want with each case being customized with whatever questions and answers. For questions that have a correct answer, make sure you check with an if statement if the last question was answered correctly before moving on to the next question. Simply omit the if statement check if the question doesn't have a "correct" answer so the applet just goes to the next question. You can rename the variables, as long as you change every instance of it, and all the labels to whatever you'd like. Again, this code is more of a guide for you to build your own quiz on. I placed an example of the code together at the bottom of the page if that helps you.

Once you have your questions set up the way that you want, you are basically done with the java applet, aside from anything extra you want to add. Now you compile the code and move the .class file it creates to the folder with your html document (see the Web Page - HTML File section below) and you should be good to go.

I apologize for any messiness in the code as I didn't have enough time to go back and clean it up so I may have missed something. Also, I know there are endless ways of producing the same applet, but this is how I chose to create mine. Feel free to leave suggestions, flaws, ideas, comments, etc. in the comments section at the bottom.

Web Page - HTML FILE

Now that the applet has been developed it is time to embed it into a web page. This is an incredibly simple task so I will just post the entire html code (that I used). Only one line is required to actually embed the applet into the web page. You can open a simple text editor, copy in the code below, and save it as index.html. Remember to name the files as you have named them.

<html>
<head>
<title>Title of page in browser tab or title bar</title>
</head>
<body background="<image path>"> <!-- inserts the background of the website -->
<h1>Title at the Top of Page</h1>
<!-- code that embeds applet in web page -->
<APPLET code = "testapplet.class" Width = 600 HEIGHT =500></APPLET> </body>
</html>

Final Steps

Okay so you should have a coded applet and html file and wondering what to do now. If you have your web hosting set up, you will be uploading the files through whatever file upload/ftp process your hoster uses. This is most likely found in your admin panel once you log into your hosting site. You should have an index.html and testapplet.class as well as any background images you decided to add to your html file and you will upload all of these to the root of your files on your site (names can vary depending on what you called everything). The class file will be found in your java project folder after you compile your code. For testing, as long as your files are in the same folder you can open your html file in whatever browser you like and view your applet as it will be on your site, assuming your hosting allows for java applets.

I direct your questions to the comments section or you are welcome to send me a private message. Thank you for reading and I hope you enjoyed the story and/or basic tutorial on applets. :)