Magic Cards, Explained

I found the Binary Notation connection to this card trick very interesting. I was struck by the educational possibilities for people who have had an introduction to Number Theory, but needing a practical application to make sense of it. Young people of the age of ‘formal thought’ are attracted to magic and the challenge of ‘how it is done’ understanding. I put together this brief explanation of the math involved in creating this card trick.

To see the trick and my explanation click here:

Magic Cards; When finished viewing you must click on the back button “<” to return to this page …

for printable cards Download

I wanted to use my new laser cutter, so I made boxes to serve the same function as the cards above:

Each box contains the appropriate number of beads (0,1,2,4,8,16, or 32). The subject chooses a secret number, then empties the box(s) containing that number on its face, counts the beads, and amazingly they add to the secret number!

Here is a little aside video of an analog computer doing arithmetic in Binary …

So you want more…..

THE MAGIC CUBE TRICK:

To amaze your friends:

State that you will discover the month of their birth, as well as the day.

Show the Magic Cube, and ask if the number of their birth month (1 – 12) is on any of the 4 side panels.

If they report “YES” (selected), you add all the numbers in the upper left corners of each selected panel to get a total count.

Continue for the other 3 side panels.

The sum of numbers in the upper left corner of the YES panels, is the number of their birth month.

Next;

Reset the total count to Zero.

Repeat the above process for the day value (1 – 31). This time using the 4 side panels AND the bottom panel.

The sum of numbers in the upper left corner of the “YES” (selected) panels, is the number of their birth day.

How does it work?

Click on the “Magic Cards” link above, which describes the same trick, in a playing card format.

To make your own “Magic Cube”:

Goto Thingiverse.com, search for GeeEaZy, select “Magic Cube” and download the “STL” file; permitting you to 3D print your own Magic Cube. You may want to scale for readability

I think that this small piece of code has vast applications, requiring only minor modifications to make it suitable for many uses:

Think about a McDonalds counter; where virtual tiles with pictures of French fries, soda, …; pressing initiates price calculation applications, plus cooking room order applications, plus inventory control applications, plus … all made possible because little training is required to obtain accurate ordering information,

Even another variation … :

The following is a “work in progress” … – … my effort is complete and correct – while WordPress needs to remove its JavaScript content filtering / sanitization system (KSES) to enable my code. oh well! I am very disappointed that this version didn’t work – it was to be my grand finally.

You can Identify the Tiles containing the NUMBER of your Birth MONTH by CLICKING on the TILE(s):

// data about data – special characters Image Value Selector

January
February
March
April
May
June
July
August
September
October
November
December

… This is your Birth Month: …

Now; you can Identify the Tiles containing your Birth DAY by CLICKING on the TILE(s):

… This is your Birth Day: …

Now; … I have magically (using binary math knowledge) determine your Birth Month: …

and your Birth Day: …

THANK YOU

And now for one LAST variation …

This version benefits from the fact that all the magic is done by the tiles, with help from the participant. No involvement from the performer. The participant selects the tiles containing their secret number – turns them over and adds the numbers on the back sides – and magically they add to the secret number!

Aside: the best card trick I’ve seen in a long time …

and Thanks to:

“profhankd” for the hinged box design, and to

“Zagatorz” for guiding me to a cube presentation of an old card trick.

and to the wonderful binary counting device: “Turing Tumbler”

and to the unnamed inventor of the Magic Card trick available at most magic stores

SO … HERE’S THE DEAL …

I’m tired of working on this.

The problem is: That the last incarnation of this trick, required actual coding beyond my comfort zone

I never wanted to code in HTML/CSS/JavaScript on the WordPress platform in the first place!

So … everything is pretty much working … except …

In edit mode, using preview, += works fine … while after publishing it is treated as a =, and gives only the add-on value.

Like in: sum += add-on; OR sum = sum + add-on; OR old = sum; sum = old + add-on;

And … there are scripting problems, that I would learn to live with.

So … here’s the code – put it into your WordPress creation – solve my problems and clean up my mess,

AND

turns out that WordPress does not allow the kind of code that I am trying to use

so … until I find a new way to do things … this is it. Enjoy what I have!

HERE’S the HTML/CSS/JS code:

<!DOCTYPE html>

<!– HTML code. —

<body>

<title>Image Value Selector</title>

<!– Ordered List –>

These are the valid Month Numbers

<li>January</li>

<li>February</li>

<li>March</li>

<li>April</li>

<li>August</li>

<li>September</li>

<li>October</li>

<li>November</li>

<li>December</li>

</ol>

</label>

</label>

</label>

</label>

</div>

<style>

.image-container { // CSS properties for image display

display: flex; // flexible box layout

gap: 20px; // creates spaces between items

margin-bottom: 20px;

}

