Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,156,396 members, 7,830,014 topics. Date: Thursday, 16 May 2024 at 03:01 PM

Quiz Time! - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / Quiz Time! (1059 Views)

Most Confusing And Simple Maths Quiz / Quiz Time : How To Bypass Cache / Very Easy Html/php Quiz :) (2) (3) (4)

(1) (Reply) (Go Down)

Quiz Time! by yawatide(f): 1:45pm On Feb 03, 2011
As DHTML recently posted somewhere on here, it is VERY boring on this board. Hopefully this thread will help liven it up again.

Suppose you have an HTML page (no back end language whatsoever) and on it, a table with 100 rows want alternating rows to have the same color (for example, one row is white while the other is orange), how would you go about accomplishing this task?

Please note:
A slight hint - this quiz isn't about, "do you know who I am?" or "do you know how long I have been coding?" or "do you know what I do?". It is about how you think so, before you rush to answer, put on your thinking caps first.

Oya, I have started the stopwatch. Let the games begin!!
Re: Quiz Time! by Afam4eva(m): 2:37pm On Feb 03, 2011
You'll do something like :

<table>
<tr bgcololor='#fff'>
<td></td>
</tr>
<tr bgcololor='orange'>
<td></td>
</tr>
<tr bgcololor='#fff'>
<td></td>
</tr>
<tr bgcololor='orange'>
<td></td>
</tr>
</table>

As simple as ABC.
Re: Quiz Time! by yawatide(f): 4:11pm On Feb 03, 2011
Simple? Yes. Efficient? No. Remember, I gave a hint per se when I said you had to think wink

Sure, there is more than 1 way to skin a cat but there are only 2 ways, at most, that are efficient.

As others are scratching their heads to come up with a good solution, put on your thinking hat again and refine your solution above.
Re: Quiz Time! by Afam4eva(m): 4:17pm On Feb 03, 2011
I think javascript can do the magic. BRB.
Re: Quiz Time! by yawatide(f): 5:06pm On Feb 03, 2011
Yes it can and I'll be waiting for that solution. Having said that, again, don't just state your answers, give it a thought and type your reasons behind the answer(s) you give. Who knows? In expressing your thoughts as you provide a solution, the hidden/actual best possible solution might appear.

I am actually surprised that others aren't hopping on. Oh well, learning isn't for everyone cool
Re: Quiz Time! by Nobody: 9:22pm On Feb 03, 2011
I am under pressure here. . . .no time to read anything. . . .i will be back. . .great quiz though (zips off @ top speed)

- hasta la vista
Re: Quiz Time! by Mobinga: 12:55am On Feb 04, 2011
cool hasta la vista baby cool
Re: Quiz Time! by sweetpawn1: 2:33am On Feb 04, 2011
HMM, I LOVE TO MAKE GAMES, BOTH PHYSICAL AND COMPUTER GAMES (INFACT YOU CAN DOWNLOAD SOME AT MY SITE! wink) AND I LIKE TO PLAY GAMES, ESPECIALLY THOSE THAT MAKE YOU THINK! I THANK THE OP FOR BRINGING LIFE BACK TO THIS BOARD AGAIN! smiley
ANY PRIZES FOR WINNERS?
I WENT BY YOUR RULES, NOT TO USE BACK END CODE (THAT ELIMINATES MY GOOD OLD PHP), NOW I AM LEFT WITH JAVA AND CSS. undecided WHICH WILL DO THE TRICK?

afam4eva:

You'll do something like :

<table>
<tr bgcololor='#fff'>
<td></td>
</tr>
<tr bgcololor='orange'>
<td></td>
</tr>
<tr bgcololor='#fff'>
<td></td>
</tr>
<tr bgcololor='orange'>
<td></td>
</tr>
</table>
As simple as ABC.

SURELY  AFAM'S SOLUTION QUICKLY COMES TO MIND, BUT DOES NOT REALLY MEET UP AS THE OP SAID 100 ROWS, YOU ONLY GAVE US NOT UP TO TEN! THAT ALONE PROVES THE INEFFICIENCY OF THAT METHOD AS IT DID NOT GIVE AFAM THE TIME TO EVEN COMPLETE THE QUIZ!

*dhtml:

I am under pressure here. . . .no time to read anything. . . .i will be back. . .great quiz though (zips off @ top speed)

- hasta la vista

