Learning Resources

========================================

SECTION 01 · IT'S BROKEN — SYMPTOM INDEX

========================================

S01 · My conditional judgment does nothing. The IF never runs.

Conditional judgment never auto-runs. It only executes when something fires the trigger action Execute Logic Judgment. Add that action to whatever should evaluate it. This is the single most common dead-logic cause on the platform.

Keywords: if else, condition, logic not firing, judgment not working, nothing happens on click, branch not working

S02 · The judgment runs but always takes the wrong branch.

Order. The parameter has to be assigned before the judgment reads it. In one trigger chain, put Set Parameter Value first and Execute Logic Judgment last. If it still misreads, the parameter is being set in a different chain that has not finished.

Keywords: wrong branch, always else, condition reads old value, parameter not updated, race

S03 · Another element can't evaluate my parameter.

Set the parameter's Trigger Mode to Wait for Trigger. Default is Immediate Trigger, and while it is Immediate no other component can run Execute Parameter Judgment against it.

Keywords: wait for trigger, immediate trigger, parameter judgment greyed, can't select parameter

S04 · My actions all fire at once. The page jumps before the animation is seen.

Triggers at the same level execute sequentially, not in the order you clicked them, and reordering the panel does not fix it. Use the trigger's success callback for strict ordering, or hang the navigation off a timer or an animation end. Never off audio.

Keywords: order of actions, sequence, actions same time, navigate too early, animation not seen, delay

S05 · My timer starts by itself when the page opens.

Uncheck Auto Start. It is on by default so the timer can be tested in the editor. Countdown and count-up both have it; arrival-time and current-time do not, and trigger behaviour only applies to countdown and count-up.

Keywords: timer auto start, countdown starts immediately, page jumps on load, timer fires early

S06 · I can't assign a random number.

You can't. With the Set Parameter Value action, the random number option offers only Reset. The roll happens when the work opens. For one draw per session, do not touch it; for a draw-again loop, fire Reset before the judgment.

Keywords: random number, set random, lucky draw, random not changing, reset random

S07 · My random draw stops working after a few tries.

The value list is set to non-repeatable and has run dry. Non-repeatable exhausts the enumerated list and then has nothing to return. Set it to repeatable. Default range when no list is given is 0–100 inclusive, integers only; non-integers in a list get rounded.

Keywords: random runs out, non-repeatable, value list, draw stops, fourth tap does nothing

S08 · I added a second animation effect and the first one vanished.

One effect per type, per element. Entrance, Disappearance and Effect are three separate slots; a second one in the same slot silently replaces the first. To stack, split across elements — put the shake on the object and the shine on a separate star.

Keywords: two animations, second effect replaced, can't add another animation, only one effect

S09 · Elements are firing animations and animation effects at the same time.

Don't mix presets and keyframe animations on one page. The manual is explicit: use either all animation effects or all animations. Also avoid putting an Entrance and a Disappearance on the same element with matching delay and duration.

Keywords: mixing animation, double animation, conflicting animation, jittery, both playing

S10 · I showed an element with a trigger and nothing appeared.

It faded or zoomed out earlier, so its opacity or scale is still 0. Show does not undo a Fade Out or a Zoom Out Disappearance — the element is still on the canvas, just invisible. Bring it back with a Fade In or Zoom In Appearance, not with Show.

Keywords: show element not working, invisible, element won't reappear, fade out stuck, opacity 0

S11 · My element is invisible and I never animated it.

Check the 3D rotation. At 90° on the X or Y axis, or any odd multiple of 90, the element sits perpendicular to the screen and disappears. Also check Initially Hidden, and check the layer panel's hide toggle.

Keywords: element disappeared, can't see element, 90 degrees, x axis invisible, initially hidden

S12 · My rotation wobbles instead of spinning cleanly.

Rotation pivots on the element centre by default, so asymmetric transparent padding in the PNG throws the axis off. Either crop the PNG symmetrically or set the Reference Point explicitly (percentage of element size; Clear Settings returns it to X 50% Y 50%).

Keywords: rotation off centre, wobble, spin, pivot, anchor point, transform origin

S13 · Nothing inside my Layer container responds to the page.

Sub-pages are one-way isolated. Elements inside a sub-page can control the main page, Top Level and Backend. The main page, Top Level and Backend cannot control elements inside a sub-page. Restructure so the sub-page element is the one that acts.

Keywords: layer container, subpage, sub page, can't trigger inside, isolated, one way

S14 · My Backend element won't take a trigger.

Backend elements can't be interacted with at all. They display themselves and their animations and nothing more — no gestures, no triggers. Move the element to the page or the Top Level.

Keywords: backend, background page, no trigger option, can't click, bottom layer

S15 · My drag-and-drop group never fires when the puzzle is complete.

The drop target must not sit at the draggable's starting position. If it does, the group trigger never activates. Also: a draggable image must not be obscured by any element in front of it, and each piece has to be bound to its own target before the group can referee them.

Keywords: puzzle, jigsaw, drag drop, target group, not completing, all correct not firing

S16 · My screenshot comes out cropped or stretched.

The default capture area is the canvas inner frame, 375×603, whatever your canvas is. Use Set Capture Area to define the region, and make sure the replacement image has the same aspect ratio as the capture area or it distorts. Text and paragraph filters and shadows are not saved into a screenshot; borders, colours and rounded corners are.

Keywords: screenshot, capture, poster, save image, cropped, stretched, 375x603, share image

S17 · My audio doesn't play on a phone.

Mobile browsers block sound until a user gesture. Autoplay works in desktop preview and lies to you. Put a Play action on the first tap of the cover page, then navigate. Leave Autoplay ticked as a fallback but never depend on it, and never hang a navigation off On Play End — a blocked or muted file may never fire it.

Keywords: no sound, audio not playing, autoplay, music silent, mobile audio, bgm

S18 · My music stops when the page changes.

Put it on the Top Level. Background music placed there survives page changes and generates its icon by default. Page-level audio components play on their own page only. Audio components on sub-pages are not recommended.

Keywords: music stops, cross page audio, top level, background music, page change

S19 · My image button distorts after I swap the artwork.

Both state images must be the same size and aspect ratio, and after replacing a resource you have to click 50% or 100% under Size and Position → Display Scale to snap it back to the original proportions. Same fix for any image that distorts after a swap.

Keywords: distorted, stretched image, button state, replace resource, display scale, 50%

S20 · My carousel images are cropped in Overlap or Coverflow mode.

Those modes show three frames at once, so use Scale to Fit. Fill and Scale to Fill clip or distort under Overlap 20%, Overlap 80%, Coverflow and Keyframe Zoom In. Push, Fade, Overlay, 3D Flip and Card are fine with Fill.

Keywords: carousel, coverflow, overlap, cropped, scale to fit, three images

S21 · My panorama's outer background isn't showing through.

The middle background must be a PNG with transparency when an outer background is also in use, and the layer cannot hold a large 2:1 JPG. Also, panorama sliding fights page sliding — put the panorama page in its own page group.

Keywords: panorama, 360, parallax, middle background, png, sliding conflict

S22 · My SVG won't fill, or the gradient stroke is gone.

SVG supports stroke lines only. No fill, no gradient strokes, and no clipping masks — a mask must be released and removed before the file will work. If you need a filled vector look, use the Graphic component or ship a PNG.

Keywords: svg, stroke, fill missing, gradient, clipping mask, vector not showing

S23 · Assets pop in late or the page loads half-empty.

Use the Preload Page trigger on the page before, and do not navigate the moment preloading completes — the manual's own instruction is to delay the navigation by 1 to 2 seconds with a timer. Video does not support preloading at all; it loads and plays together.

Keywords: slow loading, missing images, stutter, preload, first screen, blank page

S24 · My work opens on the wrong page or the flip goes the wrong way.

Page groups isolate paging. You cannot swipe between groups; moving from group A to group B needs a Navigate to Page trigger. Flip direction (vertical or horizontal) and the first/last page behaviour are set per group.

Keywords: page group, swipe, paging, can't flip, wrong page, navigation between groups

S25 · I lost work / I need to get back to a good state.

Undo is 20 steps and only covers canvas operations. Deleting a page cannot be undone at all. Save is manual (Ctrl/Cmd+S). Recovery route: Work Management → Copy the work before any risky change, so a bad edit costs you a duplicate rather than the project.

Keywords: undo, ctrl z, lost work, crash, recover, deleted page, version, backup

S26 · I can't edit my work any more.

It is submitted. Submitted works lock and the Edit button greys out. Click Cancel Submit to reopen it. Remember Save and Submit are separate operations and Submit takes processing time — budget for it before the module clock ends.

Keywords: can't edit, locked, submitted, cancel submit, edit disabled, greyed out

S27 · My debugger is still in the work.

Delete it before submitting. Logic panel → Global → Debugger → select → delete. It cannot be copied and only one exists per work.

Keywords: debugger, green button, remove before release, console

S28 · The exported project file doesn't work offline.

Components that depend on HTTP services, sequence frames among them, may not run in an offline environment. Expected behaviour, not a fault. Judge it in the browser preview instead.

Keywords: offline, export project, sequence frame broken, http, preview

========================================

SECTION 02 · BUILD ANYTHING THEY CAN ASK FOR

========================================

Every interaction the platform can produce, and the shortest route to each one. If the brief describes something not on this list, it is a combination of two things that are, so find the closest pair. Mechanism-level patterns — delays, shields, value passing — live in Recipes.

----------------------------------------

STRUCTURE AND NAVIGATION

----------------------------------------

T01 · Cover page with tap to enter

BUILD: Full-bleed art, then a Hotspot covering the whole canvas. On Click: Play the background music, then Navigate to Page with a Fade In transition.

TRAP: This tap is the only place you can legally start audio on a phone. Skip it and the work is silent for every judge who opens it on mobile.

T02 · Linear swipe story

BUILD: All pages in one page group. Set the group's flip mode to vertical or horizontal and pick one of the 8 transitions. Set first and last page behaviour on the group.

TRAP: Without first/last settings the user swipes off the end into nothing and assumes it broke.

T03 · Hub or menu with branches

BUILD: Put the navigation on the Top Level so it exists on every page. Each item gets Navigate to Page → Specified Page. Disable Top Level display on the cover.

TRAP: Crossing between page groups needs a Navigate trigger. Swiping will not do it, by design.

T04 · A back route out of every page

BUILD: One back button on the Top Level, not one per page. Navigate to Previous Page, or to a specified hub.

TRAP: Fault tolerance is marked. A page with no way out costs more than the button took to build.

T05 · Long scrolling page

BUILD: Page Information → Enable Long Page. Add Anchors where things should fire. Optionally add Trigger Page Scroll for a return-to-top control.

TRAP: Tick Disable Swipe/Keyboard Paging or the page navigation fights the scroll.

T06 · Branded loading screen

BUILD: Work Properties → Load Page Settings: background colour, background image, tile option, logo at 160×160, and a progress bar style. Preview inside the panel.

