Skip to main content

UNIT 25

Lakota Word Explorer

Language survives when people use it. Build a 3D flip-card vocabulary site for 16 Lakota words — with category filtering and a JavaScript Set-powered progress tracker.

⏱️ 7 Stages
🌿 Intermediate
⏰ 45–60 min per stage
🃏 CSS 3D Transforms + JS Set

The Big Idea

More than 2,000 Indigenous languages are at risk of disappearing. Many of those languages have almost no presence on the internet. The Lakota Word Explorer changes that — a flashcard site where visitors flip 16 vocabulary cards to reveal Lakota words and their English meanings, filtered by category and tracked with a live progress counter.

The big technical idea here is CSS 3D transforms: using perspective, transform-style: preserve-3d, and backface-visibility: hidden to make flat HTML elements rotate in three-dimensional space. The visual result is a card that physically flips. The JavaScript is small — one line per card — because CSS does almost all the work.

The second new pattern is a JavaScript Set: a collection that stores only unique values. You use it to count how many cards have been flipped, making sure each card is counted only once no matter how many times the user flips it back and forth.

By the end of this unit, you’ll be able to say “I can…”

  • Use perspective, transform-style: preserve-3d, and backface-visibility: hidden to build cards that rotate in three-dimensional CSS space
  • Write a click handler that uses classList.toggle to flip a card and flip it back
  • Build a category filter using btn.dataset.filter and card.dataset.category to show and hide vocabulary cards
  • Use a JavaScript Set to track unique card interactions and display a live progress count
  • Present Lakota vocabulary with pronunciation guidance sourced from the Lakota Language Consortium and New Lakota Dictionary
  • Connect the site’s design and content to the real-world mission of Lakota language revitalization

What You’ll Build

A 16-card Lakota vocabulary explorer in four categories: Greetings, Family, Animals, and Nature.

Each card shows a Lakota word on the front. Click it, and it flips in 3D to reveal the English meaning and pronunciation guide. Filter buttons let visitors explore one category at a time. A progress bar in the hero fills as new cards are discovered for the first time. A context section explains the stakes of Lakota language revitalization — this is not just a flashcard app; it is an advocacy tool.

Greetings Háu, Haŋ, Philámayaye, Wit˧hóni
Family Iná, Até, Misúŋkala, Taksí
Animals Mathó, Šuŋk, Ziŋtkála, Šuŋkawakṫáŋ
Nature Mní, Mahpíya, Wakpá, Wi

Language survives when people use it. You are building a tool that makes 16 Lakota words more accessible online than they were before you started.

Your learning path

The 7 Stages

STAGE 1 Design System CSS variables, Lora + Nunito, hero STAGE 2 Card Structure 3D CSS: perspective, preserve-3d STAGE 3 Flip Animation classList.toggle, rotateY(180deg) STAGE 4 Category Filter dataset.filter, show/hide cards STAGE 5 Context Section Language revitalization story STAGE 6 Resources & Footer Language resource cards, footer STAGE 7 Progress Counter JavaScript Set, live progress bar
Let’s Begin

← Back to All Units

Sources

The vocabulary in this unit comes from resources developed by Lakota community organizations and language keepers. Students are encouraged to explore these sources to find additional words meaningful to their community, verify pronunciations with native speakers, and consult Tribal language programs for guidance on respectful use of Indigenous language materials.

Lakota Language Resources

Language Preservation & Policy

Web Development: CSS 3D & JavaScript

Educational Standards

