Right/Wrong Field
Type the answer. Right pops a green badge with sparkles, wrong pops a red one and the field gives a little wobble.
Get the file
Runtime
.rivReady to use in your app or website.
$4.99
Editable
.rev + .rivOpen it in the Rive editor and change anything. The .riv is included.
$9.99
Learn to build it
Full accessBuild this yourself, step by step. Every file in the library is included.
Courses from $119
Own a course? Sign in and every file is yours.
Use it in your own products and client work. Please don't resell or share the files themselves.
Using this file
The licence →Can I use it in a commercial product or a client project?
Yes. Use it in your own apps, websites and games, and in work you do for clients, paid or not. Change it as much as you like. Read the full licence
Can I resell or share the file?
No. Please don't resell, redistribute or re-upload the files, as they are or changed, and don't bundle them into templates, asset packs or UI kits, free or paid. If someone wants one, share a link to this page instead. Read the full licence
Do I need to credit you?
No, credit isn't required. A mention or a link back is always appreciated, though. Read the full licence
What's the difference between the .riv and the .rev?
The .riv is the runtime file: it goes into your app or website and plays there. The .rev is the editable source: you open it in the Rive editor to change the design, the animation or the state machine, then export your own .riv. Read the full licence
I own a course. Do I get it?
Yes. If you own the Rive Masterclass or the Rive Scripting Course, every file in the library is yours, the .riv and the .rev. Sign in with the email you bought the course with and the downloads unlock. Read the full licence
Who owns the files?
The files stay © Tom Acco / Rive Masterclass. When you download or buy one, you get a licence to use it, not ownership of it. Read the full licence
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function AnswerField() {
const { rive, RiveComponent } = useRive({
src: '/form-right-wrong.riv',
artboard: 'Answer Field',
stateMachines: 'State Machine 1',
autoplay: true,
autoBind: true,
});
// every input on this page is a view model property
const vm = rive?.viewModelInstance;
if (vm) vm.color('successColor').value = 0xFF2DB36F;
return <RiveComponent style={{ width: '100%', height: 400 }} />;
}Inputs: text, placeholder, fontSize, disabled, boxColor, borderColor, focusColor, textColor, placeholderColor, disabledColor, answer, right, wrong, successColor, errorColor, sparkles. All on the AnswerField view model.
How it's built
From the Form Set: a quiz field. Fill in answer and it checks itself (case and extra spaces don't matter), or leave answer empty and set right or wrong from your app. Pick the success and error colours, the box and text colours, turn the sparkles off, and disabled greys it out.
- 1It checks itselfPut the answer in answer. A small script compares what is typed (case and extra spaces don't matter) and sets right or wrong. Wrong waits until the guess is long enough and the typing stops, so nobody gets a red X mid word.
- 2Or your app decidesLeave answer empty and the script does nothing. Set right or wrong from your code, for answers you check on a server.
- 3Two booleans, two layersright and wrong each drive their own layer: pop in, rest, pop out. Right is the green badge, the tick landing a beat later with a twist, a ring, a green border and sparkles. Wrong is the red badge with a wiggle and a tilt of the whole field. All plain timelines you can open and edit.
- 4Any colourThe badge shading is successColor or errorColor with a light or dark layer on top, so any colour keeps the 3D look. disabled swaps it to disabledColor and ignores taps.
