Challenge #1 – Putting the Fizz back in your Buzz

5 November 2018 Solved Twig Intermediate

A vari­ation of FizzBuzz, this chal­lenge tests your abil­ity to out­put or style things in dif­fer­ent ways based on a recur­ring index­ing pat­tern using Twig.

In FizzBuzz, count­ing from 1 to 100, you replace the num­ber each time you encounter a mul­tiple of 3 with Fizz”, a mul­tiple of 5 with Buzz” and a mul­tiple of both 3 and 5 with FizzBuzz”. So the res­ult is:

1, 2, Fizz, 4, Buzz, Fizz, 7, 8, Fizz, Buzz, 11, Fizz, 13, 14, FizzBuzz, 16, ...


The chal­lenge is to write a twig macro called fizzBuzz” that will accept 3 para­met­ers: entries (an array of entries), fizz (an array of integers) and buzz (also an array of integers). The macro should out­put the titles of each of the provided entries as head­er tags with a class of fizz” each time a mul­tiple of one or more of the integers in the fizz array is encountered, buzz” each time a mul­tiple of or more one of the integers in the buzz array is encountered, and fizzbuzz” each time a mul­tiple of one or more of the integers in both the fizz and buzz arrays is encountered. So for example, calling:

{% set entries = craft.entries.limit(22).all() %}

{{ fizzBuzz(entries, [3, 7], [5, 17]) }}

Should out­put:

<h4 class="">Entry Title 1</h4>
<h4 class="">Entry Title 2</h4>
<h4 class="fizz">Entry Title 3</h4>
<h4 class="">Entry Title 4</h4>
<h4 class="buzz">Entry Title 5</h4>
<h4 class="fizz">Entry Title 6</h4>
<h4 class="fizz">Entry Title 7</h4>
<h4 class="">Entry Title 8</h4>
<h4 class="fizz">Entry Title 9</h4>
<h4 class="buzz">Entry Title 10</h4>
<h4 class="">Entry Title 11</h4>
<h4 class="fizz">Entry Title 12</h4>
<h4 class="">Entry Title 13</h4>
<h4 class="fizz">Entry Title 14</h4>
<h4 class="fizzbuzz">Entry Title 15</h4>
<h4 class="">Entry Title 16</h4>
<h4 class="buzz">Entry Title 17</h4>
<h4 class="fizz">Entry Title 18</h4>
<h4 class="">Entry Title 19</h4>
<h4 class="buzz">Entry Title 20</h4>
<h4 class="fizz">Entry Title 21</h4>
<h4 class="">Entry Title 22</h4>


The macro must out­put the tags with the appro­pri­ate classes giv­en the 3 para­met­ers as described above. It should not rely on any plu­gins and the code will be eval­u­ated based on the fol­low­ing cri­ter­ia in order of priority:

  1. Read­ab­il­ity
  2. Brev­ity
  3. Per­form­ance

There­fore the code should be read­able and easy to under­stand. It should be con­cise and non-repet­at­ive, but not at the expense of read­ab­il­ity. It should be per­form­ant, but not at the expense of read­ab­il­ity or brevity.


  • It may help to start by solv­ing the chal­lenge with the fizz and buzz para­met­ers as integers. 
  • You can link to this CSS file to dis­tin­guish the head­er tags in the output.
  • To test with large data sets, you can cre­ate an array of a single repeat­ing entry as follows:
{% set entries = [] %}
{% set entry = %}
{% for i in 1..100 %}
    {% set entries = entries|merge([entry]) %}
{% endfor %}


Submitted Solutions

  • Jason Sawyer
  • Otto Radics
  • Josh Magness
  • Quentin Delcourt
  • Henry Bley-Vroman
  • Alex Roper
  • Craft CMS Berlin Meetup
  • Pierre Stoffe
  • Lindsey DiLoreto
  • Andrew Welch
  • Patrick Harrington
  • John F Morton
  • Spenser Hannon
  • Doug St. John
  • Trevor Plassman
  • Oliver Stark
  • Steve Rowling
  • Christian Seelbach
  • Paul Verheul
  • John Wells