HE OBVIOUSLY HAD OTHER PLANS TONIGHT!

afam4eva:

I think javascript can do the magic. BRB.

AFAM SUBSEQUENTLY HAD THE SAME IDEA AS I HAD SO ON THE STRENGTH OF THIS CONFIRMATION I SET ABOUT DIGGING DEEP INTO MY RUSTY JAVASCRIPT VOCABULARY. THANK GOODNESS JAVA,C++,PHP,JAVASCRIPT ALL CODE-ALIKE SO I WAS ABLE TO BRUSH UP MY CODES QUICKLY AND CAME UP WITH THIS:




<HEAD>

<TITLE>
BLA-BLA-BLA GOAT, HAVE YOU ANY BEARD?
</TITLE>

</HEAD>
<BODY>


<script type="text/javascript">

document.write("<table bgcolor= green width= 100% border= 1>" );

for(i = 1; i <= 100; i++)
{
	
if((i%2)==0)
{document.write("<tr><td bgcolor=white >"+i+" </td></tr>"wink;}
else
{document.write("<tr><td bgcolor=orange>"+i+"</td></tr>"wink;}

	
	
}

document.write("</table>" );


</script>



</BODY>




IT CAN BE DOWNLOADED HERE: http://jist./NL_QUIZ.HTML

@OP, SO DID I WIN? ANY PRIZES FOR MOI? cheesy
Re: Quiz Time! by yawatide(f): 1:20pm On Feb 04, 2011
sweet-pawn: thanks for your post.

It had just what I needed - a thought process. In revealing your answer, I am forced to think that I wasn't quite clear in an aspect or 2. My question implies that the 100 rows are there, hardcoded and not be generated so this rules out your javascript solution.

Here is the scenario again: An HTML page already exists with 100 rows of data. We are going to assume that the "company" in charge couldn't afford the services of a competent programmer to implement this on the backend or via javascript. In other words, the person went in "design view" in dreamweaver and came up with this 100-row table. I hope it is clearer now.

I will drop another hint: Think HTML and CSS only.

Once again, thanks for your answer. I really appreciate how you approached the solution. Take solace in the fact that If I were a hiring manager, even though you have the answer wrong, I would still hire you because of how you think.

Now, back to the quiz at hand. I will keep it open till Monday when I will not only come up with "the" solution but address the answers posted so far.

Thanks
Re: Quiz Time! by Mobinga: 1:41pm On Feb 04, 2011
OMG. Sweet Pawn is a programming textbook.

shocked shocked shocked shocked


mobingapapingo@gmail.com I need tutorials bro cool
Re: Quiz Time! by Nobody: 7:38am On Feb 05, 2011
caramba! them never solve this quiz yet? mobinga and sweet pawn? what are you doing to remedy this situation?

- hasta la vista baby
Re: Quiz Time! by sweetpawn1: 11:30am On Feb 05, 2011
*dhtml:

caramba! them never solve this quiz yet? mobinga and sweet pawn? what are you doing to remedy this situation?

- hasta la vista baby

I WAS DOING WITCH HUNTING LAST NIGHT SO I DIDN'T GET THE CHANCE! cheesy

TO THE PROBLEM AT HAND!

WELL, GOING BY WHAT THE OP SAID ( AND THANK YOU FOR YOUR ENCOURAGING COMMENTS! wink ), I BELIEVE WE SHOULD GO BACK TO THE BASICS OF CSS TO SOLVE THIS CASE!

POINT TO NOTE:
1. THERE WILL BE NO AUTO-GENERATION OF THE TABLE HTML CODE. IT ALREADY EXISTS!
2. AT ANY GIVEN TIME, THE ALTERNATE ROWS WILL HAVE THEIR COLORS CHANGE.

NORMALLY THIS WOULD HAVE BEEN THE SOLUTION, AS AFAM ONCE POINTED OUT:

<table>
<tr bgcololor='#fff'>
<td></td>
</tr>
<tr bgcololor='orange'>
<td></td>
</tr>
<tr bgcololor='#fff'>
<td></td>
</tr>
<tr bgcololor='orange'>
<td></td>
</tr>
</table>


BUT POINT 2 MAKES THIS METHOD UNSUITABLE AS IT SAYS AT ANY GIVEN TIME, THE ROW COLORS WILL CHANGE. THIS MEANS THAT IF WE USE THE ABOVE METHOD, AND WE HAVE 100 ROWS OF WHITE AND ORANGE, AND WE NEED TO CHANGE THE COLORS TO WHITE AND GREEN (SAY, FOR EXAMPLE, THE TABLE IS LISTING SOME 100 NATIONAL CONSTITUTION LAWS OR SOMETHING AND THE NATIONAL COLORS ARE TO BE REFLECTED AS WELL) SO THAT MEANS WE WILL HAVE TO GO THROUGH THE ABOVE CODE A HUNDRED TIMES OR HALF. THAT WILL BE TEDIOUS! shocked

SO THE BEST SOLUTION ( CONSIDERING POINT 1 - NO AUTO GENERATION, NO PROGRAMMING) IS CSS.

FIRST WE CREATE TWO ROW CLASSES EACH TO CHANGE THE BACKGROUND COLOR OF A ROW IN THE TABLE. I WILL CALL THEM C1 AND C2 . . .

<style type="text/css">
tr.c1 td {
	background-color: white;
}
tr.c2 td {
	background-color: orange; 
}
</style>

NOW, THE ROW COLORS CAN BE CHANGED AT ANY TIME, WITHOUT TOUCHING THE HTML TABLE CODE!

AND MY TABLE WILL LOOK LIKE THIS:

<table>
<tr class="c1"><td>1</td></tr>
<tr class="c2"><td>2</td></tr>
<tr class="c1"><td>3</td></tr>
.
.
.
.
.
.

<tr class="c2"><td>100</td></tr>
</table>




$OP, AM I RIGHT NOW?

Mobinga:

OMG. Sweet Pawn is a programming textbook.

shocked shocked shocked shocked


mobingapapingo@gmail.com I need tutorials bro cool

AHH, BROS NO BE ME O! cheesy
Re: Quiz Time! by yawatide(f): 12:57pm On Feb 05, 2011
Sweet pawn, you are right again, but for one more thing:

As coders, we should not only account for today but the possibility of tomorrow.  What if tomorrow, I ask you to insert or delete 1 more row, say after row 45?  How do you account for this new row without breaking your current "c1" and "c2" nomenclature and maintaining the alternating row colors?  You see where I am going with this?

Again, I like your thinking style. Keep at it - You are getting warmer  cool
Re: Quiz Time! by Nobody: 6:14am On Feb 06, 2011
This is getting mas interesante todos los dias! when is the answer going to be corecta?
Re: Quiz Time! by ogzille(m): 7:18am On Feb 06, 2011
Its bin long i visited this board!

okay down to the issue

my first solution is a js solution

<script language="JavaScript">
var t = document.getElementById('test');
var trs = t.getElementsByTagName("tr"wink;
for (i=1;i<=trs.length;i++) {if (i%2==1) trs[i].style.backgroundColor = "#ddd"; /* or trs[i].className='name of class that has been created' */ }
</script>

OR

You can use a CSS3 solution (though not supported on all browsers

<style type="text/css">
tr:nth-child(even) {background-color: #FFF;}
tr:nth-child(odd) {background-color: #DDD;}
</style>

oya, yawa mark the script wink
Re: Quiz Time! by Nobody: 11:33am On Feb 06, 2011
tsk. . .tsk. . .tsk
Re: Quiz Time! by yawatide(f): 1:51pm On Feb 06, 2011
dhtml:
If no one answers correctly, I will give out the answer tomorrow

ogzille:
So far, you have given the best answer, though not quite complete.

1) Your javascript solution doesn't hold, but I take it you haven't read every single response from top to bottom

2) You are correct, to a point. This is where the thought process comes in again. When you say, "not supported by all browsers", what do you mean? It would be nice to be specific. Why? Because maybe the environment where the code is being deployed doesn't need all browsers to behave alike (progressive enhancement).

The next step would be (and this is another hint) that though not supported in all browsers, you not only state that there is a way to achieve this, which isn't a hack, using both javascript and css. Note that I am not saying you should use javascript to generate the table but that you can use javascript in combination with css to achieve the results in the question.

This so far, has been the best thread on this board so far this year. Keep it up guys. I am being motivated to come up with more cool
Re: Quiz Time! by Cactus(m): 3:38pm On Feb 06, 2011
Seriously, I was thinking html DOM in line with OGZILLE but I have finally convinced myself that afam's method is the most efficient of course changing cololor to color and am too lazy to find the hex for orange. so when you add a new line, simply do a find and replace voila. no need to go hundred and one times changing colors. The downside to this is that your file size will gain weight. The next point that may come up is what if you dont have find and replace on the pc u are using, well you will have to go get a real pc then.

<table>
<tr bgcolor='#fff'>
<td></td>
</tr>
<tr bgcolor='orange'>
<td></td>
</tr>
<tr bgcolor='#fff'>
<td></td>
</tr>
<tr bgcolor='orange'>
<td></td>
</tr>
</table>

or use jquery to traverse,

Someone shoot me in the brain. I have not tried my hands on HTML5, and if that is where your answer lies, I have to call a referee for you o, cos this one will be categorized as knowledge discrimination. lol

Well am also curious as to what the answer is.
Re: Quiz Time! by sweetpawn1: 5:24pm On Feb 06, 2011
OGZILLE SHOULD BE THE WINNER OF THE QUIZ, BUT I WOULD ARGUE THAT SINCE CSS3 IS NOT COMPACT-ABLE ON ALL BROWSERS THEN THAT METHOD CANNOT BE EFFICIENT AS IT WILL NOT WORK ON MOST PLATFORMS!

CACTUS IS SUGGESTING THAT THE ANSWER MAY LIE IN HTML5 BUT LIKE THE SOLUTION ABOVE BUT EVEN THAT TOO MIGHT NOT BE FLEXIBLE WITH MOST BROWSERS.

WELL, BUT FOR THE ABOVE ISSUES, I WOULD GO WITH OGZILLE'S SOLUTION.

IF THE OP HAS A TRADITIONAL CSS AND HTML SOLUTION FOR THIS, I WOULD BE GLAD TO SEE IT TOMORROW!
Re: Quiz Time! by ogzille(m): 5:44pm On Feb 06, 2011
what is the problem with my javascript solution?

i did nt generate the table with js.

i just styled the rows. look at it again,
Re: Quiz Time! by yawatide(f): 8:06pm On Feb 06, 2011
ogzille:
My bad! I didn't see it in full.  Your way is the highway and you have been declared the winner. yay!  grin

cactus:
First of all, welcome back.  The reason why that approach isn't the best is again, imagine if I were to ask you to insert another row after row 46, for instance.  Sure, you may be a master of using search-and-replace but why go through that?  The whole point of coding is to do it in an efficient manner.  In other words, code for now and the future at the same time.

All:
I enjoyed this thread immensely. It was full of thoughts and devoid of ad hominem attacks/women chyking (these 2 have been the bane of this board for a while).

Ogzille:
Once again, my apologies.  You got it right.  Now, to my next quiz  tongue
Re: Quiz Time! by ogzille(m): 8:40pm On Feb 06, 2011
Takes a bow cheesy
Re: Quiz Time! by Nobody: 11:09pm On Feb 06, 2011
ogzille:

Takes a bow cheesy
ogzille es un fantastico amigo. me gusta el solution! yay!! yawa, donde estan los regalos por our amigo?
Re: Quiz Time! by sweetpawn1: 1:13am On Feb 07, 2011
GOOD JOB OGODZILLA! YOU CAME IN HERE, AUTHORITATIVELY FROM NO WHERE AND SOLVED THE PROBLEM IN ONE FELL SWOOP!

*dhtml:

ogzille es un fantastico amigo. me gusta el solution! yay!! yawa, donde estan los regalos por our amigo?

HMM, WHERE DID YOU LEARN ESPANYOL, AMIGO? smiley
Re: Quiz Time! by Nobody: 10:31am On Feb 07, 2011
donde did i estudiar espanyol? caramba! yo creo i learnt it from the world-wide-web (gracias a mi espana y mexicano amigos y amigas tambien)

ese es why i can speak spanglish y no español rather fluently

A good recommendation however will be http://www.learnalanguage.com/

- hasta la vista baby
Re: Quiz Time! by Cactus(m): 8:42am On Feb 08, 2011
I doubt if there is a more efficient alternative than what was given. except you create tables and do alternating colors with js
Re: Quiz Time! by yawatide(f): 12:08pm On Feb 08, 2011
Oya folks, this thread should be considered closed. Over to quiz time 2 please

(1) (Reply)

Need A Good SIM Host / Long Code Provider / Computer Science Project Help - Helping Spark Up Creativity. / Free Bulk SMS Website For 100 Persons Only.

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 49
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.