TRAP: Free marks on first-screen quality that most competitors leave at the default. Two minutes of work.

T07 · Chaptered content

BUILD: One page group per chapter. Rename groups by right-clicking. Move between them only by trigger.

TRAP: Group isolation is the feature, not a limitation — it is how you stop a user swiping out of a quiz halfway through.

----------------------------------------

NARRATIVE AND MOTION

----------------------------------------

T08 · Parallax scene

BUILD: Timeline component with elements on separate tracks moving at different rates, or the Panorama's three depth layers, or Association Control scrubbing several animations at different lengths.

TRAP: Timeline is the controllable one. Panorama is the impressive one. Pick by how much clock is left.

T09 · Animation that fires as you scroll to it

BUILD: Enable Long Page. Add an Anchor, drag the red dot to the trigger point, pick the viewport reference (top, bottom, left, right, centre) and the scroll direction, then set a pixel offset.

TRAP: Without an offset it fires inconsistently across device sizes. Inside a Layer container the references mean the container's edges, not the screen's.

T10 · Animation scrubbed by the finger

BUILD: Association Control. Set Length (the swipe distance that plays it), Initial (how far in it starts), Delay (dead distance before it begins) and Extension (dead distance after it ends).

TRAP: One-way control and inertia are the two switches that decide whether it feels good. Tune those before touching the numbers.

T11 · Chronicle, history or timeline

BUILD: One-shot take. Each Layer page is one scene; the camera flies through them along Z. Set spacing per layer, or uncheck initial viewing distance correction to place the first one by hand. Autoplay with a speed, or drag gesture, or both.

TRAP: ≤50 layers, ≤70 KB each, 500 px+ spacing for large assets, and it must be paired with page preloading. The obvious answer to any "chronicles" or "journey through" brief.

T12 · Zoom from one image into the next

BUILD: Picture-in-picture. Each frame is designed to contain a thumbnail of the frame that follows it. Playback mode zooms out one by one or in one by one.

TRAP: To adjust frame N's scaled position you must select frame N+1. Frames at 844×1496, ~200 KB each.

T13 · 360° scene you look around inside

BUILD: Panorama container. Outer background and middle background at 2:1 (2000×1000, 72 dpi), interactive elements in the innermost Layer page. Elements there trigger hidden Top Level panels on tap.

TRAP: Middle background must be PNG with transparency when the outer one is used, and the page needs its own group or the panorama drag fights page paging.

T14 · Typewriter text reveal

BUILD: Paragraph component, add the character-by-character appearing animation.

TRAP: Paragraph only, not Rich Text. And Paragraph cannot mix styles within one component.

T15 · Line that draws itself

BUILD: SVG component, paste the path, add SVG stroke animation with start 0%,0% and end 0%,100%. For a travelling dash: 0%,10% to 90%,100%.

TRAP: Stroke only. No fill, no gradient stroke, and clipping masks must be released before the file will work.

T16 · Shape that morphs into another shape

BUILD: SVG morph animation, chained: animation 1 takes path1→path2, animation 2 takes path2→path3, animation 3 reorders and takes path3→path1 for a loop.

TRAP: Default deformation nodes are usually fine. Only set them by hand if the morph visibly tangles.

T17 · Character or object animation

BUILD: Sequence Frame. Export frames from AE or a GIF, 8–15 fps, typically 8–22 frames, compressed. Control with Sequence Frame Playback Control: forward, reverse, pause, jump to frame, play a range, loop.

TRAP: No text in the filenames — it breaks the automatic numbering and your frames play out of order.

T18 · Orchestrated entrance sequence

BUILD: Give each element an animation with appearance method "Start after the previous", then order them top to bottom in the Animation Sequence panel. Group several into an animation group to run them as one unit.

TRAP: Animations set to autoplay inside a group cannot be controlled afterwards. Decide before you group.

----------------------------------------

GAMES AND MECHANICS

----------------------------------------

Summaries. Full click-by-click builds for all of these, with element lists, trigger chains, gates and cut paths, are in Game builds, step by step.

T19 · Lucky draw with sealed cards

BUILD: Random-number parameter with a value list, repeatable, Wait for Trigger. Conditional judgment routes ==1/==2/ELSE to three prize pages. Tap chain: audio → show shield → animate the picked card → start timer → timer End → Execute Logic Judgment → Navigate.

TRAP: The roll happens when the work opens; you cannot assign it. Non-repeatable lists run dry after a few draws.

T20 · Spin the wheel

BUILD: Rotation animation on the wheel. Click the @ beside the rotation degree and drive it from a random parameter — a base of several full turns plus the offset that lands on a segment.

TRAP: Rotation pivots on the element centre, so any asymmetric transparent padding in the PNG makes it wobble. Three legible segments is about the limit at 320 px wide.

T21 · Capsule or gashapon machine

BUILD: Sequence frame for the machine cycle, random parameter rolled on open, and the sequence's playback-end trigger fires Execute Logic Judgment to route to the prize.

TRAP: The machine artwork is a long illustration job. Costed against the clock this usually loses to sealed cards.

T22 · Scratch card

BUILD: Prize artwork underneath. Cover image on top with the Erase attribute enabled and an erase scale set — the cover only fully disappears once that percentage of its area has been rubbed away.

TRAP: The erase scale is the whole design decision. Set it too high and users give up before the reveal.

T23 · Jigsaw puzzle

BUILD: Every piece Draggable. One Drag & Drop Target per piece, each bound to its own piece. One Drag & Drop Target Group bound to all the targets. Group trigger "when all are correctly placed" → success sequence.

TRAP: A target sitting at a piece's starting position kills the group trigger. Pieces obscured by any element in front will not drag.

T24 · Matching or sorting

BUILD: Same as the puzzle, but tick "only allow correct element placement" so wrong drops bounce back. Use On Correct Drop and On Incorrect Drop for per-attempt feedback.

TRAP: Without the bounce-back the user can leave a piece in the wrong hole and stall forever.

T25 · Single-choice quiz

BUILD: Options must be Image Buttons. Add the Test Question component, bind each button to it, assign a value per option and mark the correct one. Use the built-in correct and incorrect triggers.

TRAP: Button Group looks similar but has no correct/incorrect triggers and cannot judge anything — use it only when you want to evaluate the answer yourself.

T26 · Multiple-choice quiz

BUILD: Test Question set to multiple selection, tick the correct options, then fire Execute Multiple Selection Judgment. Enable answer caching if the user can leave the page and return.

TRAP: Without caching, navigating away wipes their answers and they will not thank you.

T27 · Scored quiz with tiered results

BUILD: A Global Variable accumulates across pages. Each correct answer sets it +1, or +weight. On the results page, a conditional judgment with ranges routes to the right outcome, or Navigate to Page with Parameter Jump uses the variable directly as the destination.

TRAP: Parameter Jump lets one action replace a whole conditional. Worth knowing when the clock is short.

T28 · Personality or "which one are you" test

BUILD: Same skeleton, but make the Global Variable type Text and assign a category string per answer. Judge on the text at the end. Tally variant: one numeric variable per category and compare them.

TRAP: Text variables compare exactly. One stray space in an assigned value and the branch never matches.

T29 · Timed challenge

BUILD: Countdown timer with Auto Start unchecked, started by the first interaction. Trigger condition Equals 0 → results page. Interval triggers give you per-second effects like a pulsing clock.

TRAP: Timer trigger behaviour only exists on countdown and count-up. Arrival-time and current-time types have none.

T30 · Tap counter or collect-them-all

BUILD: A parameter increments on each click. A Paragraph displays it live via @. A conditional judgment fires the reward when it reaches the total.

TRAP: Set the parameter first, then Execute Logic Judgment, in that order in the chain, or it always evaluates one behind.

T31 · Progress bar or meter

BUILD: A Graphic rectangle. Set Element Properties changes its size, and the value can be driven from a parameter via @. Sit it inside a second rectangle as the track.

TRAP: Size changes from the element's own reference point — set that to the left edge or your bar grows from the middle.

T32 · Catch, dodge or bounce game

BUILD: Collision Detection component with both the moving element and the target bound to it. Fly-in animation on the moving element set to repeat continuously with an Expo easing. Make the paddle Draggable with the direction restricted to horizontal.

TRAP: This is the manual's own worked example, so it is well-supported — but it is also the most preview-hungry thing on this list.

T33 · Tilt-controlled game

BUILD: Two Gyroscope components, one set to the X axis and one to Y. Each gets an angle-change trigger driving Set Element Properties on the moving element's X and Y coordinates.

TRAP: Gyroscope axis is not the same thing as screen coordinate. Restrict the range or the element rolls out of view and never comes back.

T34 · Hidden object hunt

BUILD: One flat illustration, a Hotspot over each findable object, a parameter counting finds, and a conditional that fires when the count hits the total. Each hotspot shows a "found" marker and hides itself.

TRAP: Cheapest high-scoring interaction on the platform — no cropping in Photoshop at all, one background image does the whole thing.

T35 · Card flip and memory pairs

BUILD: There is no per-element flip. Use a Carousel with the 3D Flip transition for a genuine card turn, or pair Flip In Around Y Axis with Flip outward on Y Axis on two stacked elements. Track the first pick in a parameter and compare on the second.

TRAP: The Effect preset called Flip is a 360° spin, not a face turn. Different thing.

T36 · Step-gated sequence — do things in the right order

BUILD: One numeric parameter as a step counter, initial 0, Wait for Trigger. One conditional per element, each comparing the counter to its own constant. Correct tap advances the counter; wrong tap plays a shudder and changes nothing.

TRAP: Hidden elements take no taps, so if the correct element disappears on use you do not need a shield.

----------------------------------------

DISPLAY AND SHOWCASE

----------------------------------------

T37 · Product in 3D, viewable from any angle

BUILD: 3D Model component with a GLB file. Set camera coordinates, camera field of view, light source coordinates and light colour. Swipe orbits it.

TRAP: GLB only. If the brief hands you an OBJ or FBX you are converting it first, which is time you have not budgeted.

T38 · Image gallery

BUILD: Album component: set columns, rows, column and line spacing, scroll direction, and paging or continuous mode. Click Fullscreen for detail.

TRAP: It sorts by filename, so name the files in the order you want them shown.

T39 · Grid collage

BUILD: Collage component, pick a template, then set margins and rounded corners. Replace and reposition assets from the Material Resources panel.

TRAP: Template-bound. If the brief specifies a layout the templates do not have, build it with images instead.

T40 · Carousel showcase

BUILD: Carousel component. Ten transitions: None, Push, Fade, Overlay, 3D Flip, Coverflow, Overlap 20%, Overlap 80%, Keyframe Zoom In, Card. Five pagination styles with configurable initial and active colours.

TRAP: Overlap and Coverflow show three frames at once and need Scale to Fit. Fill will clip them.

T41 · Annotated diagram, map or infographic

BUILD: One image plus a Hotspot over each labelled area. Each hotspot shows a panel that lives on the Top Level, initially hidden, and hides the others.

