Meta AI (Facebook Messenger) FAIL

Completed the task via ChatGPT:

As always the styling gets mucked up, fix 1, back 1.

Prompt: code me flash cards in html about vibe coding

Prompt: can you make the flashcards colourful and fit the screen

<!DOCTYPE html>

<html>

<head>

<title>Vibe Coding Flashcards</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #f0f0f0;

}

.flashcard-container {

display: flex;

flex-wrap: wrap;

justify-content: center;

}

.flashcard {

width: 250px;

height: 150px;

margin: 20px;

perspective: 1000px;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}

.flashcard .inner {

position: relative;

width: 100%;

height: 100%;

text-align: center;

transition: transform 0.8s;

transform-style: preserve-3d;

}

.flashcard .inner.flipped {

transform: rotateY(180deg);

}

.flashcard .front, .flashcard .back {

position: absolute;

width: 100%;

height: 100%;

backface-visibility: hidden;

border-radius: 10px;

display: flex;

justify-content: center;

align-items: center;

font-size: 18px;

color: #fff;

}

.flashcard .front {

background-color: #4CAF50;

}

.flashcard .back {

background-color: #2196F3;

transform: rotateY(180deg);

}

</style>

</head>

<body>

<div class="flashcard-container">

<div class="flashcard">

<div class="inner" onclick="flipCard(this)">

<div class="front">Vibe Coding</div>

<div class="back">Coding with style and flair!</div>

</div>

<div class="flashcard">

<div class="inner" onclick="flipCard(this)">

<div class="front" style="background-color:

<div class="back" style="background-color: #FF9800;">The energy and attitude of your code</div>

</div>

<div class="flashcard">

<div class="inner" onclick="flipCard(this)">

<div class="front" style="background-color:

<div class="back" style="background-color: #9C27B0;">The smooth, uninterrupted rhythm of coding</div>

</div>

<script>

function flipCard(card) {

card.classList.toggle('flipped');

}

</script>

</body>

</html>

Prompt: ok, white text on a white background can not be read by the human eye, fix that. Add another 6 cards (2 more rows) and include information/descriptions of vibe engineering, ways to communicate with ai, and ideas for teachers on how they might use vibe coding to improve student learning

<!DOCTYPE html>

<html>

<head>

<title>Vibe Coding Flashcards</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #f0f0f0;

}

.flashcard-container {

display: flex;

flex-wrap: wrap;

justify-content: center;

}

.flashcard {

width: 250px;

height: 150px;

margin: 20px;

perspective: 1000px;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}

.flashcard .inner {

position: relative;

width: 100%;

height: 100%;

text-align: center;

transition: transform 0.8s;

transform-style: preserve-3d;

}

.flashcard .inner.flipped {

transform: rotateY(180deg);

}

.flashcard .front, .flashcard .back {

position: absolute;

width: 100%;

height: 100%;

backface-visibility: hidden;

border-radius: 10px;

display: flex;

justify-content: center;

align-items: center;

font-size: 18px;

color: #333;

}

.flashcard .front {

background-color: #4CAF50;

}

.flashcard .back {

background-color: #2196F3;

transform: rotateY(180deg);

}

</style>

</head>

<body>

<div class="front" style="background-color:

<div class="back" style="background-color: #2196F3; color: #fff;">Coding with style and flair!</div>

</div>

<div class="front" style="background-color:

<div class="back" style="background-color: #FF9800; color: #fff;">The energy and attitude of your code</div>

</div>

<div class="front" style="background-color:

<div class="back" style="background-color: #9C27B0; color: #fff;">The smooth, uninterrupted rhythm of coding</div>

</div>

<div class="front" style="background-color:

<div class="back" style="background-color: #3F51B5; color: #fff;">Designing systems with emotional intelligence</div>

</div>

<div class="front" style="background-color:

<div class="back" style="background-color: #8BC34A; color: #fff;">Using natural language and empathy</div>

</div>

<div class="front" style="background-color:

<div class="back" style="background-color: #03A9F4; color: #fff;">Using coding to enhance student engagement and creativity</div>

</div>

<div class="front" style="background-color:

<div class="back" style="background-color: #FF69B4; color: #fff;">Use vibe coding to make learning fun and interactive</div>

</div>

<div class="front" style="background-color:

<div class="back" style="background-color: #795548; color: #fff;">Vibe coding can increase student motivation and participation</div>

</div>

<div class="front" style="background-color:

<div class="back" style="background-color: #607D8B; color: #fff;">Using code to express yourself creatively</div>

</div>

function flipCard(card) {

card.classList.toggle('flipped');

}

</script>

</body>

</html>

Giant FAIL: Code got trancated (standard for all chatAIs), and there was no text on the rear side of cards. =>ChatGPT