Click here for free DL of the app version that can save data.

No:15405

←

Prev Next

→

لعبة حل المشاكل
Developer User6662｜Date and time 23/9/8 23:53:00
Build time 31.113 sec｜Game capacity 3.435KB｜

Script

لعبة حل المشاكل

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
  <head>
    <title>لعبة حل المشاكل</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        text-align: center;
      }
      
      h1 {
        margin-top: 50px;
        font-size: 30px;
        color: #333333;
      }
      
      .game-container {
        margin-top: 50px;
      }
      
      .pictogram {
        width: 100px;
        height: 100px;
        margin: 10px;
        display: inline-block;
        cursor: pointer;
      }
      
      .pictogram img {
        width: 100%;
        height: 100%;
      }
      
      .problem-message {
        margin-top: 30px;
        font-size: 20px;
        font-weight: bold;
        color: red;
      }
      
      .message {
        font-size: 18px;
        margin-top: 10px;
      }
      
      .button {
        background-color: #4CAF50;
        color: white;
        padding: 10px 20px;
        border: none;
        cursor: pointer;
        font-size: 18px;
        margin-top: 20px;
      }
      
      .button:hover {
        background-color: #45a049;
      }
      
    </style>
  </head>
  <body>
    
    <h1>لعبة حل المشاكل</h1>
    
    <div class="game-container">
      <div class="pictogram" onclick="solveProblem(1)">
        <img src="pictogram1.png" alt="Pictogram 1">
      </div>
      <div class="pictogram" onclick="solveProblem(2)">
        <img src="pictogram2.png" alt="Pictogram 2">
      </div>
      <div class="pictogram" onclick="solveProblem(3)">
        <img src="pictogram3.png" alt="Pictogram 3">
      </div>
    </div>
    
    <div class="problem-message" id="problem-message"></div>
    <div class="message" id="message"></div>
    
    <button class="button" onclick="startOver()">ابدأ من جديد</button>
    
    <script>
    
      // قائمة تحتوي على المشاكل وحلولها
      var problems = {
        1: {
          pictogram: "pictogram1.png",
          solution: "حل المشكلة رقم 1"
        },
        2: {
          pictogram: "pictogram2.png",
          solution: "حل المشكلة رقم 2"
        },
        3: {
          pictogram: "pictogram3.png",
          solution: "حل المشكلة رقم 3"
        }
      };
      
      // تابع لحل المشكلة
      function solveProblem(problemNumber) {
        var problemMessage = document.getElementById("problem-message");
        var message = document.getElementById("message");
        
        // البحث عن المشكلة في قائمة المشاكل
        if (problems.hasOwnProperty(problemNumber)) {
          var problem = problems[problemNumber];
          problemMessage.innerText = "تحدثت المشكلة التالية:";
          problemMessage.style.color = "red";
          message.innerText = problem.solution;
          message.style.color = "black";
        } else {
          problemMessage.innerText = "لم يتم العثور على المشكلة!";
          problemMessage.style.color = "red";
          message.innerText = "";
        }
      }
      
      // تابع لبدء اللعبة من جديد
      function startOver() {
        var problemMessage = document.getElementById("problem-message");
        var message = document.getElementById("message");
        
        problemMessage.innerText = "";
        message.innerText = "";
      }
      
    </script>
    
  </body>
</html>