TRAP: Remember to hide the previous panel as well as showing the new one, or they stack up.

T42 · Before and after comparison

BUILD: Two stacked images with the top one Erase-enabled, so the user rubs the new state in. Or a two-frame Slide with a swipe. Or a Draggable handle driving Set Element Properties on a masked image's width.

TRAP: The Image mask is a rectangular window only. Non-rectangular reveals are not available.

T43 · Tap to enlarge

BUILD: Image Preview trigger. Gives fullscreen, double-tap zoom on a region, two-finger pinch and drag, and swipe between images when pointed at a Slide, Sequence Frame, collage or album.

TRAP: One trigger replaces an entire lightbox build. Use it.

T44 · Styled list, comparison table or feed

BUILD: Content Template component. Pick a template style, bind your content items with the orange plus, and adjust the styling in the code panel if the presets do not fit.

TRAP: The closest thing on the platform to a component with props. Change the template type to relayout the same content.

----------------------------------------

INPUT, PERSONALISATION AND SHARING

----------------------------------------

T45 · Registration or sign-up form

BUILD: Advanced Form components: single-line input, text box, integer, decimal, date picker, toggle switch, radio, checkbox, dropdown, cascading data, submit button.

TRAP: To check a field is not empty, use != in a conditional and leave the value blank — the system writes '' for you.

T46 · Name input that personalises later pages

BUILD: Input box on page 0, a confirm button that writes its value into a Text-type Global Variable, and a Paragraph on any later page reading that variable via @.

TRAP: Must be a Global Variable, not a page parameter. Page parameters cannot be read outside their own page.

T47 · Drawing board or signature

BUILD: Drawing Board component with brush colour, thickness and stroke effect. To use the result elsewhere: convert the canvas to an image, assign it to a Text-type Global Variable, and replace the resource on a pre-placed image with the same aspect ratio.

TRAP: The drawing lives on the server and cannot display itself. Without that pre-placed image of matching ratio, nothing appears.

T48 · Let the user add their own photo

BUILD: Upload Image trigger action, targeted at an image on the page. It has both upload-success and upload-failure triggers. Or tick Editable on the image component itself.

TRAP: Wire the failure trigger to a message. A silent failure looks like a broken work.

T49 · Generate a poster the user can save

BUILD: Screenshot component. Add every element that belongs in the composite via the yellow plus. Set the capture area manually. Pre-place a replacement image of the same aspect ratio, and enable the save/long-press option on it. Use the screenshot-success trigger for a confirmation popup.

TRAP: Default capture is 375×603 regardless of your canvas. Text filters and shadows are not saved; borders, colours and radii are.

T50 · Share something personal with the next person

BUILD: Shared Variable. Assign text, an image URL or an audio URL to it before the work is forwarded; the recipient's copy reads it back and replaces a resource with it.

TRAP: This is a genuine share loop and it reads as product thinking rather than decoration. It is also the first thing to cut when the clock goes.

T51 · Voting or likes

BUILD: Voting component. Two state images (defaults provided), an initial count, and a font style panel for the number.

TRAP: It counts clicks on itself. It is not a backend.

----------------------------------------

SOUND AND VIDEO

----------------------------------------

T52 · Background music with a mute control

BUILD: Background Music on the Top Level so it survives page changes. Loop on, music icon shown — the icon is generated for you and gives the user mute for free.

TRAP: ≤1 MB, around 400 KB. Cut a bar and loop it rather than shipping a whole track.

T53 · A distinct sound per interaction

BUILD: One Audio component per page, or one per outcome. Put the Play action first in the trigger chain, because audio has the longest latency to a perceptible result.

TRAP: Never hang a navigation off On Play End. If the file is blocked or muted the event may never fire and the user is stranded.

T54 · Video with a custom cover

BUILD: Video component. Set the cover image and the play icon, then decide fullscreen behaviour separately for iOS, Android and PC. MP4 / H.264 / AAC, 750×1200, 25 fps, quality 8, VBR 2-pass.

TRAP: Video does not preload. It loads and plays together, so it is the most network-dependent thing in the work.

T55 · Video that branches or reacts

BUILD: Interactive Video. Drag the playhead, mark keyframes, name them, and attach triggers to each. Tick Auto Pause so it stops at a keyframe and waits for the choice.

TRAP: The strongest way to make Module C's video earn marks again inside Module D, if the clock allows it.

----------------------------------------

THE THINGS THE RUBRIC ALWAYS WANTS

----------------------------------------

T56 · Click feedback on everything tappable

BUILD: Each interactive element gets three things: a state change (toggle button or a swapped image), a sound, and a motion (an Effect preset at 0.3 s). The ORIGIN brief asks for exactly this in writing.

TRAP: Cheap and heavily marked. Do it on every element, not the important-looking ones.

T57 · Fault tolerance

BUILD: A back route from every page, mute always reachable, a full-canvas Hotspot shield to stop double-taps during a transition, and no state the user can enter and not leave.

TRAP: Judges will double-tap, swipe backwards and mute the sound. Test all three before you submit.

T58 · Motion matched to the music

BUILD: Pick one moment — a burst, a reveal, a title landing — and time its delay to a beat in the track. One preview pass to check it.

TRAP: A single synced moment moves the motion aspect a whole band. Twenty unsynced ones do not.

T59 · Surprise and a reason to explore

BUILD: Something on the second screen the user did not expect: a round two after they thought it ended, rarity tiers that show what they did not win, a hotspot that rewards curiosity.

TRAP: This is a named judgement aspect. Build one deliberately rather than hoping the work has some.

T60 · Performance and optimisation

BUILD: Compress every PNG, Preload Page ahead of heavy scenes with a 1–2 s timer delay before navigating, keep BGM near 400 KB, keep sequence frames short, and get the first screen under 3 seconds.

TRAP: Performance optimisation and review is 25% of the standard. It is not a nice-to-have at the end.

T61 · Works on every device

BUILD: Mobile and Desktop playback settings each take a background colour, display scale, adaptive layout, show-content-outside-page and orientation support. Use Relative Position on elements that must hold an edge.

TRAP: Design at 2× and 72 dpi throughout, because the editor shows images at 50%.

========================================

SECTION 03 · GAME BUILDS, STEP BY STEP

========================================

Eighteen full builds. Element list, build order, the exact trigger chains, the gate you verify before going further, the traps, and what to cut when the clock goes. Names in CAPS are what to call the elements — naming before you wire anything is the difference between picking CARD_2 and picking "Image Button 7" from a dropdown at hour five.

----------------------------------------

FIVE THINGS EVERY ONE OF THESE NEEDS

----------------------------------------

1. A shield. A Hotspot covering the canvas, Initially Hidden, shown the moment a choice is committed. Stops the double-tap that breaks your state. Not needed if the tapped element hides itself, because hidden elements take no taps.

2. Audio first in every chain. Sound has the longest latency to a perceptible result, so it goes at the top or it arrives late.

3. Set the parameter, then judge it. In that order, in the same chain. Every "it always evaluates one behind" bug is this.

4. Navigation on a timer, not on the element. Guarantees the feedback animation is seen and the variable is settled before anything reads it.

5. A way out. Back route, mute, and no state the user can enter and not leave. Marked directly under fault tolerance.

----------------------------------------

PICK BY THE CLOCK

----------------------------------------

Game: Hidden object hunt | Logic: ~20 min | Assets: one illustration | Risk: low | Verdict: Best marks per minute on the platform

Game: Scratch card | Logic: ~10 min | Assets: medium | Risk: low | Verdict: Cheapest real interaction there is

Game: Tap counter / collect | Logic: ~15 min | Assets: low | Risk: low | Verdict: Safe filler that still reads as a mechanic

Game: Sealed-card draw | Logic: ~20 min | Assets: high | Risk: low | Verdict: Buys the most Photoshop time of any draw

Game: Single-choice quiz | Logic: ~20 min | Assets: medium | Risk: low | Verdict: Component does the work for you

Game: Timed challenge | Logic: ~20 min | Assets: low | Risk: low | Verdict: Layers onto anything else here

Game: Step-gated sequence | Logic: ~25 min | Assets: low | Risk: low | Verdict: Reliable, and rounds make it feel bigger

Game: Jigsaw puzzle | Logic: ~30 min | Assets: medium | Risk: medium | Verdict: Target positioning is the whole risk

Game: Matching / sorting | Logic: ~30 min | Assets: medium | Risk: medium | Verdict: Puzzle skeleton, better failure handling

Game: Spin the wheel | Logic: ~35 min | Assets: high | Risk: medium | Verdict: Only if the wheel artwork already exists

Game: Scored quiz, N questions | Logic: ~40 min | Assets: high | Risk: medium | Verdict: Duplication carries bugs — gate question 1

Game: Catch / dodge | Logic: ~45 min | Assets: low | Risk: high | Verdict: Eats preview time. Only if asked for a game

Game: Tilt game | Logic: ~45 min | Assets: low | Risk: very high | Verdict: Testable on a phone only. Avoid under a clock

Game: Memory pairs | Logic: ~60 min | Assets: medium | Risk: high | Verdict: Most logic-dense thing on the list

Game: Gashapon | Logic: ~15 min | Assets: very high | Risk: high | Verdict: The machine is a 60-minute illustration

----------------------------------------

G01 · SEALED-CARD LUCKY DRAW

----------------------------------------

Three face-down cards, one random prize, a dedicated page per outcome. The choice is cosmetic and that is fine — what sells it is the unpicked cards leaving.

>> Place these

- CARD_1 / CARD_2 / CARD_3 — Image, identical artwork

- SHIELD — Hotspot, full canvas, top of stack, Initially Hidden

- PRIZE — Parameter variable, Random number

- CHK_PRIZE — Conditional judgment

- T_GO — Timer, Countdown, initial 1

- SFX_TAP — Audio component

- Pages P0 cover · P1 draw · P2/P3/P4 prizes, one page group

>> Build in this order

1. Skeleton first: set the canvas size, create and name all five pages, run Manage Fonts, save. Do this before a single element is placed — changing canvas size later rescales everything.

2. PRIZE: Advanced Components → Logic → Parameter variable. Type Random number. Value list 1,2,3. Tick Repeatable. Trigger mode Wait for Trigger.

3. CHK_PRIZE: Logic → Conditional judgment. Yellow plus → PRIZE == 1 → Navigate to Page P2, transition Fade In. Repeat for == 2 → P3. Add the ELSE condition → P4.

4. T_GO: Timer, Countdown, initial value 1. Uncheck Auto Start. Drag it off-canvas. Trigger condition End → Execute Logic Judgment → CHK_PRIZE.

5. SHIELD: Button → Hotspot, dragged to cover the canvas. Right panel → Initially Hidden. Confirm it sits at the top of the Layers list.

6. CARD_1: Animation Effects → Effect → Pulse Vibration, 0.35 s. Animation Effects → Disappearance → Fade Out, 0.4 s.

