Looking at CSS Frameworks, WordPress and responsive design, and more JavaScript


This week I worked on building the “dynamic quiz” exercise from this JavaScript syllabus.

The instructions I followed for creating the quiz were the following:

  • It is a simple quiz that has radio button choices, and it will show the user her score upon completion.
  • The quiz can show any number of questions and any number of choices.
  • Tally the user’s score and display the final score on the last page. The last page will only show the score, so remove the last question.
  • Use an array to store all the questions. Each question, along with its choices and correct answer, should be stored in an object. The array of questions should look similar to this:
  • // Only one question is in this array, but you will add all the questions.var allQuestions = [{question: “Who is Prime Minister of the United Kingdom?”, choices: [“David Cameron”, “Gordon Brown”, “Winston Churchill”, “Tony Blair”], correctAnswer:0}];
  • Dynamically (with document.getElementById or jQuery) add the next question and remove the current question from the screen, when the user clicks the “Next” button. The Next button will be the only button to navigate this version of the quiz.
  • You can ask for help in the comments below or preferably on Stack Overflow. You are likely to get a prompt and accurate answer on Stack Overflow.

I decided to make a vocab quiz for some German vocabulary I’ve been learning. A couple weeks back I mentioned the resources I created for myself (using PHP and JavaScript) to practice German vocab. I added a new page — a multiple choice vocab quiz — that follows the instructions listed above.

Some further updates I’d like to make in the future include:

  • Displaying which answers were incorrectly selected (if applicable), and highlighting the correct answer, along with displaying the final score.
  • Playing around with jQuery animations to implement some sliding in and out features when a question is answered and the next question is brought up.
  • This is rather a large “update” to make — but I’m not entirely happy with how I put all of the choices into the HTML document form and separately into the array in the JavaScript file. The instructions for building this quiz were rather open-ended, but one thing that bothered me about my final project was that the array I put into the JavaScript code went largely un-utilized. If I had it to re-do, I guess I would have to figure out some way to dynamically insert the content of that array (“allQuestions”) into the HTML form…

Overall, I thought this was a fun and useful exercise in synthesizing together some of the different concepts I’ve been learning about JavaScript the past couple of weeks. I opted to write the majority of my code using jQuery where possible. I find the syntax of jQuery a lot more intuitive (since it uses the same selectors as are used in CSS). I also appreciate that the cross-browser standardizations have already been taken care of within the jQuery library… I think considerations about standardizing how code functions from browser to browser is important when thinking about accessibility issues and how sites are accessed in different ways than a single developer might initially envision when working on a project.

Where I ran into the biggest issues:

  • Simple typo mistakes completely messings things up. Not the most complex of problems, but certainly annoying until I finally figured it out.
  • Figuring out how to properly write the logic of the function that was checking the answer of each individual question and then hiding that one while showing the next took some time. I think this is the sort of thing that comes with practice, though, and will be on the lookout for more opportunities to implement JavaScript into different projects in the future.

CSS Frameworks and Grids

The CSS: Frameworks and Grids video from Lynda.com provided a great starting point for learning more about what types of frameworks are available. I bookmarked several of the suggested resources.

The best way to learn about a framework, for myself, is going to be really delving into the source code and seeing what’s there, and really just… using the framework. As I move forward with some of my personal design/coding projects, I plan on checking out some of the minimal frameworks mentioned in the video, as well as some of the grids the instructor talks about. Creating responsive and fluid grids for layouts is an issue I find myself returning to in my CSS work, and I think having greater familiarity with the options and approaches for grid layouts will serve me well in my future endeavors in web development.

The following are the frameworks/grids I’m most interested in potentially using in the future and finding out more about through hands-on use. They’re all fairly “minimal” — meaning that they’re light-weight, not a lot of code, very simple and basic starting points with some built in typography and grid systems that I think will be useful to build upon.


Grid-system only

As for WordPress themes, I’ve really liked working with the Underscores_ framework so far. It’s provided a lot of the benefits that frameworks in general provide, as discussed in this Lynda.com video, while also leaving me enough space to really build upon it and (hopefully) make something unique.

Responsive Design & WordPress

My readings for this week came primarily from Responsive Design with WordPress: How to Make Great Responsive Themes and Plugins. A lot of this book covers the general concept of what responsive design means overall, and highlights some CSS approaches and best practices for that. In terms of WordPress-specific responsive design, I found that this book fit in nicely with the Lynda.com video on CSS Frameworks and Grids, as one of the main suggestions for ensuring your WP theme is responsive was to use a base theme/framework that has responsive features and code already built in for you to develop on top of, like Underscores_.

A lot of my work on my WordPress theme this week has also been about ensuring that my theme is responsive. Underscores_ certainly aids in this process, but I think that overall my approach to making this theme responsive hasn’t varied that much from my approach in coding any website to be responsive. I have worked pretty hard at coding for the smallest screen sizes first, which I find is really useful, and makes working my way up the breakpoints to higher sizes much simpler than the reverse process.

Next week I will be working on finishing up a lot of the odds and ends of my WordPress theme, and submitting it for review to the WordPress theme directory! I plan on having a live version of that theme up along with my blog post for next week.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.