fix: update formatting, add image + solution (#38907)

* fix: update formatting, add image + solution

* fix: change img src and add suggestions

Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com>

curriculum/challenges/english/10-coding-interview-prep/project-euler/problem-199-iterative-circle-packing.english.md

@@ -10,12 +10,11 @@ forumTopicId: 301837
 <section id='description'>
 Three circles of equal radius are placed inside a larger circle such that each pair of circles is tangent to one another and the inner circles do not overlap. There are four uncovered "gaps" which are to be filled iteratively with more tangent circles.
 
-
+<img class="img-responsive center-block" alt="a diagram of non-overlapping concentric circles" src="https://cdn-media-1.freecodecamp.org/project-euler/199-circles-in-circles.gif" style="background-color: white; padding: 10px;">
 
 At each iteration, a maximally sized circle is placed in each gap, which creates more gaps for the next iteration. After 3 iterations (pictured), there are 108 gaps and the fraction of the area which is not covered by circles is 0.06790342, rounded to eight decimal places.
 
-
-What fraction of the area is not covered by circles after 10 iterations?
+What fraction of the area is not covered by circles after `n` iterations?
 Give your answer rounded to eight decimal places using the format x.xxxxxxxx .
 </section>
 
@@ -29,8 +28,12 @@ Give your answer rounded to eight decimal places using the format x.xxxxxxxx .
 
 ```yml
 tests:
-  - text: <code>euler199()</code> should return 0.00396087.
-    testString: assert.strictEqual(euler199(), 0.00396087);
+  - text: <code>iterativeCirclePacking(10)</code> should return a number.
+    testString: assert(typeof iterativeCirclePacking(10) === 'number');
+  - text: <code>iterativeCirclePacking(10)</code> should return 0.00396087.
+    testString: assert.strictEqual(iterativeCirclePacking(10), 0.00396087);
+  - text: <code>iterativeCirclePacking(3)</code> should return 0.06790342.
+    testString: assert.strictEqual(iterativeCirclePacking(3), 0.06790342);
 
 ```
 
@@ -42,12 +45,12 @@ tests:
 <div id='js-seed'>
 
 ```js
-function euler199() {
+function iterativeCirclePacking(n) {
   // Good luck!
   return true;
 }
 
-euler199();
+iterativeCirclePacking(10);
 ```
 
 </div>
@@ -60,7 +63,26 @@ euler199();
 <section id='solution'>
 
 ```js
-// solution required
+function iterativeCirclePacking(n) {
+  let k1 = 1;
+  let k0 = k1 * (3 - 2 * Math.sqrt(3));
+  let a0 = 1 / (k0 * k0);
+  let a1 = 3 / (k1 * k1);
+  a1 += 3 * getArea(k0, k1, k1, n);
+  a1 += getArea(k1, k1, k1, n);
+  let final = ((a0 - a1) / a0).toFixed(8);
+  
+  return parseFloat(final);
+  function getArea(k1, k2, k3, depth) {
+      if (depth == 0) return 0.0;
+      let k4 = k1 + k2 + k3 + 2 * Math.sqrt(k1 * k2 + k2 * k3 + k3 * k1);
+      let a = 1 / (k4 * k4);
+      a += getArea(k1, k2, k4, depth - 1);
+      a += getArea(k2, k3, k4, depth - 1);
+      a += getArea(k3, k1, k4, depth - 1);
+      return a;
+  }
+}
 ```
 
 </section>