7. CARD_1 On Click chain, in exactly this order:

CHAIN: Play audio SFX_TAP → Show SHIELD → Trigger Animation Effects: CARD_1 (pulse) → Trigger Animation Effects: CARD_2, CARD_3 (fade out) → Start Timing T_GO

…1 s later… T_GO End → Execute Logic Judgment CHK_PRIZE → Navigate

8. Preview. The tapped card should pulse, the other two fade, then a beat later you land on a prize page.

9. Right-click CARD_1 → Copy Animation Effects. Paste onto CARD_2 and CARD_3. Then build each one's click chain with its own targets.

10. Build P2 completely: reward art with an Entrance animation, its own Audio component set to autoplay, a back button. Then duplicate the page twice, swap artwork, preset and audio, and repoint the back buttons.

GATE: All three cards must land on the correct page before you build a single prize page. Page duplication carries bugs as faithfully as it carries logic.

TRAPS: The random rolls when the work opens and cannot be assigned — Set Parameter Value offers only Reset. A non-repeatable value list runs dry after three draws and you only find out on the fourth preview. Navigation hangs off the timer, never off the card, so the fade is always seen and PRIZE is definitely settled before the judgment reads it.

CUT PATH: Screenshot save → burst art on two of three prizes → distinct sounds per prize (never cut all three) → cover art. Never cut: three separate prize pages, the shield, or a back route.

----------------------------------------

G02 · SPIN THE WHEEL

----------------------------------------

Rotation degree accepts a parameter via @, which is what makes this possible at all. Separate the result from the visual or you will fight it.

- WHEEL — Image, square, axle at the exact bounding-box centre

- POINTER — Image, fixed

- BTN_SPIN — Text button or Image button

- PRIZE — Parameter, Random number, list 1,2,3, repeatable

- SPINDEG — Parameter, Value

- CHK_DEG and CHK_PRIZE — two Conditional judgments

>> Build in this order

1. Export the wheel PNG square and centred. Transparent padding on one side throws the pivot off and the wheel visibly wobbles.

2. CHK_DEG maps the result to an angle: PRIZE == 1 → Set SPINDEG = 1080, == 2 → 1200, ELSE → 1320. Three full turns plus 0°, 120°, 240°.

3. Add a Rotation animation to WHEEL. Duration 3 s. Tick Wait Trigger activation. Easing Back Ease Out or Circ Ease Out so it overshoots and settles rather than stopping dead. Click the @ beside Rotation Angle and bind it to SPINDEG.

4. BTN_SPIN On Click: Play audio → Show SHIELD → Execute Logic Judgment CHK_DEG → Play Animation (the rotation).

5. Rotation animation trigger On Animation End → Execute Logic Judgment CHK_PRIZE → Navigate by PRIZE.

6. Preview at least four times. You are checking that it lands on the segment the result says it did.

TRAPS: Pivot is the element centre by default — set the Reference Point explicitly if the artwork is not symmetric. Three legible segments is about the limit at 320 px wide. Build this only if the wheel artwork already exists; the logic is 35 minutes on top of an illustration job.

----------------------------------------

G03 · GASHAPON OR CAPSULE MACHINE

----------------------------------------

Sequence frame for the cycle, random for the result, judgment on the playback-end trigger.

1. Produce the machine cycle as frames: 8–22 of them at 8–15 fps, compressed, auto-numbered, no text in the filenames or the sort breaks and they play out of order.

2. Add a Sequence Frame component and insert the frames in order. Autoplay off, Loop off, Scrollable off.

3. PRIZE random parameter, repeatable, Wait for Trigger. CHK_PRIZE conditional routing to the prize pages.

4. Handle On Click: Play audio → Show SHIELD → Sequence Frame Playback Control → Play forward.

5. Sequence Frame's playback-end trigger → Execute Logic Judgment → Navigate.

TRAPS: The logic here is the cheapest of the three draw mechanics; the artwork is by far the most expensive. Against a clock this loses to sealed cards almost every time. Only pick it if the brief hands you the machine.

----------------------------------------

G04 · SCRATCH CARD

----------------------------------------

Native. The Image component has an Erase attribute, and the erase scale decides when the cover gives up.

1. Place PRIZE_ART — the thing being revealed.

2. Place COVER directly on top. Match position and size using the X/Y and W/H fields, not by dragging — a two-pixel misalignment shows as a hairline of prize art around the edge.

3. Select COVER → right panel → enable the Erase attribute → set the erase scale. 50–60% is the usable band: the cover disappears entirely once that share of its area has been rubbed off.

4. Add a hint: an Effect animation on COVER, Shake or Swing, set to loop, so the user knows to rub rather than tap.

5. For a follow-on action, place a HS_CLAIM Hotspot underneath COVER and over the prize art, wired to your claim chain. While the cover exists it blocks taps; once erased away, taps reach through to it.

TRAPS: The manual documents the erase scale but does not document a completion event, which is why the hotspot-underneath route above exists rather than a trigger. Set the scale too high and users abandon before the reveal. Erasing with a mouse feels different from a finger — test on a touch device if you can reach one.

----------------------------------------

G05 · JIGSAW PUZZLE

----------------------------------------

Pieces, one target each, and a group component acting as referee.

- PIECE_1…n — Images, Draggable

- TGT_1…n — one Drag & Drop Target per piece

- TGT_GROUP — Drag & Drop Target Group

- BOARD — Image, the outline the pieces fill

>> Build in this order

1. Cut the pieces in Photoshop, export at 2×, and place them in a tray area away from the board.

2. Every piece: right panel → Draggable on. Leave the direction unrestricted.

3. Open the Layers panel and confirm nothing sits in front of any piece. A decorative overlay above the tray kills dragging with no error at all.

4. Add one Drag & Drop Target per piece and position each on the board. Never at that piece's starting position — if it starts inside its own target, the group trigger never fires.

5. Select each target → add its matching piece as the correct element. Tick "only allow correct element placement" if you want wrong drops to bounce back.

6. Add the Drag & Drop Target Group and bind every target to it.

7. TGT_GROUP trigger When all are correctly placed → audio → show the completion overlay → Start Timing → Navigate.

8. Optional per-piece feedback: On Correct Drop → a click sound. On Incorrect Drop → Tighten then Shake.

GATE: Drag every piece into place and watch the group trigger fire before you style anything. A dead group trigger discovered after an hour of polish is the expensive version of this bug.

TRAPS: Target at start position kills the group. An obscured piece will not drag. Four or six pieces is the sweet spot; nine is fiddly at 320 px.

CUT PATH: Per-piece sounds → incorrect-drop shudder → completion overlay animation. Never cut the group trigger.

----------------------------------------

G06 · MATCHING OR SORTING INTO BINS

----------------------------------------

Puzzle skeleton with better failure behaviour, and a score.

1. Build as the jigsaw, but the targets are category bins rather than positions.

2. Tick "only allow correct element placement" on every bin. This is what turns it from a puzzle into a sorting game: a wrong item physically refuses the bin and returns.

3. Add SCORE, a parameter, Value, initial 0, Wait for Trigger.

4. Each target's On Correct Drop → Set SCORE = SCORE + 1 → Execute Parameter Judgment. Each target's When removed → Set SCORE = SCORE − 1.

5. SCORE condition == total → success chain.

TRAPS: Without the bounce-back a user parks a wrong item in a bin, gets no feedback, and the game stalls with no way to tell what went wrong.

----------------------------------------

G07 · SINGLE-CHOICE QUIZ QUESTION

----------------------------------------

The Test Question component does the judging. Its options must be Image buttons — nothing else binds.

1. Add the options as Image Buttons. Not images, not text buttons. Give each two state images at identical size and ratio, then reset Display Scale to 100% after the swap or they distort.

2. Name every button before the next step — OPT_A, OPT_B and so on. Otherwise you are choosing from "Image Button 1…4" in a dropdown.

3. Advanced Components → Interaction → Test Question. It appears in the logic panel, not on the canvas.

4. Select the Test Question → right panel → yellow plus → add each button in turn → tick to confirm.

5. Assign a value per option, then mark the correct one in the correct-answer area.

6. Test Question triggers: When the selection is correct → correct sound, show the tick, show Next. When the selection is incorrect → wrong sound, shake the chosen option, show the explanation.

7. Add a full-canvas Hotspot, Initially Hidden, shown by both branches, so the answer cannot be changed after committing.

TRAPS: Button Group looks like the same component and has no correct/incorrect triggers whatsoever. If those triggers are not in the list, you added the wrong one — delete it and add Test Question.

----------------------------------------

G08 · MULTIPLE-CHOICE QUESTION

----------------------------------------

1. Steps 1–5 exactly as the single-choice build.

2. In the Test Question's dropdown, switch the selection type to multiple.

3. Tick every correct option, not just one.

4. Tick cache the answer results if the user can navigate away and come back — without it, leaving the page wipes their selections.

5. Add a Submit button. On Click → Execute Multiple Selection Judgment → the Test Question.

6. The correct and incorrect triggers now fire off that judgment rather than off each individual tap.

TRAPS: Skip the submit-and-judge step and nothing ever evaluates. The taps register, the component holds the answers, and nothing happens.

----------------------------------------

G09 · SCORED QUIZ ACROSS N QUESTIONS WITH TIERED RESULTS

----------------------------------------

The score has to survive page changes, which means a Global Variable, not a page parameter.

1. SCORE: Logic → Global Variable, type Value, initial 0. A page parameter cannot be read on another page, which is the failure mode people hit at question three.

2. Build question 1 completely, as build 7 above.

3. On its correct trigger, add Set Parameter Value → SCORE = SCORE + 1.

4. Preview, answer correctly, open the Debugger (green button, bottom right) and read SCORE under Variables. It must show 1.

5. Duplicate the page once per remaining question. Swap the artwork and the correct answer on each. Duplication carries the logic, presets and coordinates intact.

6. Results page: CHK_RESULT conditional. Conditions on ranges, highest threshold first: SCORE >= 8 → outcome A, >= 5 → outcome B, ELSE → outcome C.

7. Results page trigger When switching to current page → Execute Logic Judgment → CHK_RESULT.

8. Delete the Debugger before submitting. Logic panel → Global → Debugger → select → delete key.

GATE: Do not duplicate question 1 until you have watched SCORE increment in the Debugger. Duplicating a broken increment gives you N broken questions.

TRAPS: Conditions evaluate in order, so a >= 5 placed above >= 8 catches everything and the top tier is unreachable. Shortcut worth knowing: Navigate to Page → Parameter Jump can use a variable as the destination directly, replacing the whole conditional when the clock is short.

----------------------------------------

G10 · PERSONALITY OR "WHICH ONE ARE YOU" TEST

----------------------------------------

1. Weak version: one Global Variable of type Text, each answer assigning a category string, judged by exact text match at the end. Fast, but the last answer overwrites everything before it.

2. Correct version: four Global Variables, CAT_A to CAT_D, type Value, all initial 0.

