Prompt Details
Model
Chat - GPT-3.5 (gpt-3.5-turbo)
Token size
60 ($0.00010 / call)
Example input
To begin, simply duplicate and insert the prompt. Make use of the new template as a starting point for crafting your own unique story!
Example output
Sure, I'll provide you with a simple interactive puzzle using HTML, CSS, and JavaScript. This puzzle will consist of a 3x3 grid where you can move pieces around to create a picture. Additionally, there will be a "Reset" button that shuffles the pieces for another drawing.
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>Interactive Puzzle</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="puzzle-container">
<div class="piece" draggable="true" id="piece1"></div>
<div class="piece" draggable="true" id="piece2"></div>
<div class="piece" draggable="true" id="piece3"></div>
<div class="piece" draggable="true" id="piece4"></div>
<div class="piece" draggable="true" id="piece5"></div>
<div class="piece" draggable="true" id="piece6"></div>
<div class="piece" draggable="true" id="piece7"></div>
<div class="piece" draggable="true" id="piece8"></div>
<div class="piece" draggable="true" id="piece9"></div>
</div>
<button id="resetBtn">Reset</button>
<script src="script.js"></script>
</body>
</html>
```
CSS (styles.css):
```css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.puzzle-container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 5px;
}
.piece {
width: 100px;
height: 100px;
background-color: #d9d9d9;
border: 1px solid #ccc;
}
button {
margin-top: 20px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
```
JavaScript (script.js):
```js
// Array to store the pieces
const pieces = Array.from(document.getElementsByClassName('piece'));
// Shuffle the pieces randomly
function shufflePieces() {
pieces.sort(() => Math.random() - 0.5);
pieces.forEach((piece, index) => {
piece.style.order = index;
});
}
// Reset button click event
document.getElementById('resetBtn').addEventListener('click', () => {
shufflePieces();
});
// Drag and drop functionality for the pieces
let draggedPiece = null;
pieces.forEach((piece) => {
piece.addEventListener('dragstart', (e) => {
draggedPiece = e.target;
});
piece.addEventListener('dragover', (e) => {
e.preventDefault();
});
piece.addEventListener('drop', (e) => {
e.preventDefault();
if (draggedPiece !== null) {
const sourceOrder = draggedPiece.style.order;
draggedPiece.style.order = e.target.style.order;
e.target.style.order = sourceOrder;
}
});
});
```
This code sets up a simple 3x3 puzzle grid with nine pieces that you can drag and drop to arrange. When you click the "Reset" button, the pieces are shuffled randomly to create a new puzzle for you. The design is minimalistic and straightforward, with pieces represented by divs in a grid and a single button for resetting the puzzle.
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
3
Favorites
38
Views
GPT-3.5-TURBO
🔥 Crea el sitio web de tus sueños ¡Incluyendo tus propios rompecabezas personalizables y funcionales en cualquier momento!
💥 Dispondrás de todo lo necesario para crearlo, como tu propio código html, css y javascript.
✨ Viable para cualquier diseño, ¡CONSÍGUELO AHORA!
...more
Added over 1 month ago