This unit aligns with computer science, language arts, social studies, and Indigenous education standards across MN, ND, and SD. Click a panel to expand.

  • Use perspective, transform-style: preserve-3d, and backface-visibility: hidden to build cards that rotate in three-dimensional CSS space
  • Apply rotateY(180deg) to pre-rotate a card face so it starts hidden and appears right-side up when the parent flips
  • Write a JavaScript click handler that uses classList.toggle to flip a card and flip it back with a single method call
  • Build a category filter using btn.dataset.filter and card.dataset.category with a ternary operator to show and hide elements
  • Use a JavaScript Set to track unique card interactions and calculate a live percentage progress display
  • Present Lakota vocabulary with pronunciation guidance sourced from the Lakota Language Consortium and New Lakota Dictionary
  • OSEU.SS.C.1, Language as Living Cultural Identity (All Grades): Students understand that Indigenous languages encode worldviews, relationships, and ways of knowing that cannot be fully translated into English. (The Lakota Word Explorer presents 16 vocabulary words as a living resource, not a historical artifact. The context section in Stage 5 requires students to write about the stakes of language loss and the ongoing revitalization work of the Lakota Language Consortium and Oglala Sioux Tribe.)
  • OSEU.ELA.W.1, Language Preservation Through Digital Tools (All Grades): Students understand the relationship between language preservation and cultural sovereignty, and produce content that positions digital tools as contributors to that effort. (Students research Lakota vocabulary from community-developed primary sources, build an interactive tool that makes those words more accessible online, and link directly to Tribal language programs. The finished site is a publishable contribution to language visibility on the web.)
  • CSTA 2-AP-16 (Grades 6–8): Incorporate existing code, media, and libraries into original programs, and give attribution. (Students build on CSS techniques from prior units and extend them with 3D transform properties. The category filter pattern from Unit 23 is adapted and combined with the new JavaScript Set pattern. Vocabulary is sourced from and attributed to the Lakota Language Consortium and New Lakota Dictionary.)
  • CSTA 2-AP-13 (Grades 6–8): Decompose problems and sub-problems into parts to facilitate design, implementation, and review. (The 7-stage build decomposes the language explorer into discrete sub-problems: CSS design system → card structure → flip animation → category filter → context section → resources → progress counter. Each stage builds one piece before combining with the next.)
  • ISTE 3b, Knowledge Constructor: Students evaluate the accuracy, perspective, credibility, and relevance of information and resources. (Students consult the New Lakota Dictionary and Lakota Language Consortium as primary sources for vocabulary. Pronunciation guides are presented as approximations, with students directed to audio resources from native speakers for authoritative pronunciation.)
  • ISTE 6c, Creative Communicator: Students communicate complex ideas clearly and effectively by creating or using a variety of digital objects. (Students communicate Indigenous vocabulary as a filterable, animated, interactive experience with a live progress counter, demonstrating creative use of technology to serve a cultural and educational purpose.)
  • MN ELA 8.3.3.1 (Grade 8): Use technology to produce and publish writing and present the relationships between information and ideas. (Students publish a fully interactive language learning tool with researched vocabulary content, prose context sections about Lakota language history, and links to vetted community resources — all structured as a publishable web document.)
  • MN Social Studies 7.4.9.6 (Grade 7): Describe the cultural contributions of diverse groups and explain how they contribute to the state’s cultural heritage. (Students present Lakota vocabulary from the Oceti Sakowin as a living cultural system, connecting each word to the ongoing revitalization work of the Lakota Language Consortium and the community language programs of the Oglala Sioux Tribe.)
  • MN CS K-12 Standard 6.1.1 (Grade 6): Decompose problems into smaller components through systematic analysis. (The 7-stage build systematically decomposes the language explorer: CSS variables → card HTML → flip JS → filter JS → context section → resources → Set-based progress counter. Students build and test each component before combining them.)
  • ND CS 6.E.1 / 7.E.1 / 8.E.1 (Grades 6–8): Create artifacts by applying existing knowledge of computing concepts and practices. (Students apply prior CSS and JavaScript skills and extend them with CSS 3D transforms and the JavaScript Set object, producing a polished language learning tool as the completed artifact.)
  • ND Indigenous Language Standard 1.1 (All Grades): Learners engage with the target language to exchange information and express meaning. (The flip card format requires active engagement: reading the Lakota word, predicting the meaning, then revealing the answer. This mirrors evidence-based active recall methodology for language learning.)
  • ND Indigenous Language Standard 1.2 (All Grades): Learners understand and interpret written language on a variety of topics. (Students research pronunciation guides for each word from the New Lakota Dictionary, interpret existing language documentation, and present both written form and approximate pronunciation on the card back.)
  • ND Indigenous Language Standard 3.1 (All Grades): Learners use the language both within and beyond the school setting. (The finished tool is a shareable web resource. Students are encouraged to share it with family, community members, and Tribal language teachers as a contribution to language accessibility online.)
  • OSEU Standard 4.1 (All Grades): Describe the significance of Oceti Sakowin language and oral traditions as expressions of culture, history, and identity. (The unit’s context section directly addresses this: students build a site that frames Lakota vocabulary as a living expression of cultural identity. The choice of which words to include and how to present them is itself a cultural act.)
  • OSEU Standard 4.2 (All Grades): Explain the relationship between language preservation and Tribal sovereignty and describe contemporary revitalization efforts. (Stage 7 connects the progress counter feature to the larger language revitalization movement. Students link to active language programs from the Oglala Sioux Tribe and Lakota Language Consortium and consider how their site fits into that ongoing effort.)
  • SD ELA 6.W.6 (Grade 6): Use technology, including the internet, to produce and publish writing and interact with others. (Students produce an interactive vocabulary tool with researched word entries, pronunciation guides, and a written context section about Lakota language history, all structured as a published web document.)
  • SD CS 6-8.AP.M.1 (Grades 6–8): Decompose problems and sub-problems into parts to facilitate design, implementation, and review. (The 7-stage build systematically decomposes the explorer: CSS variables → 3D card structure → flip JS → filter JS → context section → resource links → Set-based progress counter.)