3. Each answer option increments the variable for its category by 1.

4. Results page: nested conditional judgments comparing them in pairs. CHK_1 tests CAT_A >= CAT_B; whichever wins, execute the next conditional against CAT_C, and so on. The last conditional standing routes to the outcome page.

5. Results page trigger When switching to current page → Execute Logic Judgment on CHK_1.

TRAPS: Text comparison is exact — one trailing space in an assigned value and the branch silently never matches, so type values rather than pasting them. Nested conditionals are the documented way to test several conditions: satisfying condition A in judgment 1 executes judgment 2, and so on down.

----------------------------------------

G11 · TIMED CHALLENGE

----------------------------------------

1. Add a Timer, type Countdown, initial value in seconds, display format minutes:seconds. Entering 60 with that format shows 01:00.

2. Uncheck Auto Start. It is on by default so the timer can be tested in the editor, and it will otherwise start the moment the page opens.

3. Style it through the Element Style and Text Style panels on the right.

4. Start button On Click → Start Timing.

5. Timer trigger Equals 0 → results chain.

6. Optional tension: timer trigger Interval at 1 s → Trigger Animation Effects (Pulse Vibration) on the clock display.

7. Anything that pauses the game fires Pause Timing. A retry fires Reset Timing and then Start Timing.

TRAPS: Trigger behaviour exists only on the countdown and count-up types — arrival-time and current-time have none. The countdown floor is one whole second, so anything faster has to come off an animation's On Animation End instead.

----------------------------------------

G12 · TAP COUNTER / COLLECT THEM ALL

----------------------------------------

The cheapest mechanic that still reads as a game, and it needs no shield.

1. COUNT: parameter, Value, initial 0, Wait for Trigger.

2. A Paragraph component displaying it: set its content from COUNT via @. Reads live.

3. Each collectible On Click, in this order:

CHAIN: Play audio → Trigger Animation Effects: this element (Bounce or Flash) → Hide this element → Set Parameter Value COUNT = COUNT + 1 → Execute Parameter Judgment

4. COUNT condition == total → success chain.

5. No shield needed: each item hides itself when collected, and hidden elements take no taps.

TRAPS: Set the parameter before the judgment, always. If the reward fires one item late, that is the order.

----------------------------------------

G13 · PROGRESS BAR OR METER

----------------------------------------

1. TRACK: Graphic → rectangle, full width, muted fill, rounded corner set in the editor.

2. FILL: Graphic → rectangle, same height, accent fill, aligned to the track's left edge.

3. Select FILL → 3D Rotation and Transformation → Reference point → set X to 0%, Y to 50%. This is the whole trick: leave it at 50% and the bar grows out from its own centre in both directions.

4. Whatever changes the value fires Set Element Properties on FILL, changing its size, with the width driven from the parameter via @.

5. If the arithmetic gets awkward, precompute instead: a conditional that maps each score value to a fixed pixel width. Less elegant, no maths to debug at hour five.

TRAPS: Reference point. It is always the reference point.

----------------------------------------

G14 · CATCH, DODGE OR BOUNCE

----------------------------------------

The manual's own worked example, so the components support it — but it is the most preview-hungry build here.

1. Two PNGs: BALL and PADDLE.

2. BALL gets a Fly In animation: repeat set to play continuously, easing Expo Ease In.

3. BALL gets a Fly Out animation: appearance method start together with the previous, easing Expo Ease Out, tick Wait Trigger activation, and set its On Animation End to trigger the fly-in again. That pair is the loop.

4. Move BALL to its resting position at the bottom of the canvas.

5. PADDLE: Draggable on, drag direction restricted to horizontal.

6. Advanced Components → Collision Detection. Add BALL as the collision object and PADDLE as the collision target, confirming each.

7. Collision trigger → play BALL's fly-out animation → play a sound → Set SCORE = SCORE + 1.

TRAPS: Budget double the preview time you think this needs. Skip it entirely unless the brief explicitly asks for a game — the same clock spent on a hidden object hunt scores better.

----------------------------------------

G15 · TILT-CONTROLLED MOVEMENT

----------------------------------------

1. Add two Gyroscope components. GYRO_X set to the X axis, GYRO_Y set to Y. One axis per component — a single one cannot detect both.

2. Leave the starting range at default. Enable canvas display on both while building so you can watch the values change.

3. GYRO_X's angle-change trigger → Set Element Properties on the moving element, changing its X coordinate, value driven from the gyroscope via @.

4. GYRO_Y's angle-change trigger → the same, for the Y coordinate.

5. Clamp both ranges so the element cannot leave the viewport and become unrecoverable.

6. Preview on an actual phone. Desktop preview tells you nothing at all here.

TRAPS: The gyroscope axis is not the screen coordinate, and confusing the two is the standard failure. X runs roughly 0–90°, Y runs −90 to 90°, Z runs 0–360°. Under competition conditions, where you may not have a phone to hand, this is the riskiest build on the list.

----------------------------------------

G16 · HIDDEN OBJECT HUNT

----------------------------------------

Zero Photoshop cutting, one background image, and it scores directly against "surprise and desire to explore". The best marks-per-minute build on the platform.

1. One flat illustration as the page background. No slicing, no cropping, no exported elements.

2. FOUND: parameter, Value, initial 0, Wait for Trigger.

3. Over each findable object, place a Hotspot sized roughly to it. Hotspots are free — position and size them however you like.

4. For each object, a MARK_n element (a ring or tick), Initially Hidden, Entrance animation Zoom In.

5. Each hotspot On Click:

CHAIN: Play audio → Show MARK_n → Hide this hotspot → Set Parameter Value FOUND = FOUND + 1 → Execute Parameter Judgment

6. FOUND condition == N → success chain: audio, overlay, timer, navigate.

7. Add a Paragraph reading FOUND via @ for a live "3 / 6 found" counter. One element, real feedback.

TRAPS: Almost none, which is the point. The only real one is forgetting to hide the hotspot after a find, which lets the same object be counted repeatedly.

----------------------------------------

G17 · CARD FLIP AND MEMORY PAIRS

----------------------------------------

There is no per-element flip on this platform. Three routes, in descending order of how much it looks like a card turning.

>> The flip itself

1. Carousel with the 3D Flip transition. Two frames — back, then face. Tap fires Switch to Specified Frame. This is the only genuine card turn available.

2. Paired presets. CARD_BACK gets Disappearance → Flip outward on Y Axis. CARD_FACE gets Entrance → Flip In Around Y Axis, delayed by half the back's duration. Convincing enough at speed.

3. The Effect preset called Flip is a 360° spin, not a face turn. Do not reach for it here.

>> Memory pairs on top

1. PICK1 and PICK2: parameters, type Text, both Wait for Trigger. MATCHES: Value, initial 0.

2. Each card On Click: flip it, then Execute Logic Judgment on CHK_PICK.

3. CHK_PICK: if PICK1 != '' is false, set PICK1 to this card's id. ELSE set PICK2 to this card's id and Execute Logic Judgment on CHK_MATCH.

4. CHK_MATCH: PICK1 == PICK2 → both stay face up, MATCHES + 1, clear both picks. ELSE → start a 1 s timer whose End flips both back and clears both picks.

5. MATCHES condition == total pairs → win.

6. A shield during the mismatch second, or the user taps a third card mid-flip-back and corrupts the state.

GATE: Build one pair, verify both the match and the mismatch path, then duplicate. This is the most logic-dense thing in this section and the one most likely to eat your afternoon.

----------------------------------------

G18 · STEP-GATED SEQUENCE — DO THINGS IN THE RIGHT ORDER

----------------------------------------

The alphabet-line pattern. One counter, one conditional per element, and a swap instead of a movement.

1. STEP: parameter, Value, initial 0, Wait for Trigger. Runs 0 → n, reset per page.

2. One conditional per interactive element. CHK_A gates on STEP == 0, CHK_B on == 1, and so on. Each gate compares one variable to one constant, which is why this stays debuggable.

3. Place each element twice: once in the source row, once pre-positioned in its destination slot and Initially Hidden. Plus a STAR_n per slot, also hidden.

4. Each element On Click → Execute Logic Judgment on its own conditional.

5. IF branch, correct:

CHAIN: Play audio → Trigger Animation Effects: element (Zoom Out) → Hide element → Show SLOT_n (Entrance Bounce, 0.5 s) → Show STAR_n (Entrance Flash, 0.5 s, +0.2 s delay) → Set STEP = next value

6. ELSE branch, wrong: Play audio → Trigger Animation Effects → Tighten then Shake, 0.6 s. Nothing else changes, so the round can never become unwinnable.

7. Rounds: duplicate the finished page and swap the artwork. Each page loads fresh, so there is no reset logic and therefore no reset bugs.

TRAPS: The swap is what makes this work — the row element hides and a pre-placed twin appears. No coordinates to compute, no shield needed because hidden elements take no taps, and it sidesteps the one-effect-per-type limit by putting the shake on the block and the shine on a separate star. Audio first in every chain, Set Parameter last.

========================================

SECTION 04 · BRIEF DECODER — PHRASE TO MECHANIC

========================================

What the wording in a Module D brief is actually asking you to build.

If the brief says: "the rewards come with animation and sound effects" | It wants: Plural, attached to rewards — each prize needs its own reveal and its own sound | Build with: One page per prize, not one page with swapped text

If the brief says: "users can share" / "spread" | It wants: Something personal leaving the work | Build with: Screenshot component, plus a Shared Variable if it carries their input

If the brief says: "click to learn more" / "explore the details" | It wants: Progressive disclosure | Build with: Hotspots over one image, revealing hidden Top Level panels

If the brief says: "immersive" / "step into" | It wants: Depth and camera movement | Build with: Panorama, or One-shot take, or Timeline parallax

If the brief says: "chronicle" / "history" / "journey through" | It wants: Sequential scenes along a spine | Build with: One-shot take

If the brief says: "step by step" / "guided" | It wants: Enforced order | Build with: Page group plus a step-counter parameter gating each action

If the brief says: "collect" / "gather" / "complete the set" | It wants: A counter with a threshold | Build with: Parameter increments, conditional at the total

If the brief says: "personalised" / "your own" | It wants: User input surviving across pages | Build with: Input box → Text Global Variable → @ in a Paragraph

If the brief says: "test your knowledge" / "quiz" | It wants: Scored answers with feedback | Build with: Image buttons + Test Question, score in a Global Variable

If the brief says: "from every angle" / "view the product" | It wants: Rotation the user controls | Build with: 3D Model (GLB), or a sequence frame turntable if no model is supplied

If the brief says: "ad space" / "partner brand" with a pixel size | It wants: A fixed slot you must not restyle | Build with: Exact-size element on the Top Level so it persists

If the brief says: "low data" / "fast loading" | It wants: Explicit optimisation marks | Build with: Compression, Preload Page, small BGM, short sequences

If the brief says: "accessible" / "for all users" | It wants: Touch targets, contrast, an alternative to sound | Build with: 44 px floor, mute always reachable, never sound-only feedback

