DOM and Javascript – Test 1

Test level: Beginner – Mid-Intermediate

Test time: (max) 30 minute

Questions:

1. Explain DOM bubbling and capture.

2. What is the difference between ‘==’ and ‘===’ ? (classic JavaScript question)

3. What does “1”+5+2 evaluate to? What about 6 + 3 + “8”?

4. What is the difference between ‘undefined’ value and ‘null’ value?

5. Difference between ‘window.onload’ and ‘document.onload’? What about the ‘onDocumentReady’ (‘DOMContentLoaded’)?

6. What are Javascript closures ?When would you use them?

7. What is the difference between:

1. 
<button id="myButton" onclick="alert('hello!');"> Say Hello! </button>

2. 
document.getElementById('myButton').onclick = function(){
    alert('Hello!');
}

3. 
var el = document.getElementById('myButton')
el.addEventListener( 'click', function(){
     alert('Hello!');
}, false);

8. What is Javascript namespacing? Why and where would you use it?

9. How would you alert the string ‘foobar’ after a 10 second delay. (simple yet effective task)

10. What’s the difference between these two statements:

var x = 5;
x = 5;

HTML and CSS – Test 1

Test level: Beginner – Mid-Intermediate

Test time: (max) 30 minute

Questions:

1. If someone asked you to characterize the Web in 3 words, how would you respond?

2. How many tags/elements are required to build a web page?
(Hint: web page vs web Document; HTML tags vs HTML elements)

3. What is your favourite DOCTYPE and why?

4. True or false:

  • header is similar with the head element.
  • nav and header are sectioning elements.
  • hgroup is used to group h1-h6 elements.
  • nav and menu elements have the same functionality.

