feat: correct downloadable files and verify logic for Challenge #4

packages/nextjs/app/engineering/circom/[slug]/page.tsx

@@ -44,10 +44,11 @@ export default async function Page({ params }: PageProps) {
               <div>
                 <p>{item.description}</p>
                 <pre>{item.commands.join("\n")}</pre>
-                {/* TODO: Adjust the downloadable files */}
-                {/* <a href={`/challenges/challenge_${item.downloadableFile}/files/download.circom`} download>
-                  {item.downloadableFile}
-                </a> */}
+                {item.files && (
+                  <a href={`/challenges/challenge_${challengeId}/files/${item.files}`} download={`${item.files}`}>
+                    Download: {item.files}
+                  </a>
+                )}
               </div>
             }
           />

packages/nextjs/public/challenges/challenge_4/statement.js

@@ -1,15 +1,30 @@
 const Challenge4Content = () => (
   <div className="w-full max-w-[64rem] p-4 bg-gray-700 rounded-lg mb-6 font-play shadow-lg">
     <div className="mb-4">
-      <h3 className="text-white text-xl font-bold">Statements</h3>
+      <h3 className="text-white text-xl font-bold">Puzzle: Knights and Knaves</h3>
+      <p className="text-gray-300">
+        This is a classic logic puzzle involving two characters, A and B. Each character is either a knight, who always tells the truth, or a knave, who always lies. Your task is to determine who is the knight and who is the knave based on their statements.
+      </p>
+    </div>
+    <div className="mb-4">
+      <h4 className="text-white text-lg font-bold">Rules</h4>
       <ul className="text-gray-300">
         <li>- Knights always tell the truth.</li>
         <li>- Knaves always lie.</li>
       </ul>
     </div>
     <div className="mb-4">
-      <p className="text-gray-300">Character A: B is a knave.</p>
-      <p className="text-gray-300">Character B: A and I are of opposite types.</p>
+      <h4 className="text-white text-lg font-bold">Statements</h4>
+      <ul className="text-gray-300">
+        <li>Character A: "B is a knave.</li>
+        <li>Character B: "A and I are of opposite types.</li>
+      </ul>
+    </div>
+    <div className="mb-4">
+      <h4 className="text-white text-lg font-bold">Task</h4>
+      <p className="text-gray-300">
+        Write a circuit in Circom that receives the selected value for each character and that the circuit can identify whether the selection of characters is correct or not. The circuit must be compiled using the PLONK protocol.
+      </p>
     </div>
   </div>
 );

packages/nextjs/public/challenges/challenge_4/steps.json

@@ -1,11 +1,11 @@
 {
-  "title": "Challenge 4 title",
+  "title": "Knights and Knaves - Plonk",
   "steps": [
     {
       "step": "Step 1",
       "description": ["Create the circuit in Circom (Knightsknaves.circom)"],
       "commands": [""],
-      "files": ["../../../../package/circuits/KnightsKnaves.circom"]
+      "files": ["KnightsKnaves.circom"]
     },
     {
       "step": "Step 2",