If the brief says: "culturally appropriate" | It wants: A checkable research claim | Build with: Spend an internet window on it — WSOS section 4 is 30% of the standard

========================================

SECTION 05 · EVERY HARD NUMBER IN ONE PLACE

========================================

Thing: Undo / redo depth | Value: 20 steps | Note: Canvas operations only. Page deletion is not undoable.

Thing: Canvas zoom range | Value: 0.25× – 4× | Note: Position is restored when the page reopens.

Thing: Editor display scale | Value: 50% | Note: Images render at half size, so design everything at 2× and 72 dpi. A 100×50 placed element is a 200×100 file.

Thing: Animation effect presets | Value: 74 | Note: 32 entrance, 32 disappearance, 12 effect. One per type, per element.

Thing: Preset effect plugins | Value: 15 | Note: Particles, backgrounds, bubbles, fireworks and similar.

Thing: Works mergeable at once | Value: 5 | Note: Over five and the system refuses the batch.

Thing: Background music size | Value: ≤1 MB, ~400 KB | Note: MP3. Cut a segment and loop it rather than shipping a whole track.

Thing: Sequence frame rate | Value: 8–15 fps | Note: Typically 8–22 frames. Compress the PNGs.

Thing: Video spec | Value: MP4 / H.264 / AAC | Note: 750×1200 recommended or 740×1136, 25 fps, quality 8, ~20 MB, VBR 2-pass. AVI and WMV not recommended.

Thing: Video inner frame | Value: 375×603 | Note: WeChat PLUS canvas inner frame. Outer frame 844×1496.

Thing: Screenshot default capture | Value: 375×603 | Note: Regardless of your canvas size. Override with Set Capture Area.

Thing: DIY image zoom limits | Value: max 375 px, min 74 px | Note: Minimum exists so the icon buttons stay tappable.

Thing: One-shot take layers | Value: ≤50 (≈60 if small) | Note: ≤70 KB per scene layer. Spacing 500 px+ for large resources. Pair with page preloading.

Thing: Panorama background | Value: 2:1, 2000×1000 | Note: 72 dpi. Middle background must be PNG if the outer one is used.

Thing: Picture-in-picture frames | Value: 844×1496, ~200 KB | Note: 72 dpi. Each image must contain a thumbnail of the next.

Thing: Popup title length | Value: 12 characters | Note: Popup max height is 80% of phone height, then it scrolls.

Thing: Random default range | Value: 0–100 inclusive | Note: Integers. A value list rounds non-integers.

Thing: Parameter precision | Value: integer or 1–3 dp | Note: Configurable per parameter.

Thing: Countdown floor | Value: 1 second | Note: Whole seconds. Sub-second delays need an animation instead.

Thing: Timeline scroll speed | Value: 10 ms/px default | Note: Milliseconds per pixel scrolled.

Thing: Image upload formats | Value: JPG, PNG, GIF, SVG | Note: Audio MP3. 3D models GLB. Fonts TTF/OTF.

Thing: Touch target floor | Value: 44 px placed | Note: Not a platform limit, a usability one. Below it, judges and users both miss.

========================================

SECTION 06 · TRIGGER EVENTS — EVERY EVENT AND ITS CONDITION

========================================

Category: Common | Event: On Click | Fires when: An element is clicked

Category: Common | Event: On Long Press Start | Fires when: A long press begins

Category: Common | Event: On Long Press End | Fires when: A long press ends

Category: Common | Event: On Mouse Hover | Fires when: The mouse hovers the element

Category: Drag & drop | Event: On Drop | Fires when: An element is dropped on a specified area

Category: Drag & drop | Event: On Correct Drop | Fires when: Dropped correctly on the target

Category: Drag & drop | Event: On Incorrect Drop | Fires when: Dropped incorrectly on the target

Category: Drag & drop | Event: When removed | Fires when: An element is taken out of the target

Category: Drag & drop | Event: When all correctly placed | Fires when: Every element sits in its right target — the puzzle-complete event

Category: Drag & drop | Event: When placement errors exist | Fires when: At least one element is wrong

Category: Drag & drop | Event: When any element removed | Fires when: Any element leaves its target

Category: Animation | Event: At animation start | Fires when: Animation begins playing

Category: Animation | Event: At animation end | Fires when: Animation finishes — the reliable sub-second delay hook

Category: Audio / video | Event: At playback start | Fires when: Audio or video starts

Category: Audio / video | Event: At playback end | Fires when: Playback completes. Never hang navigation here.

Category: Button | Event: On Click | Fires when: The button is clicked

Category: Button | Event: On Long Press Start / End | Fires when: Long press on the button begins or ends

Category: Button | Event: On Mouse Hover / Mouse leave | Fires when: Pointer enters or leaves the button area

Category: Button | Event: Click when inactive | Fires when: Clicked in its initial state

Category: Button | Event: Click when active | Fires when: Clicked in its toggled state

Category: Timer | Event: Equals | Fires when: Timer reaches a specified value

Category: Timer | Event: Interval | Fires when: Once every specified interval

Category: Timer | Event: Start | Fires when: The timer starts

Category: Timer | Event: End | Fires when: The timer stops — the standard gated-transition hook

Category: Anchor | Event: Scrolling up / down / left / right contact | Fires when: The page scrolls that way and meets the anchor

Category: Anchor | Event: When contact occurs | Fires when: Any scroll direction meets the anchor

Category: Button group | Event: After selection ends | Fires when: The user finishes choosing

Category: Test question | Event: When selection is correct | Fires when: Correct answer chosen. Button Group does not have this.

Category: Test question | Event: When selection is incorrect | Fires when: Wrong answer chosen

Category: Test question | Event: When selection ends | Fires when: All selections complete

Category: Screenshot | Event: Screenshot successful / failed | Fires when: Capture succeeded or failed

Category: Collision | Event: When a collision occurs | Fires when: Two elements collide

Category: Canvas | Event: Each time the pen is placed | Fires when: The user draws on the drawing board

Category: Page | Event: On Click / On double-click | Fires when: The page itself is clicked or double-clicked

Category: Page | Event: When switching to current page | Fires when: The user arrives on this page — the page-load hook

Category: Page | Event: On upward / downward / leftward / rightward swipe | Fires when: The page is swiped in that direction

Category: Page | Event: Landscape switch | Fires when: Device rotates to landscape

========================================

SECTION 07 · TRIGGER ACTIONS — EVERYTHING A TRIGGER CAN DO

========================================

>> Animation and element control

Play Animation · Trigger Animation Effects · Animation Control · Show Element / Component · Hide Element / Component · Set element properties · Set layer order · Toggle button state · Trigger Page Scroll · Switch to Specified Frame · Replace Resource File · Sequence Frame Playback Control · Interactive Video Playback Control · Timeline Animation Playback Control · Timeline Animation Element Control

Trigger Animation Effects is for the 74 presets. Play Animation is for keyframe animations. They are not interchangeable and picking the wrong one is a common dead trigger.

Animation Control handles pause, resume, reverse and stop, on one item at a time — one animation, one animation group, or the main timeline. To control several at once, group them and control the group. Animations set to autoplay inside a group cannot be controlled.

>> Pages and navigation

Navigate to Page · Preload Page · Image Preview · Text Copy · Copy DIY Image · Long Page Scrolling Control

Navigate to Page targets: Home, Last, Previous, Next, a Specified page, or a Parameter Jump where a variable picks the destination. Transitions: Push, Cover, Flip (3D), Zoom, Fade In, No Effect. Fade In costs nothing and always reads better than a hard cut.

>> Timer

Start Timing · Pause Timing · Reset Timing

>> Parameters and logic

Set Parameter Value · Execute Parameter Judgment · System Parameter Judgment · Execute conditional judgment · Execute multiple-choice judgment

>> Audio and video

Play audio and video · Pause audio and video · Stop audio and video

>> Application and interaction

Screenshot · Canvas Settings · Upload Image · Gyroscope Settings · Picture-in-Picture Playback Control · One-Click Scroll-to-Bottom

>> Other

Text pop-up · Image pop-up · Execute JS code · Execute JS component

Text pop-up builds a message box with one or two buttons, each with its own triggers, plus a window-close trigger. Execution order is confirm-or-cancel first, then close. Content can reference variables via the [+] button. Image pop-up has three themes, an image (Scale to Fit / Scale to Fill / Fill), a title of up to 12 characters, and body text; both title and image accept parameter variables via @.

========================================

SECTION 08 · ANIMATION EFFECT PRESETS — ALL 74

========================================

No parameters beyond repeat (none, once, twice, three times, loop), duration, and delay. Animations with the same delay execute simultaneously. This is animate.css underneath, so when a translated label is ambiguous, match it to the animate.css name.

>> Entrance (32) — from nothing to visible

None · Bounce In · Bounce In Down · Slide In from Right · Slide In from Left · Slide In from Bottom · Fade In · Fade In Downward · Fade In Leftward · Fade In Rightward · Fade In Up · Flip In Around X Axis · Flip In Around Y Axis · Decelerate In · Rotate In · Rotate In From Left · Rotate Left In · Zoom In · Zoom In Downward · Zoom In Rightward · Zoom In Leftward · Zoom In Upward · Slide In Downward · Slide In Rightward · Slide in from left · Slide in from bottom

>> Disappearance (32) — from visible to gone

None · Pop up · Pop down · Pop right · Pop left · Pop Up · Fade Out · Fade Out Downward · Fade Out Rightward · Fade Out Leftward · Fade Out Upward · Quick Fade Out Downward · Fast fade out right · Fast fade out left · Fast fade out upward · Flip outward on X Axis · Flip outward on Y Axis · Decelerated exit · Rotate Out · Rotate Out Right · Rotate Out Downward · Rotate Out Left · Rotate Out Upward · Zoom Out · Zoom Out Downward · Zoom Out Left · Zoom Out Right · Zoom Out Upwards · Slide Out Downwards · Slide Out Leftwards · Slide Out Rightwards · Slide Out Upwards

>> Effect (12) — emphasis on something already visible

None · Bounce · Flash · Pulse Vibration · Rubber Stretch · Shake · Swing Left and Right · Tighten then Shake (= tada) · Swing · Jelly Shake · Broken Chain · Flip · Rotation

TIP: Copy Animation Effects. Right-click an element → Copy Animation / Animation Effects, then Paste onto another element. Set one card up perfectly, then clone the setup rather than rebuilding it three times. The same menu exports animations to the Library for reuse across works.

========================================

SECTION 09 · KEYFRAME ANIMATION — TYPES, SETTINGS, EASING

========================================

>> Interactive animation types

Fly In / Fly Out · Fade In / Fade Out · Zoom In Appearance · Zoom Out Disappearance · Zoom In / Zoom Out · Transparency · Rotation · Linear Motion · Curved Motion · SVG stroke animation · SVG morph animation · Character-by-character

Playback animations (loop control) exist separately for Slide, Sequence Frame and Layer Slide.

>> Settings that decide whether it runs at all

- Wait Trigger activation — animations autoplay by default. Tick this and it only runs when triggered. If an animation fires when it shouldn't, this is the box.

- Appearance method — Start on click, Start after the previous, Start with the previous, or Swipe in one of four directions. "If the animation does not play, check this setting" is the manual's own advice.

- Duration and delay accept fractional seconds and can both be driven by a parameter variable via the @ symbol. This is your only sub-second timing control.

- Repeat — a count, or "play continuously until the page ends", or "play until the next click", or a parameter-supplied number.

- Return to Start After Playback — resets the element to its pre-animation state. Most visible on linear motion.

- Rotation — default 360° clockwise on Z around the element centre. A leading minus goes counterclockwise; values above 360 are allowed; axis and pivot are both configurable; the degree accepts @.

>> Easing families

Power0–Power4 · Quad · Cubic · Quart · Quint · Strong · Back · Bounce · Circ · Elastic · Expo · Sine · SlowMo

Each with Ease In, Ease In Out and Ease Out. Expo Ease In and Expo Ease Out are the manual's own choice for a bouncing-ball collision setup.

>> Path drawing shortcuts (linear and curved motion)

Action: Draw closed path | Key: C

Action: Cancel path closure | Key: O

Action: Delete path point | Key: Shift + click

Action: Add path point | Key: Alt / Option + click

Action: Exit path editing | Key: ESC

>> SVG stroke states

Start: 0%, 0% | End: 0%, 100% | Result: Draws the complete path from the start

Start: 0%, 100% | End: 0%, 0% | Result: Complete path disappears from the end

Start: 0%, 100% | End: 50%, 50% | Result: Path disappears from both ends at once

Start: 0%, 10% | End: 90%, 100% | Result: A fixed-length dash travels along the path

========================================

SECTION 10 · WHAT BEICE DRAWS NATIVELY — STOP EXPORTING THESE

========================================

Every hour spent making a card back in Photoshop is an hour Module D does not have. The editor draws more than it looks like it does, and native shapes stay editable when the brief changes at hour four.

>> Available to any element — image, text, graphic, button, container

- Background — colour or image, with fill mode.

- Border — line width, colour, style solid / dashed / dotted.

- Rounded corner — radius in px.

- Shadow — colour, X offset, Y offset, blur, spread. Enough for real elevation, and a hard no-blur offset gives you a physical lip.

- Filter — blur, saturation, hue, brightness, contrast. A hue shift on one PNG gives you a second colourway for free.

- Opacity, 3D rotation on X/Y/Z, skew, custom reference point.

>> Graphic component

Triangle, circle, square/rectangle, straight line, plus a larger vector library under More. Fill colour, border, border style, size, triggers, and double-click to add centred text. These are vectors and some accept SVG stroke animation.

>> Text button

Rounded rectangle by default, with border, fill colour or fill image, shadow and filter, plus editable label text. Faster to change than an image, which matters when the brief's colour changes at hour four. The Toggle Button adds two full states — text, background colour and background image for each — which is your image-button equivalent without leaving the editor.

TIP: The upload-a-flat-background trick. Upload a background image with no rounded corners, then set the radius in the editor. You get one asset that works at any corner treatment instead of re-exporting.

>> Still needs Photoshop

Illustration, texture, photographic composite, the logo, complex or multi-path icons, anything gradient-as-artwork, and anything that needs a clipping mask (SVG cannot do them and the Image mask is a rectangular window only).

>> Hotspot instead of slicing

The Hotspot is a resizable invisible rectangle that takes click, long press, mouse enter and mouse leave. Two uses: put several over one flat image so different regions do different things — no cropping in Photoshop at all — and stack one over everything, initially hidden, to block further gestures once a choice is made.

========================================

SECTION 11 · COMPONENTS — WHAT EACH ONE IS FOR, AND ITS TRAP

========================================

>> Basic

Component: Image | Use it for: The core visual container. JPG, PNG, GIF, SVG. | Trap: Display mode only matters after a swap — the box stays, the picture changes. Has Editable, Mask, Draggable and Erase properties, and an Execute shortcut for navigate / URL / phone that avoids a trigger conflict.

Component: DIY Image | Use it for: User-manipulable sticker: drag, scale, rotate, flip, copy, delete. | Trap: Set drag constraints and zoom limits or users lose it off-screen. Needs "include all cloned components" in the screenshot to be captured.

Component: Slide | Use it for: Multiple images, gesture or timed switching. Also serves as a two-state image button. | Trap: Push, Fade, Flip, CoverFlow only.

Component: Sequence Frame | Use it for: Frame-by-frame animation with playback control. | Trap: 8–15 fps, 8–22 frames, compress. Avoid text in filenames — it breaks the auto-sort.

Component: Carousel | Use it for: Slide plus 10 transition types and 5 pagination styles. | Trap: Overlap and Coverflow modes need Scale to Fit. 3D Flip here is the only real card-flip on the platform.

Component: Paragraph text | Use it for: Basic text, parameter-assignable, editable by the user, character-by-character reveal. | Trap: Cannot mix styles within one component. Use Display as Image to lock the format.

Component: Rich text | Use it for: Headings, lists, tables, references, links, sub/superscript, formulas, per-run formatting. | Trap: Heavier. Use it only where mixed formatting is actually required.

Component: Video / Interactive video | Use it for: Playback; the interactive version fires triggers at named keyframes. | Trap: No preloading support. Set cover, play icon and fullscreen behaviour per platform.

Component: Audio | Use it for: Page-level sound. Background Music is the work-level version. | Trap: Not recommended on sub-pages. Put anything that must survive a page change on the Top Level.

Component: Timeline | Use it for: Keyframed multi-element sequences, parallax, scroll-driven scenes, long-press playback. | Trap: Your closest thing to Smart Animate. Group with Ctrl/Cmd, Shift to multi-select.

Component: Button | Use it for: Text, Toggle, Image, Hotspot. | Trap: Image button needs two identically sized states, then a Display Scale reset.

Component: Graphic | Use it for: Vector shapes with fill, border, text, SVG stroke animation. | Trap: See the section above — this is where your asset time gets saved.

>> Interactive and advanced

Component: Layer container | Use it for: Scrollable region: long lists, chat UIs, directories. | Trap: Container must be smaller than the sub-page to scroll. One-way isolation — outside cannot reach in.

Component: Layer Slide | Use it for: A slide whose every frame is a full sub-page, so each frame can be animated. | Trap: Build the sub-pages first.

Component: Linked component | Use it for: Binds Slides, Sequence Frames, Layer containers and Layer Slides so one drives another. | Trap: Designate the main control. Uncheck Forward for reverse linkage.

Component: Drag & Drop Target | Use it for: A drop zone with correct / incorrect / removed triggers. | Trap: "Only allow correct placement" makes matching forgiving.

Component: Drag & Drop Target Group | Use it for: Referees several targets — the puzzle-complete check. | Trap: Target must not be at the piece's start position. Pieces must not be obscured.

Component: Timer | Use it for: Countdown, count-up, arrival-time countdown, current time. | Trap: Auto Start is on. Trigger behaviour only applies to countdown and count-up.

Component: Anchor | Use it for: Scroll-position-driven triggers on long pages and inside Layer containers. | Trap: References are viewport top / bottom / left / right / centre, with a pixel offset for device variation.

Component: Collision detection | Use it for: Games. Fires when two elements meet. | Trap: Bind both the colliding element and the target.

Component: SVG | Use it for: Pasted SVG code with draw-on and morph animation. | Trap: Stroke only. No fill, no gradient stroke, no clipping mask.

Component: Association control | Use it for: Gesture-scroll scrubbing of an animation. Length, initial, delay, extension. | Trap: Abstract to tune. One-way control and inertia are the two switches that change the feel.

Component: Drawing board | Use it for: User doodling with variable brush. | Trap: Output lives on the server — assign it to a text Global Variable to use it elsewhere, and pre-place an image of matching aspect ratio to display it.

Component: Gyroscope | Use it for: Tilt-driven motion. One axis per component. | Trap: Needs Set Element Properties. Two components for X and Y. Don't confuse the axis with the coordinate.

Component: Screenshot | Use it for: Composites page elements into one saveable image: invitations, posters, certificates. | Trap: 375×603 default area. Matching aspect ratio on the replacement. No text filters or shadows.

Component: Button group | Use it for: Single-choice with values. | Trap: Cannot judge correctness. No correct/incorrect triggers — you evaluate with a conditional.

Component: Test question | Use it for: Scored questions, single or multiple choice, with correct/incorrect triggers and answer caching. | Trap: Options must be Image buttons, bound to the component. Use Execute Multiple Selection Judgment for multi-choice.

Component: One-shot take | Use it for: Continuous zoom-through-scenes narration. Chronicles, timelines. | Trap: ≤50 layers, ≤70 KB each, 500 px+ spacing. Pair with preloading.

Component: Panorama | Use it for: 360° scene on a 2:1 background with three parallax layers. | Trap: Middle background PNG. Own page group.

Component: Carousel (marquee) | Use it for: Multi-screen rotation around a viewport edge axis. | Trap: Build sub-pages at the canvas outer frame size or you get white borders.

Component: Picture-in-picture | Use it for: Zoom from one image into a thumbnail inside it, repeatedly. | Trap: Each frame must contain the next one's thumbnail. Position frame N by selecting frame N+1.

Component: Collage / Album | Use it for: Grid layouts of images with templates, margins, radii, paging. | Trap: Album sorts by filename ascending or descending.

Component: Content template | Use it for: Styled repeating list bound to content, with a code panel for the styling. | Trap: Closest thing to a component with props.

Component: 3D Model | Use it for: GLB with swipe-to-orbit, camera coordinates, FOV, light position and colour. | Trap: Small files. Real option for a product-display brief.

Component: Voting | Use it for: Two-state like button with a running count. | Trap: Two default state images provided.

Component: HTML page / JS component | Use it for: Embedded markup and scripts. Global JS Code lives in the toolbar. | Trap: Escape hatch for anything the components refuse. Costs debugging time you may not have.

Component: Container | Use it for: Groups elements for shared animation, rotation, opacity and triggers. Exportable to the Library. | Trap: Add the assets first, then drag them in via the Layers panel — the orange line shows the drop. Ctrl/Cmd+A selects all inside once activated.

Component: Advanced form | Use it for: Input, text box, integer, decimal, date, radio, checkbox, dropdown, cascade, submit. | Trap: Cascade handles province/city/district-style hierarchies.

Component: Debugger | Use it for: Console, network, page elements, and live variable values for page, Top Level and Backend. | Trap: Delete before submitting. One per work, not copyable.

>> Logic components

- Parameter variable — page-scoped. Types: Value (integer or 1–3 decimals), Text, Random number. Trigger mode Immediate or Wait for Trigger.

- Global variable — work-scoped, no display, simpler than a Top Level parameter. Copyable without selecting a page.

