thinkful-ed / quizful

An app for students to quiz themselves with multiple choice questions

#Quizful: Quizful is an app for students to test their knowledge of programming technologies, languages, and concepts. This project is open source, for students to have a way of understanding the open source process, as well as the GitHub workflow, while contributing to an app that they can use to better learn programming. The app will run on Openshift, and give students a place to test themselves on HTML, CSS, JavaScript, and any other topics students want to create questions for It will also be a student driven project, and allow for students to get into the workflow of contributing to open source work.

###Getting Started

The Repo

The master branch of the main repo is the production code, and you should not make pull requests to it. All pull requests should be made to the staging branch on the main repo. To start working on the code, or add questions, you should fork this repo to your own GitHub account. Make changes to your version of hte project, then make a pull request to the staging branch of the main repo.

Opening Issues

Issues are used for both bugs and features. When you open a bug, be sure to include as much information as possible, including any console errors, the browser you were using, and the actions you took to create the bug. If you are submitting a feature, you should include as many details about your idea as you can. You will notice that the existing issues have tags. Tags are a useful way to sort issues, and feel free to add tags that make sense (feature request or bug). The project admin will add tags as needed, so feel free to skip this step.

Making a Pull Request

When your code is ready to be merged into the main repo, you should commit it, push it to your forked repo and make a pull request on GitHub. You can work on whatever branch of your repo you like, and choose that branch in the pull request menu in the "compare" dropdown. The thinkful-ed/quizful staging branch should be the "base". When you make a pull request, make sure that you have the most recent code from the main repo merged into your repo to avoid merge conflicts. (see staying up to date. Make sure that the tests pass! (Run npm run test). If you're unsure of why their failing, ask someone. If you make a pull request, and GitHub tells you that it cannot be automatically merged, that means there is a conflict. You should handle any conflicts at that time. If you have questions, reach out to any of the folks listed in the contact info section. Once your pull request is submitted, and you know there are no conflicts, you will get a review on that pull request. Either a thumbs up, saying everything is ok or notes on things that should be edited before the pull request is merged. At that time, you can make the edits, push the code to your repo on the same branch the pull request is from and the code will automatically be included in the pull request. Once your code is approved, it will be merged.

##Contributing

###Ways to contribute ####Without setting up, and running the project:

• Open new Bugs, or add comments to the existing issues
• Suggest new functionality in the issues
• Add questions and answers:

#####Adding Questions If you have questions and answers to add, add them to config/seed.js file. Follow the structure of the questions that are there. If you have a question, but not the answers or you're not confident you have the correct answer, add it to questions.txt and someone will fill in the missing data. If you have the answer to one of the questions in questions.txt, remove it from that file, and add all the data to config/seed.js.

####Running the project, and contributing code: See the issues for feature requests, and code problems. Each issue is tagged, so you can find things that are within your interest range.

###Starting the project in C9

• Go to Cloud9 and create an account if you don't already have one
• Create a new workspace.
  • The workspace name can be whatever you want.
  • add the clone URL from your repo to the clone URL field
  • Change the workspace type to Node
• add a remote link to the project git remote add upstream https://github.com/Thinkful-Ed/quizful.git
• Change the version of Node to 5.5. nvm install 5.5 && nvm alias default v5.5.0
• Run the setup step by typing npm run easy_start in the terminal
• Your project is now setup and running. You can start working on it.
• To stop the server, you can use ctrl+c as you will see noted in the console.
• When you come back to work on the project, use the run command below.

###Run the project Once you start the project, you don't need to start it again. You can use the npm run easy_run command instead.

###Running the tests To run the tests, go to the terminal and use npm run test --silent. If something fails, you'll see the output in the command line. If everything passes, you're good to go!

###Staying up to date Make sure you are keeping your code up to date. Each time you start, you should git pull upstream staging to get the latest code from the staging branch. If you have any conflicts, the command line will tell you where they are. Be sure to fix those before continuing. If there are a bunch of changes when you pull the code, then run npm run easy_start again to install any new dependencies and rebuild the database.

###Project Admins If you have questions, you should get in touch with these people for help Aric Johnson email

###Contributors Once you made your first contribution (pull request, or opening an issue), add your name here!! Ryan Lynch Simon Attfield

###Screenshots

quizful's Issues

non-Cloud 9 Getting Started?

Curious if it is possible to run the project without Cloud 9 and if so how and if we should add it to the docs. I gave it a shot, but wasn't able to get it running.

Semantically Markup Multiple Choice Answers

Multiple Choice Answers Should be radio buttons, not <li>s. You can make them look however you want.
https://github.com/jpdevries/css-only-radio-buttons/#demo

Add tag endpoint

Endpoint that returns questions with related tags

• create tag model
• make sure all questions have tags
• add endpoint for typeahead that gives back tags

201 should return URI for the new item

https://github.com/Thinkful-Ed/quizful/blob/staging/routes/questions.js#L30

Add Score

• requires oAuth #6
• Add endpoints for score
• Add scoring system on the front end

integrate to CI

Add setup for CI

Can we've the Log message for starting the server in callback

Actual code

app.listen(port,app_ip_address);
console.log('The magic happens on port ' + port);

Expected code

app.listen(port,app_ip_address, function(err){
if(err) {console.log("Error message")}
 console.log('The magic happens on port ' + port);
});

add project description and instructions for adding questions

add project description to tell students what this is, link to the live project, and document the API for students who are interested in creating their own apps from it.

Also, add instructions for contributing questions. questions.txt should be a place for students to add wuestions without answers, and give instructions for using hte seed file.

Add language endpoint

Add an endpoint that returns only questions related to specific language

change to follow crud

https://github.com/Thinkful-Ed/quizful/blob/staging/routes/questions.js#L13
insertion: POST /questions
updates: PUT /questions/:id
or POST /questions/:id
PUT /questions should fail

Good to have eslint and Editorconfig

Add ability to limit quiz questions by language

Update front end to allow user to choose all questions, or question by language.

Inaccessible Fake Radio Buttons

Problematic Code

quizful/src/components/answers.jsx

Line 30 in 05508ed

return <li onClick={this.qCheck}><i className={this.state.class} aria-hidden="true"></i><p>{this.props.name}</p></li>

The Issue

<li onClick={this.qCheck}> is not focusable or mapped to the accessibility tree and is only accessible to sighted mouse users.

return <li onClick={this.qCheck}><i className={this.state.class} aria-hidden="true"></i><p>{this.props.name}</p></li>

The Solution

Do not add onClick to non-interactive elements like <div>, <li> that are not mapped to the accessibility tree. Use <button>, <a>, form elements and/or ARIA instead to meet WCAG success criteria.

Here we should probably be using <fieldset> and <input type="radio"> or mimicking such usage with ARIA.

See Also

• Twitter Thread
• #35

Add Tests

• add tests to the existing endpoints

Design/build a front end

• HTML Wireframe
• Static/responsive build out
• Functioning Quiz app, all the questions

add language endpoint

• add language model
• update questions to be associated with language model
• add endpoint for FE to list all the available languages
• limit language endpoint to only return languages that have questions

Github oAuth

Add oAuth so users can login with GitHub

aria-hidden on selected choice graphic?

I'm not sure why aria-hidden is used here.

<li><i class="fa fa-times" aria-hidden="true"></i><p>Red</p></li>

aria-hidden: Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author.

These elements are not decoration, they signify the selected answer. So why hide them from screen readers? With the change to radio inputs suggested in #35 though it won't matter because then the options would be semantic and accessible as native inputs.

ditch font awesome for SVG Icons

I'll try and whip up a PR for this one but TL;DR is we really should not be using icon fonts. Not even the new "accessible" font awesome implementation.

https://markup.tips/projects/grunting-icons-into-svg-sprites.html#focus

Create WiKi page

This project should have a Wiki. The Wiki should include:

• project goals,
• instructions on how to contribute
• instructions on how to get help setting up the project
• instructions on how to add questions
• a link to the app
• a list of contributors

add migrate

https://db-migrate.readthedocs.io/en/latest/
use this to make seeding easier

Write Basic questions

Need Seed questions for

• HTML
• CSS
• JS

add ability to choose question by tag

The front end should have a way to choose multiple topics that the user wants to be tested on .

Add LeaderBoard

• Requires #5
• Add endpoint for leaderboard
• Add view for Leaderboard

Semantically Markup Questions as <dl>?

FAQs, Question and Answer Lists, and of course definition lists are appropriate uses of the <dl> tag.

I think it is worth considering changing

<div className="question">
  <p>Question {this.state.currentQ + 1} of {this.state.questions.length}</p>
  <h1>{this.state.questions[this.state.currentQ].question}</h1>
  <ul className="answers">
    {allAnswers}
  </ul>
  <button className="prev-button" type="button" onClick={this.lastQuestion}>Previous Question</button>
  <button className="next-button" type="button" onClick={this.nextQuestion}>Next Question</button>
</div>
</section>

to

<div className="question">
  <p>Question {this.state.currentQ + 1} of {this.state.questions.length}</p>
  <dl>
    <dt><h1>{this.state.questions[this.state.currentQ].question}</h1></dt>
    <dd>
      <ul className="answers">
        {allAnswers}
      </ul>
    </dd>
  </dl>
  <button className="prev-button" type="button" onClick={this.lastQuestion}>Previous Question</button>
  <button className="next-button" type="button" onClick={this.nextQuestion}>Next Question</button>
</div>
</section>

Where as the question is the term and the answers are the potential definitions.

http://www.html-5-tutorial.com/dl-tag.htm
http://www.w3schools.com/TAGS/tag_dl.asp
https://www.marcozehe.de/2015/12/14/the-web-accessibility-basics/#lists