(Hint: http://www.w3.org/html/wg/drafts/html/master/dom.html )

5. What is the difference between: display:none; visibility:hidden; and hidden HTML attribute?

6. List some useful HTML(5) attributes (explain why they are useful, max. 5 attributes).

7. List some of the CSS position values, and explain their functionality.

8. What is the difference between CSS transitions and CSS animations?

9. consider the following HTML excerpt:

1  <ul>
2   <li> First element </li>
3   <li> Second element <li> <!-- We want to color this li here red -->
4   <li> Third element <li>
5  </ul>

Which one of the following CSS rules are correct:

1    ul :first-child + li {color: red;}
2    li:first-of-type + li {color: red;}
3    li:first-child ~ li {color:red;}
4    li:nth-child(2) {color:red}
5    ul > :first-of-type + li {color:red;}

6    ul :nth-child(even) {color:red;}
7    ul > li:not(:nth-child(odd)) {color:red;}

10.  We want to achieve this formatting inside a Web page:

Which of the following CSS rules are correct:

1    blockquote::before {content: ' ” '; font-size: 4em; position:absolute; left:2px; top:5px;} 
2    blockquote:before {content: ' ” '; font-size: 4em; position:absolute; left:2px; top:5px;}
3    blockquote::before {content: ' &rdquo; '; font-size: 4em; position:absolute; left:2px; top:5px;}
4    blockquote ~ :before {content: ' &rdquo; '; font-size: 4em; position:absolute; left:2px; top:5px;}
5    blockquote:before {content: ' \201D '; font-size: 4em; position:absolute; left:2px; top:5px;}

Mobile Prescription

Medical prescriptions are confusing for the most part. At the same time keeping track of the medicine/drugs someone has to take is a bit troublesome (before/after lunch; morning/evening etc.).

Develop a mobile app which notify the patient when it is time to take his medicine/drugs or help him order new ones when he finishes the current ones. The application will notify if there is a conflict between the medicine he is taking or between known allergies a patient might have.

Prescription medicine can also be taken but only with the doctors consent (implement a cryptographic module in the application to handle this feature).

  • Requirements:
  • Programming Skill Level: Beginner to Intermediate;
  • Designer Skill Level: Intermediate;
  • Other Skills: ;
  • Similar projects:

New Test Category

As of this month (January 2014) I will be introducing a new category of post on IdeaSource website namely the Tests category which will include a series of questions with different levels of difficulty (Beginner – Intermediate – Advanced) from different areas such as:

  • (X)HTML/HTML5
  • HTML5 API’s
  • CSS/CSS3
  • Web Design
  • UX/IxD
  • Semantic Web
  • OWL
  • RDF/RDFS
  • XML/JSON
  • SVG
  • JAVASCRIPT
  • maybe Javascript libraries (I will see if possible).

I will post the tests as often as I find the time (starting next week). The answers will only be available if a lot of people request them (give me a reply on twitter for that).

The idea behind this new category is to prepare people for job interviews in the fields of UX/IxD, Web, Semantic Web, Front-End development.

Another good resource to review regarding job interviews is: http://glassdoor.com/

New project ideas will be posted as I find the time to do so.

Whispers down the network — derivation

A semantic web app based on a variation of the Chinese whispers game. Consider this: each node in a network represents a different knowledge domain (via an ontology). Each node from the network has part of the message that you want to read, but each node can only contain pieces of data that can be described by the concepts associated with that node. For example Node A can only describe data for the concept Person.

Develop a method for recovering the whole information set and describing all the concepts associated with a specific message by using this network.

Question: Can you describe the message in multiple ways and give it different meanings ?

Bonus: Visualization of the network.

  • Requirements:
  • Programming Skill Level: Advanced;
  • Designer Skill Level: Advanced;
  • Other Skills: ;
  • Similar projects:

See also the original idea: Whispers down the network

Whispers down the network

A semantic web app based on a variation of the Chinese whispers game. Consider this: each node in a network represents a different knowledge domain (via an ontology). As with the Chinese whispers game, Node A sends information to Node B (in RDF format) by using the network, but in order for the message to reach Node B it has to pass several other nodes that describe similar knowledge domains to Node A and Node B. Thus the data can only travel to nodes with similar concepts in order to reach Node B.

Monitor the path down this network of domains in order to see the shortest and the longest path, but also the path which consists of the highest number similar concepts.

Consider that the message sent from Node A to Node B consists of more than one concept (e.g. Person, Organization, Profession etc.).

Question: Did the message alter its meaning passing through all those different domains, by the time it reached its destination ?

Bonus: Visualization of the network.

  • Requirements:
  • Programming Skill Level: Advanced;
  • Designer Skill Level: Advanced;
  • Other Skills: ;
  • Similar projects:

See also the derivation: Whispers down the network — derivation

Draw by sound(s)

There is the popular game Paint by number for kids, where kids follow the numbers in order to paint (with a certain color indicated by the numbers) or just follow the numbers when drawing a line. In the same idea, use sounds in order to paint/draw a certain picture. Use simple sounds that are easy to identify (such as alphabet sounds: A, B, C etc.) and assign each sound to a certain color. The application will identify the sound and pain the corresponding region of a painting/image.

Try experimenting with complex sounds or even musical instruments.

A variation of this application can be adapted for visually  impaired people who have to recognize sounds in order to “draw” something.

  • Requirements:
  • Programming Skill Level: Intermediate to Advanced;
  • Designer Skill Level: Intermediate to Advanced;
  • Other Skills: ;
  • Similar projects: probably there are a few but I couldn’t find them.

Network Simulator

Develop a visual network simulator where you can specify the architecture of a network, add or remove network note, configure DNS, Gateway, IP address (IPv4 and/or IPv6) specify one or more FTP/HTTP server, install (fictive) OS versions on each computer, configure network equipment (routers, servers etc.) and ultimately monitor the network traffic All this doing drag and drop actions and text input actions.

Bonus: Admin mode where a web console will be available and will allow to configure network equipment using commands.

  • Requirements:
  • Programming Skill Level: Intermediate to Advanced;
  • Designer Skill Level: Beginner to Intermediate;
  • Other Skills: ;
  • Similar projects: probably there are a few but I couldn’t find them.

Test Generator

Creating tests for your students sounds like a simple (repetitive) task. How about an application that facilitates this repetitive task.

Using the application you will be able to add different questions, exercises and tasks and label them according to their difficulty level, their time to complete, their type (multiple choice, fill in the blanks, true/false etc.). Based on these labels a professor will be able to generate tests for his students by selecting the difficulty level and the time for the test. He can also adjust or add new questions/exercises/tasks.

  • Requirements:
  • Programming Skill Level: Beginner to Intermediate;
  • Designer Skill Level: Beginner to Intermediate;
  • Other Skills: ;
  • Similar projects: probably there are a few but I couldn’t find them.

Souvenir/Present Suggestions App

It is hard to pick those 2-3 souvenirs to bring home to your family when you’ve been in foreign country, moreover it is hard to pick that last minute present for your loved ones.

The idea is to develop an application which offers suggestion on what to buy when you visit a foreign city/country based on the specific of that city/country. At the same time the suggestions/recommendation will be based on the different products specific to that country, to the person you want to buy them for (yourself, a loved one, your kids, your boss etc.). In the same direction the application can offer suggestion what present to buy for a certain acquittance based on their social profile.

  • Requirements:
  • Programming Skill Level: Beginner to Intermediate;
  • Designer Skill Level: Beginner to Intermediate;
  • Other Skills: ;
  • Similar projects: