Final A1 assignment

A1styles.css

@@ -0,0 +1,31 @@
+body {
+    font-family: "Arvo", serif;
+    background-color: lightgrey;
+    padding: 20px;
+}
+.module#page-content {
+    align: center;
+    background: white;
+    width: 50%;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 20px;
+    border-radius: 9px !important;
+    box-shadow: 0 5px 5px #333333; 
+}
+
+.header {
+    padding: 20px;
+    font-size: 40px;
+    text-align: center;
+}
+#self-header {
+    background-color: lightblue;
+    border-radius: 9px 9px 0px 0px;	
+}
+#exp-header {
+    background-color: lightgreen;
+}
+.content {
+    padding: 20px;
+}

README.md

@@ -1,77 +1,19 @@
 Assignment 1 - Hello World: Basic Deployment w/ Git, GitHub, Heroku  
 ===
 
-This assignment is a "warm-up" exercise. 
-You will simply deploy the starting Web site that you will use this term to the [Heroku Web platform](http://www.heroku.com/). 
-
-Refer to [Getting started with node.js on Heroku](https://devcenter.heroku.com/articles/getting-started-with-nodejs#introduction).
-
-(Thanks to past instructors of the course, here is a short [getting started with Heroku movie](http://web.cs.wpi.edu/~gpollice/Movies/HerokuGettingStarted/) that may also help.)
-
-Treat this assignment as a chance to get up to speed on Git, GitHub, and Heroku. 
-If you already know these, great. 
-However, if you're new to them, spend several hours practicing, experimenting, and reading documentation. 
-In other words, don't just get your website up and done. You will need skill with these tools throughout the rest of the course.
-
-Assignment details
----
-
-Do the following to complete this assignment:
-
-1. Fork the starting project code. This repo contains:
-    * the server code, `server.js`
-    * the `Procfile` that you need for Heroku deployment
-    * A starting `index.html` file that you will edit as described below
-2. Edit `index.html` to show the following information about you:
-    * your name and class at WPI (e.g. class of 2020) Note: Do not put any contact or personal information that you do not potentially want other people outside of this class to see.
-    * your major(s) and minor(s)
-    * previous computer science courses that you have taken at WPI
-    * your experience with the following technologies and methods (none, some, a lot)
-        * HTML
-        * CSS
-        * Java
-        * JavaScript
-        * Ruby
-        * Python
-        * unit testing
-3. Test your project to make sure that when someone goes to your main page, it displays correctly.
-4. Deploy your project to Heroku.
-5. Ensure that your project has the proper naming scheme (guide follows) so we can find it.
-6. Modify the Readme to the specification below.
-7. Create and submit a Pull Request to the original repo.
-
-Naming and URL Scheme
----
-
-You must use a consistent naming scheme for all projects in this course.
-If we can't find it, we can't grade it.
-
-By default Heroku assigns your application a random name.
-To change it, follow [this guide](https://devcenter.heroku.com/articles/renaming-apps).
-
-The name scheme should be `a1-yourGitHubUsername`.
-The `a1` will need to be updated to `a2`, `a3`, and so on in future projects.
-
-Resources
----
-
-If you need a JavaScript/HTML/CSS refresher, see [Technology Fundamentals by Scott Murray](http://chimera.labs.oreilly.com/books/1230000000345/ch03.html#_html) and/or [JavaScript Codeacademy](https://www.codecademy.com/en/tracks/javascript).
-
-If you need a Git/GitHub refreseher, see [GitHub Bootcamp](https://help.github.com/categories/bootcamp/), the [GitHub Guides](https://guides.github.com/) (especially the ones on Hello World, and Understanding the GitHub Flow, and Forking Projects), and [CodeSchool's Try Git Course](https://www.codeschool.com/courses/try-git).
-
-Sample Readme (delete the above when you're ready to submit, and modify the below so with your links and descriptions)
----
-
-Lane Harrison  
-http://codementum-a1.herokuapp.com
+Adam Camilli  
+https://a1-adamocamilli.herokuapp.com/
 
 This project shows ...
 
 ## Technical Achievements
-- **Proved P=NP**: Using a combination of...
-- **Solved AI**: ...
+- **Implemented CSS animation**: The first question in my quiz section uses a typewriter effect using a simple keyframe rule. 
+- **Responses to quiz are aligned left and right on the same line**: Done with a very common HTML trick where one floats the respective responses left and right in CSS instead of aligning them (which will split them up).
+- **Split the HTML, CSS, and JS into their own documents**: Massively improving readability by simply adding more `includefile()` cases to `server.js`. 
+- **Enable dynamic display of quiz elemetns with JS**: Use of the CSS `display` property and `onclick` JS listeners.
 
 ### Design Achievements
-- **Re-vamped Apple's Design Philosophy**: Shown in `style.css`, the code...
-
+- **Successfully imitated the style of a blog I like**: The minimalist style of my page is modeled after one of my [favorite tech blogs](http://matt.might.net/).
+- **Used a consistent font scheme throughout page with Googlefonts**: Used the Google font API and appropriate HTML tags to maximize readability and clarity of text.
+- **Used a proven visually pleasing color scheme**: Neutral gray of background + the header colors form the known [peppercorn hue combination](https://www.pinterest.com/pin/45528646205244991/).
 

a1scripts.js

@@ -0,0 +1,121 @@
+// Question objects
+function question(text,type,responses,ans,wrong) 
+{
+    this.text = text;
+    this.type = type;
+    this.responses = responses;
+    this.ans = ans;
+    this.wrong = wrong;
+}
+
+var q1 = new question("Did Adam take CS 1102?","tf",
+		      ["True","False"],"True",
+		      "Nope, I did freshman year");
+var q2 = new question("Did Adam take CS 2301?","tf",["True","False"],"False", "Nope, I took 2303");
+var q3 = new question("Did Adam take CS 3431?","tf",["True","False"],"True", "Yep, I did junior year");
+var q4 = new question("Did Adam take CS 4432?","tf",["True","False"], "False", "Nope, I didn't");
+var q5 = new question("What was Adam's favorite CS course as of Aug 2018?","multi",
+		      ["CS 1102","CS 2102","CS 3733","CS 4341"],
+		      "CS 4341", "Nope, it was Soft. Eng. with Prof. Heineman");
+var q6 = new question("What is Adam minoring in?","multi",
+		      ["Spanish","Data Science","English","ECE"],"Spanish", 
+		      "Nope, I'm minoring in Spanish");
+var q7 = new question("What is Adam's executive role on the WPI sailing team?","multi",
+		      ["Rear Commodore","Treasurer","Commodore","Vice Commodore"], "Vice Commodore", "Nope, I'm the vice commodore (VP)");
+var q8 = new question("What year is Adam?","multi",["Sophomore","Junior","Senior","Super Senior"], "Senior", "Nope, I'm a senior");
+var q9 = new question("Does Adam play the guitar?","tf",["True","False"], "True", "Yep, I do");
+var q10 = new question("What was Adam's first prog. language?","multi",
+		       ["Java","FORTRAN","C","Brainfuck"],"Java","No, it was Java");
+
+var questions = [q1,q2,q3,q4,q5,q6,q7,q8,q9,q10];
+var usedQuestions = [];
+var activeQuestion;
+var resetting = false;
+
+var panel = document.getElementById('question-panel');
+var button = document.getElementById('submit');
+
+button.onclick = 
+    function () {
+	hideButtons();
+	// Checks before question appears
+	if (resetting) // Reset after all questions done
+	    resetSubmit();
+	if (panel.classList.contains('active')) { // reset animation 
+	    console.log("Active detected");
+	    panel.classList.remove('active'); 
+	}
+	// Check if all questions completed
+	if (!questions.length) {
+	    panel.innerHTML = "You've completed all questions!";
+	    panel.classList.add('active');
+	    changeSubmit();
+	    return;
+	}
+
+	// Actual question
+	panel.classList.add('active'); // Make question div visible
+	randIndex = Math.floor(Math.random() * (questions.length)); // Pick random question
+	activeQuestion = questions[randIndex];
+	panel.innerHTML = questions[randIndex].text; // Fill question div
+	if (questions[randIndex].type === "tf") {
+	    console.log("tf show");
+	} else { 
+	    console.log("multi show");
+	}
+	showButtons(questions[randIndex]);
+
+	usedQuestions.push(questions[randIndex]);
+	questions.splice(randIndex,1);
+	console.log(questions);
+	console.log(usedQuestions);
+    };
+
+function showButtons(question) {
+    if (question.type === "tf") {
+	document.getElementById("choice-true").style.display = "inline";
+	document.getElementById("choice-true").innerHTML = "True";
+	document.getElementById("choice-false").style.display = "inline";
+	document.getElementById("choice-false").innerHTML = "False";
+    } else { 
+	document.getElementById("choice1").style.display = "inline";
+	document.getElementById("choice1").innerHTML = question.responses[0];
+	document.getElementById("choice2").style.display = "inline";
+	document.getElementById("choice2").innerHTML = question.responses[1];
+	document.getElementById("choice3").style.display = "inline";
+	document.getElementById("choice3").innerHTML = question.responses[2];
+	document.getElementById("choice4").style.display = "inline";
+	document.getElementById("choice4").innerHTML = question.responses[3];
+    }
+}
+
+function hideButtons() {
+    document.getElementById("choice-true").style.display = "none";
+    document.getElementById("choice-false").style.display = "none";
+    document.getElementById("choice1").style.display = "none";
+    document.getElementById("choice2").style.display = "none";
+    document.getElementById("choice3").style.display = "none";
+    document.getElementById("choice4").style.display = "none";
+}
+
+function changeSubmit() {
+    button.innerHTML='Go Again!';
+    resetting = true;
+}
+function resetSubmit() {
+    button.innerHTML='New Question';
+    questions = usedQuestions;
+    usedQuestions = [];
+    resetting = false;
+    panel.classList.remove('active');   
+}
+
+document.getElementById('choices').onclick=function(e) {
+    if (e.target.innerHTML !== activeQuestion.ans) {
+	alert(activeQuestion.wrong);
+    } else {
+	alert("Correct!");
+    }
+}
+
+

a1scripts.js~

@@ -0,0 +1,45 @@
+var questions = ["Qasdfas1", "Qasdfasdf2", "Qsfasdfsa3", "Qfasdfasdf4", "Qfasdf5", "Qfasdfasd6", "Qfasdfsaf7", "Qfdsafsdf8"];
+var usedQuestions = [];
+var resetting = false;
+
+var panel = document.getElementById('question-panel');
+var button = document.getElementById('submit');
+
+button.onclick = 
+    function () {
+	if (resetting) 
+	    resetSubmit();
+	if (panel.classList.contains('active')) {
+	    panel.classList.remove('active'); 
+	    return;
+	}
+
+	if (!questions.length) {
+	    panel.innerHTML = "You've completed all questions!";
+	    panel.classList.add('active');
+	    changeSubmit();
+	    return;
+	}
+
+	panel.classList.add('active');
+	randIndex = Math.floor(Math.random() * (questions.length));
+	panel.innerHTML = questions[randIndex];
+
+	usedQuestions.push(questions[randIndex]);
+	questions.splice(randIndex,1);
+	console.log(questions);
+	console.log(usedQuestions);
+    };
+
+function changeSubmit() {
+    button.innerHTML='Go Again!';
+    resetting = true;
+}
+function resetSubmit() {
+    button.innerHTML='New Question';
+    questions = usedQuestions;
+    usedQuestions = [];
+    resetting = false;
+    panel.classList.remove('active');   
+}
+

a1styles.css

@@ -0,0 +1,82 @@
+body {
+    font-family: "Arvo", serif;
+    background-color: lightgrey;
+    padding: 20px;
+}
+.module#page-content {
+    align: center;
+    background: white;
+    width: 50%;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 20px;
+    border-radius: 9px !important;
+    box-shadow: 0 5px 5px #333333; 
+}
+
+.header {
+    padding: 20px;
+    font-size: 40px;
+    text-align: center;
+}
+#self-header {
+    background-color: lightblue;
+    border-radius: 9px 9px 0px 0px;	
+}
+#exp-header {
+    background-color: lightgreen;
+}
+#quiz-header {
+    background-color: #ff8080;
+}
+.content {
+    font-family: "Arvo", serif; 
+    padding: 20px;
+}
+
+@keyframes typing {
+    from {width: 0}
+    to {width: 100%}
+}
+#question-panel {
+    overflow: hidden;
+    white-space: nowrap; 
+    margin: 0 auto; 
+    letter-spacing: 0em; 
+    text-align: center;
+    padding: 10px; 20px;
+} .active#question-panel {
+    animation: 
+        typing 1.5s steps(40,end);
+}
+.floatright {
+    float: right;   
+}
+.floatleft {
+    float: left;
+}
+
+#submit {
+    font-family: "Arvo", serif; 
+    background-color: #4CAF50; /* Green */
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+button.quiz {
+    font-family: "Arvo", serif; 
+    background-color: #4CAF50; /* Green */
+    border: none;
+    color: white;
+    padding: 15px 15px;
+    text-align: center;
+    font-size: 14px;
+    cursor: pointer;
+    display: none;
+
+    margin: 30; /* this will center  it */    
+}