.image-box { // imbed image – but not insert into web page

border: 2px solid #FBEC5D; // element border of solid style, 2px wide, light gray

padding: 10px; // right border only

text-align: center;

}

.image-selector { // CSS class attribute

display: inline-block; // CSS property value combines characteristics of both inline and block elements

margin: 5px;

cursor: pointer; // visual appearance of the mouse cursor when hovering

}

.image-selector img { // descendant of element with class .image-selector

border: 2px solid transparent;

width: 60px;

transition: border 0.2s;

}

.image-selector input[type=”checkbox”]:checked + img {

border: 4px solid #0073e6; // blue

}

<!– #image-container {

display: flex;

gap: 20px;

}

–>

.selectable-image {

width: 75px;

height: auto;

cursor: pointer;

border: 3px solid transparent;

transition: border-color 0.3s ease;

user-select: none;

}

.selectable-image.selected {

border-color: #0073aa; /* WordPress blue */

}

</style>

<!– JavaScript code –>

document.addEventListener(‘DOMContentLoaded’, () => {

const images = document.querySelectorAll(‘.selectable-image’);

var sumDisplay = document.getElementById(‘sum’);

function updateSum() {

var sum = 0;

var old = 0;

images.forEach(img => {

if (img.classList.contains(‘selected’)) {

old = sum;

sum = old + Number(img.getAttribute(‘data-value’));

itemNumber = sum – 1;

// Get all list items

var items = document.querySelectorAll(‘#numberList li’);

// Get the text of the specified item

var selectedText = items[itemNumber].textContent;

document.getElementById(‘displayItem’).textContent =

“The Birth Month ” + (itemNumber + 1) + ” is: ” + selectedText;

}

});

}

images.forEach(img => {

img.addEventListener(‘click’, () => {

img.classList.toggle(‘selected’);

updateSum();

});

</script>

…

This is your Birth Month:

…

<!– Display Area –>

</body>

</html>

Next, you will find one of the first of many discussions that I had with ChatGPT.

I enjoyed our collaboration – it started a lot of lines-of-thought and ChatGPT explained it’s thinking very well. I look forward to working on many more projects with “Chat”.

CODE:

### **Overview**

You want to:

1. Display five pictures on your WordPress site.

2. Let users select any number of them (like checkboxes or clickable images).

3. When the user is done, perform different mathematical operations depending on which pictures were selected.

—

### **How to Approach This**

#### **1. Displaying Selectable Pictures**

You can use HTML and JavaScript for this. Each image can be clickable, toggling its “selected” state.

#### **2. Detecting Selections**

You’ll need JavaScript to keep track of which images are selected.

#### **3. Performing Calculations**

When the user submits (or clicks a button), your JavaScript code checks which images are selected and runs the appropriate math.

—

### **Example Code**

You can add this code to your WordPress site using a Custom HTML block (for the HTML) and a plugin like “Insert Headers and Footers” or your theme’s custom JS area (for the JavaScript).

#### **HTML (put in a Custom HTML block):**

“`html

</div>

<button id=”calculate-btn”>Calculate</button>

“`

*Replace `URL1.jpg` etc. with your actual image URLs.*

#### **CSS (optional, for highlighting selection):**

“`html

<style>

.selectable-pic {

border: 2px solid transparent;

width: 100px;

margin: 5px;

cursor: pointer;

transition: border 0.2s;

}

.selectable-pic.selected {

border: 2px solid #0073aa;

}

</style>

“`

#### **JavaScript (put in your custom JS area):**

“`javascript

document.addEventListener(‘DOMContentLoaded’, function() {

const pics = document.querySelectorAll(‘.selectable-pic’);

pics.forEach(pic => {

pic.addEventListener(‘click’, function() {

pic.classList.toggle(‘selected’);

});

document.getElementById(‘calculate-btn’).addEventListener(‘click’, function() {

const selected = Array.from(document.querySelectorAll(‘.selectable-pic.selected’));

const values = selected.map(img => parseInt(img.getAttribute(‘data-value’)));

// Example: Different operations based on selection

let result;

if (values.length === 0) {

result = “Please select at least one picture.”;

} else if (values.length === 1) {

result = “Square: ” + (values[0] ** 2);

} else if (values.length === 2) {

result = “Sum: ” + (values[0] + values[1]);

} else if (values.length === 3) {

result = “Product: ” + (values[0] * values[1] * values[2]);

} else {

result = “Total: ” + values.reduce((a, b) => a + b, 0);

}

document.getElementById(‘result’).textContent = result;

});

“`

—

### **How It Works**

– Users click images to select/deselect them (they get a border).

– When the button is clicked, the script checks which images are selected.

– It performs a different operation depending on how many are selected (you can customize the logic).

Jorge's Ponderings