- Shared variable — like a global, but travels through a shared link so the recipient sees what the sender produced. Carries text, image URLs or audio URLs.

- System variable — operating system, share-page mode, screen orientation.

- Conditional judgment — IF/ELSE over one or more parameters, with a single optional ELSE. Copyable within and across pages. Never auto-runs.

========================================

SECTION 12 · RECIPES — PATTERNS WORTH KNOWING BY HEART

========================================

R01 · Delay an action by 1–2 seconds

1. Add a Timer, type Countdown, initial value 1 or 2.

2. Uncheck Auto Start. Move it off-canvas or set it initially hidden.

3. Timer trigger condition End → the action you want delayed.

4. The originating element does the visible work, then fires Start Timing. The navigation hangs off the timer, never off the element.

R02 · Delay by 250–350 ms (tap acknowledgement)

1. Add any Animation to the element. Transparency 100% → 100% is invisible and works fine.

2. Duration 0.3 s, tick Wait Trigger activation.

3. Animation trigger On Animation End → the action.

4. On Click: do the visible thing, then Play Animation. The countdown timer floor is one whole second, so this is the only sub-second route.

R03 · Block a second tap — the gesture shield

1. Add a Hotspot covering the whole canvas, at the top of the stack, Initially Hidden.

2. Add a parameter variable, initial value 0, set to Wait for Trigger.

3. Give the parameter a condition: when it equals 1 (or 2, for a pick-two quiz), Show the hotspot.

4. Each option's On Click increments the parameter by 1 and then fires Execute Parameter Judgment.

Hidden elements take no taps, so this also removes the need for a shield when you are hiding the options anyway.

R04 · Random prize draw

1. Parameter variable, type Random number, value list 1,2,3, repeatable, Wait for Trigger.

2. Conditional judgment: ==1 → page A, ==2 → page B, ELSE → page C.

3. Tap chain: play audio → show the shield → animate the picked item → start the timer.

4. Timer End → Execute Logic Judgment → Navigate. Do not try to assign the random value; the roll already happened on open.

R05 · Quiz with a score

1. Options must be Image buttons. Add the Test Question component and bind each button to it.

2. Assign a value to each option and mark the correct one. Multi-choice needs Execute Multiple Selection Judgment.

3. Tick answer caching if the user can navigate away and come back.

4. For a running total, add a Global Variable and increment it on each correct answer, then judge the total on the results page.

Use Button Group instead only when you want to evaluate correctness yourself — it has values but no correct/incorrect triggers.

R06 · Drag-and-drop puzzle

1. Mark every piece Draggable, and make sure nothing sits in front of them.

2. Add one Drag & Drop Target per piece, positioned away from that piece's starting spot.

3. Bind each piece to its target. Optionally tick "only allow correct element placement".

4. Add a Drag & Drop Target Group and bind all the targets to it.

5. Group trigger When all are correctly placed → your success sequence.

R07 · Save-my-poster screenshot

1. Add the Screenshot component. In the logic panel, use the yellow plus to add each element that belongs in the composite.

2. Set the capture area manually — the default is 375×603 regardless of your canvas.

3. Pre-place a replacement image with the same aspect ratio as the capture area, on this page or the destination page.

4. Wire a button or hotspot to the Screenshot action, and use Screenshot successful for the confirmation popup.

5. Enable the save/long-press option on the replacement image if the user should be able to keep it.

R08 · Pass a value between pages

1. Add a Global Variable. Set its type to Text for strings, image URLs or audio URLs; Value for numbers.

2. On the source page, Set Parameter Value to write into it — from an input box, a drawing board output, a screenshot result.

3. On the destination page, read it: Replace Resource File for images and audio, Set Parameter Value for text and numbers.

4. Pre-place the receiving element with a matching aspect ratio, otherwise nothing displays.

R09 · Animate on scroll

1. Page Information → Enable Long Page.

2. Add an Anchor. Drag the red dot to the trigger position or type its coordinates.

3. Add a trigger condition: pick the reference (viewport top, bottom, left, right, centre) and the scroll direction.

4. Set a pixel offset so it still fires across device sizes.

Inside a Layer container the same references mean the container's edges, not the screen's.

R10 · Test several conditions at once

1. Nest them. Conditional judgment 1, on satisfying condition A, executes conditional judgment 2.

2. Judgment 2, on satisfying condition B, executes judgment 3, and so on.

3. To check whether an input box is empty: use !=, leave the field blank and confirm. The system writes '' for you.

R11 · Preload the next page without stalling

1. On the current page, fire the Preload Page trigger for the next page's assets.

2. Do not navigate immediately afterwards. Use a timer to delay the navigation by 1 to 2 seconds — this is the manual's own instruction.

3. Video cannot be preloaded. Plan around network, not around the trigger.

R12 · Reuse a working module

1. Group the elements into a Container component.

2. Right-click → Export Element to Library.

3. Insert it on any other page, or any other work under the same account. Pages themselves can be saved as templates the same way.

4. Page duplication carries logic, presets and coordinates — the cheapest way to add content, and the fastest way to clone a bug. Verify before you duplicate.

========================================

SECTION 13 · FIGMA → BEICE

========================================

In Figma: Component / instance | In Beice: Container → Export Element to Library | What you lose: No overrides and no update propagation. Copies are copies.

In Figma: Auto layout | In Beice: Nothing | What you lose: Everything. Position by hand with guide lines and snap lines. Global guides on the Top Level appear on every page.

In Figma: Variants / component states | In Beice: Toggle Button or Image Button | What you lose: Two states only, and the image version needs identically sized artwork.

In Figma: Prototype connections | In Beice: Trigger events → trigger actions | What you lose: No overview graph, though Layers → Trigger Event Management lists and searches every trigger on a page.

In Figma: Smart animate | In Beice: Timeline component | What you lose: Manual keyframing. No automatic matching between states.

In Figma: Overlay | In Beice: Text pop-up, Image pop-up, or an initially hidden element you Show | What you lose: Popups are template-shaped; the hidden-element route gives full control.

In Figma: Scrolling frame | In Beice: Layer container smaller than its sub-page | What you lose: One-way isolation from the parent page.

In Figma: Carousel / gallery | In Beice: Slide, Carousel, Layer Slide, Album | What you lose: Nothing much. This area is stronger than Figma's.

In Figma: Boolean operations | In Beice: Nothing | What you lose: Use the Graphic component's More library, paste SVG, or bring a PNG.

In Figma: Constraints | In Beice: Relative Position toggle | What you lose: Adjusts to the device viewport but with far less control.

In Figma: Styles and variables (design tokens) | In Beice: Nothing | What you lose: All of it. Write your palette and type scale on the desk pad and apply by hand.

In Figma: Pages and sections | In Beice: Page groups, plus Top Level, Page, Subpage, Backend | What you lose: Nothing. Top Level is your master page; Backend is a global background with no interactivity.

In Figma: Masks | In Beice: Image mask property (rectangular window) | What you lose: Non-rectangular masking. SVG explicitly cannot do clipping masks.

In Figma: Local variables / logic | In Beice: Parameter, Global, Shared and System variables + Conditional judgment | What you lose: Nothing — this is more capable than Figma. Remember it never auto-runs.

In Figma: Dev mode inspect | In Beice: Debugger component | What you lose: Console, network, elements and live variable values. Delete before submit.

========================================

SECTION 14 · CANVAS, PAGES, AND MEDIA SPECS

========================================

>> Page hierarchy

- Top Level — one page, sits above everything, appears on all pages. Where floating menus, navigation and background music belong. Can be disabled per page. Elements support positioning.

- Page — the working unit. Components and operations live here.

- Subpage — content for advanced components, shown on a page as a component. Logically isolated from the other three: it can reach out, they cannot reach in.

- Backend — one page, sits below everything, appears on all pages. Display only: no gestures, no triggers. Tick Show Backend and drop page opacity to see it while editing.

- Page groups — isolate paging. No swiping between groups; crossing needs a Navigate trigger. Flip mode (vertical or horizontal) and 8 transition options are set per group.

>> Canvas sizes seen in the manual

Context: WeChat PLUS inner frame (the safe area) | Size: 375 × 603

Context: WeChat PLUS outer frame | Size: 844 × 1496

Context: Common full-screen design size | Size: 740 × 1136

Context: Alternative work canvas | Size: 370 × 568

Context: Desktop-style canvas with subtitle strip | Size: 1024 × 718 (subtitle 1024 × 128, remainder 1024 × 590)

Context: Panorama background | Size: 2000 × 1000 (2:1)

Context: Load-screen logo / background examples | Size: 160 × 160 logo, 740 × 1136 background

Set it under Work Information → Work Properties → Page Size. Default is WeChat Plus. Design at 2× and 72 dpi throughout, because the editor displays images at 50%.

>> Load screen and playback settings

Work Properties → Load Page Settings gives you background colour, background image, tiling, a logo, and a progress bar style. Mobile and desktop playback have separate settings for background colour, display scale, adaptive layout, showing content outside the page, and orientation support. Work Information also holds the transition effect, page-flip arrows, and whether the music icon shows.

>> Fonts

Upload TTF or OTF to My Material Library, then add them in the editor's text panel with +. Do this before setting any type — retrofitting a font across finished pages costs more than it should.

========================================

SECTION 15 · SHORTCUTS AND EDITOR MECHANICS

========================================

Action: Save | Key: Ctrl / Cmd + S

Action: Copy / paste element | Key: Ctrl / Cmd + C, V

Action: Select all inside an activated container | Key: Ctrl / Cmd + A

Action: Zoom in / out / reset | Key: Ctrl / Cmd +  +  /  −  /  0

Action: Zoom with pointer | Key: Alt / Option + scroll

Action: Scroll canvas vertically | Key: scroll wheel

Action: Switch canvas scroll axis | Key: Ctrl / Cmd + scroll

Action: Pan the canvas | Key: hold Space and drag

Action: Multi-select in the timeline | Key: Shift + click

Action: Group in the timeline | Key: Ctrl / Cmd

>> Right-click on the canvas

Bring to Top Level · Send to Backend · Hide Element · Copy / Paste Element · Export Element to Library · Copy / Paste Animation · Copy / Paste Animation Effects · Export Animation to Library · Delete Animation · Delete Element.

>> Layers panel

Show/hide, lock, delete, and a trigger icon that jumps straight to Trigger Management for that element. Trigger Management searches every trigger on the page by keyword and filters by page, animation or component — the fastest way to find a trigger you set an hour ago and cannot locate.

>> Two previews

Preview Current Page is a floating window with refresh. Preview All opens a new browser window across all pages. Use the first after every logic block, the second at each gate.

WARNING: Defensive routine, in order. Save after every completed element group, not on a clock. Copy the whole work before any structural change, because undo is 20 steps and page deletion is permanent. Preview after every logic block rather than at the end. Delete the Debugger. Then Save, then Submit — separate operations, and Submit takes processing time you have to budget inside the module, not after it.