> For the complete documentation index, see [llms.txt](https://docs.launchboard.app/cxd/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.launchboard.app/cxd/code-chatbot-1/code-mods/create-flipcards.md).
# Create Flipcards
The example code below demonstrates how you could add flip cards to your chatbot. Here we use a flip card to create a study tool for terms and definitions. This example is an adaptation of [a blog post by David Walsh](https://davidwalsh.name/css-flip).
### The Rivescript Object (Javascript)
Below, the `getRandomFlipcard` function gets a random term from the database and creates a flash card with the term on the front side and the definition on the back. Buttons for the user to get another term or quit are provided. You can use this code below, but you may need to make adjustments to work with your database column names.
```javascript
> object getRandomFlipcard javascript
var randomIndex = Math.floor(Math.random() * chatbot.db.length);
var currentItem = chatbot.db[randomIndex]
var html = `
${currentItem.term}
${currentItem.definition}
`
return html;
< object
```
### The Rivescript Trigger
Below is a simple trigger you can use, but you will likely want to customize how the user starts using flip cards, whether by clicking a button or using a different keyword trigger.
```javascript
+ flipcard
- getRandomFlipcard
```
### The CSS
You will need the CSS below for the flip card to work. It is recommended that you paste this to the bottom of your stylesheet.
```css
/* For flip card */
/* entire container, keeps perspective */
.flip-container {
perspective: 1000px;
margin: auto;
}
/* flip the pane when hovered */
.flip-container:active .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 325px;
height: 50vh;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
box-sizing: border-box;
padding: 10px;
height: calc(50vh - 30px);
background: white;
box-shadow: 1px 1px 6px #888;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
/* End flip card */
```
That's it. Your flip card should work, but you may have to make modifications to how you access your database.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://docs.launchboard.app/cxd/code-chatbot-1/code-mods/create-flipcards.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.