# A Hundred Squares!

### Back to basics...

As a teacher at the local primary (grade?) school, you need a way to teach your class their times tables. At your disposal, you have hundred squares and a load of red pens. You need to also be able to show your class the correct answers quickly.

Now, you're clever enough to write a program that can do times tables, but can you draw them on a hundred square?

# The challenge

Output a hundred square to stdout or equivalent using ansi-escape codes to shade in numbers which are multiples of the input.

• Output a 10x10 grid containing the numbers 1-100.
• It doesn't matter the alignment of 2 digit numbers in each box as long as it's consistant
• For 1 digit numbers, you may pad to 2 digits and use the same formatting as 2 digit numbers or centered in the middle of the box.
• If the number in the box is a multiple of the input, colour the entire box red.
• This means the whole box, not just the number part

For example, given the input 3, print the given hundred square This is code golf so the shortest answer in bytes wins!

• Can we print 01 instead of 1. 02 for 2, etc etc – Keatinge Jun 13 '16 at 19:20
• So I can't use <table>, for example? – nicael Jun 13 '16 at 19:22
• Does the colour of the numbers matter? Can it be white or grey? – Bassdrop Cumberwubwubwub Jun 13 '16 at 19:23
• @Keatinge I haven't decided yet - I'm veering towards yes @nicael no, it has to be using ansi-escapes or answers wouldn't be on the same playing field, @BassdropCumberwubwubwub you may use different colours but unless you're using curses it shouldn't matter - red is short anyway. – Blue Jun 13 '16 at 19:27
• @Keatinge yes you may use padding - but only with zeros and one one digit numbers only – Blue Jun 13 '16 at 19:29

# Python 2, 166 bytes

R=range;n=input()
for y in R(21):print''.join('♥[%dm%s♥[m'%(any(5>x-k%10*4>-1<y-k/10*2<3for k in R(n-1,100,n))*41,('+---|%2d '%(x/4+y*5-4))[y%2*4+x%4])for x in R(41))


Replace ♥ by octal 033 (the ANSI escape character). ## Explanation

We treat the output as a 41×21 grid, and directly compute the character and color at each point.

That is, the structure of the code is:

n = input()
for y in range(21):
print ''.join(F(x, y) for x in range(41))


for some function F.

The result of F is always of the following form:

• An ANSI Control Sequence Introducer (\33[).
• An SGR code: 0m for reset, or 41m for red background.
• A single character. (+, -, |, space, or digit)
• An SGR reset sequence (\33[m).

We use the format string '\33[%dm%s\33[m', where the first %d is either 0 or 41, and the %s is the character we wish to print.

For the color, we have the following formula:

any(5>x-k%10*4>-1<y-k/10*2<3for k in R(n-1,100,n))*41


I’m not going to fully explain this, but it basically loops over all rectangles that should be colored red, and checks if (x, y) is inside any of them.

Note the use of operator chaining: I rewrote -1<A<5 and -1<B<3 into 5>A>-1<B<3.

For the character, we have the following formula:

('+---|%2d '%(x/4+y*5-4))[y%2*4+x%4]


If y % 2 == 0 then for x = 0, 1, … this will generate +---+---+---…

If y % 2 == 1 then for x = 0, 1, … this will generate | p |p+1|p+2…

• One of these days, there's going to be a challenge where you actually need to use a literal ♥ in the code, and everybody will be confused ;) – FryAmTheEggman Jun 13 '16 at 23:54
• Would love to see an explanation. – shaunakde Jun 14 '16 at 9:35
• @shaunakde I wrote something up (but saved some bytes in the process, so maybe it also got slightly harder to follow… ^^) – Lynn Jun 14 '16 at 13:40
• @Lynn Thank you so much for taking the time and energy to explain this code. I am very thankful for this explanation. It helped me learn a lot! – shaunakde Jun 14 '16 at 17:37
• You’re very welcome! :) – Lynn Jun 14 '16 at 19:14

# Julia, 219182169 167 bytes

!n=(~j=j%n<1;k(v=j->"---",c=+,s="$c\e[m";l=~)=println([(l(j)?"\e[;;41m$c":s)v(j)for j=10i+(1:10)]...,s);i=0;k();for i=0:9 k(j->lpad(j,3),|);k(l=j->~j|~(j+10(i<9)))end)


Used like this: !7

Ungolfed:

function !(n::Integer)
for j=(1:10)     #This loop generates the top of the box
if (j%n==0)
print("\e[;;41m+---") #"\e[;;41m" is the ANSI escape code
#for red background colour in Julia
else
print("+\e[m---")     #"\e[m" resets to original colours
end
end
println("+\e[m")
for i=0:9
for j=10i+(1:10)  #This loop generates the rows with the numbers
if (j%n==0)
else
end
end
println("|\e[m")
for j=10i+(1:10)  #This loop generates the other rows
if (j%n==0)||((j+10)%n==0&&i<9)
print("\e[;;41m+---")
else
print("+\e[m---")
end
end
println("+\e[m")
end
end


Note that this is very ungolfed, for maximal readability.

### HTML + Javascript, 379

HTML:

<input id=a value=3><pre id=z>


Javascript:

for(i=0,s=\n|,o='+';i++<109;x=i<10? ${i} :i-100?' '+i:i,s+=x+'|',o+=x='---+',i%10||(o+=s+'\n+',s=\n|));z.innerHTML=[...o+x].map((x,i)=><span id=i${i}>\${x}</span>).join;f=m=>window['i'+m].style.background='red';for(j=k=+a.value;j<=100;j+=k){p=(j/10|0)*84+((m=j%10)?(m-1)*4:-48);'000102030442434445468485868788'.match(/../g).map(x=>f(+x+p))}


jsfiddle.