> ## Documentation Index > Fetch the complete documentation index at: https://imscodingprojects.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Lesson Planning Questions, AVIVA & V-App > Key questions for preparing the React Native V-App lesson using AVIVA didactic model ## Step 1: Conditions / Audience Analysis 1. **What basic knowledge should participants have?**\ Participants should have a solid understanding of Typescript fundamentals, including variables, functions, objects, arrays, ES6 syntax (arrow functions, destructuring) and promises. They should also have experience with basic React concepts like components, props, state and hooks. 2. **What prior knowledge do participants bring in the topic/technology?**\ Participants are expected to have built at least small React web apps and understand component composition. Some experience with navigation libraries (e.g., React Router, Angular Router or basic navigation concepts) is helpful. Familiarity with design systems or UI frameworks (e.g., Material UI) will support learning React Native Reusables and theming. 3. **What are the participants' needs and motivations?**\ They want to create real mobile apps efficiently, reuse components across projects, implement consistent theming and understand best practices in navigation. Motivation comes from quickly building functional apps, mastering cross-platform development and acquiring skills directly applicable to professional projects. 4. **Which resources are available (materials, online resources, or classroom infrastructure)?**\ Laptops, VS Code or JetBrains IDEs, Node.js, TypeScript environment, GitHub repository for templates, projector and online resources like TypeScript documentation or Component library documentation. 5. **What is the available time frame for the lesson?**\ The lesson is planned for 35 minutes, allowing time for setup, live coding, guided exercises, collaborative work and reflection. TO BE CHANGED 6. **Where and how is the product/technology used?**\ React Native is used to build cross-platform mobile applications for iOS and Android, often in startups and production apps. Component libraries allow developers to reuse UI patterns across apps and theming ensures consistent branding and user experience making it both more appealing to the user and for the developer to use. 7. **What is the future significance of the product/technology?**\ React Native remains relevant due to its ability to produce cross-platform apps quickly and its large ecosystem. Mastery of reusable components and theming prepares students for professional app development and scalable UI design, with skills transferable to web React and any other frameworks. ## Step 2: Review Learning Objectives (SMART) 1. **Which aspects of the SMART criteria can you identify in the learning objectives of Module V-App?**\ The learning objectives of Module V-App are generally aligned with the SMART criteria. They are specific, clearly describing what learners are expected to achieve, such as acquiring new technologies, applying knowledge in a team, explaining the AVIVA model, developing a Mobile Hybrid App solution and creating a lesson plan using content analysis.\ They are measurable in most cases, as outcomes can be assessed through project work, lesson plans or documentation.\ The objectives are achievable, realistic for the learners which have the appropriate background and relevant, directly supporting the module's focus on technology, knowledge transfer and instructional design.\ However, they are not explicitly time-bound, as no specific deadlines or durations are mentioned. Although, adding time frames would fully complete the SMART alignment (which are defined later on anyway). ## Step 3: Taxonomy Levels 1. **What complexity level (taxonomy stage) do the predefined learning objectives have (same objectives as in Step 2)?**\ The learning objectives of Module V-App cover mainly the higher levels of Bloom's Taxonomy. Learners go beyond 1. Knowledge (Wissen) and 2. Understand (Verstehen) by actively engaging in 3. Apply (Anwende), for example when applying new technologies in team projects or implementing the AVIVA model in lessons. They also reach 4. Analyse (Analyze) and 5. Evaluate (Evaluation) when deriving best practices and assessing solutions.\ Finally, tasks such as developing a Mobile Hybrid App or creating lesson plans correspond to 6. Create (Synthese), as learners construct new solutions and structured lessons from their experiences. Overall, the module emphasizes higher-order thinking and practical application rather than simple memorization. ## Step 4: Bloom's Taxonomy Placement 1. **Are the learning objectives correctly assigned to Bloom's taxonomy levels?**\ After reviewing the learning objectives of Module V-App, they were largely placed correctly within Bloom's Taxonomy. Objectives such as applying new technologies in team projects or implementing the AVIVA model clearly fall under 3. Apply (Anwenden). Deriving best practices involves 4. Analyze (Analyse) and 5. Evaluate (Evaluation), while developing a Mobile Hybrid App or creating lesson plans corresponds to 6. Create (Synthese). 2. **Where do uncertainties or ambiguities exist?**\ Some objectives have minor ambiguities: for example, "explaining acquired knowledge" could be considered 2. Understand (Verstehen), but if it involves presenting insights to others and justifying decisions, it could also touch 5. Evaluate (Evaluation). Overall, the classification is consistent, but a few objectives span multiple levels depending on how they are looked at. ## Step 5: Define Learning Objectives for the Lesson 1. **What are your own (3) learning objectives for the lesson?** * Students will comprehend and implement how routing works in React Native. * Students will create and reuse components using React Native Reusables. * Students will apply consistent theming across the app. ## Step 6: Define Cross-Disciplinary Learning Objective 1. **What is at least one cross-disciplinary learning objective for the lesson?**\ I can reflect on my development workflow, evaluate app usability and go through one by one on my design and code decisions to improve user experience. 2. **How well can cross-disciplinary objectives be measured or tested according to SMART criteria?**\ They can be assessed through project work, peer review or reflection logs, which makes them measurable even if slightly subjective. Achievable and relevant within lesson scope. 3. **Which assessment methods (project work, written test, oral exam, etc.) best evaluate these objectives?**\ Project-based assessment, 4K feedback, self-reflection documentation and mini presentations. 4. **How do the learning objectives influence the choice of assessment methods?**\ The objectives focus on practical skills and reflective practice, requiring assessment methods that allow demonstration, discussion and evaluation of workflow, component reuse and theming consistency. ## Step 7: Review Teaching Materials & Visualize Relationships **Mind Map: Subject and Didactic Analysis of the Learning Objectives** 2. **Where does material need to be reduced or supplemented?**\ The material related to component libraries (React Native Reusables) should be reduced. The library contains many different UI components and it would not be practical or necessary to go through every single component during the lesson. Instead, the lesson should focus on a small set of representative components, such as buttons, cards and inputs, to demonstrate how reusable components are implemented and used in practice.\ But at the same time, some materials should be supplemented, particularly with visual explanations and practical examples. Diagrams showing folder structure, routing flow and theming relationships. ## Step 8: Activate Prior Knowledge 1. **How and when is prior knowledge activated?**\ Prior knowledge is activated during the Activate phase of the AVIVA model, which follows the initial Arrive phase of the lesson. According to the AVIVA approach (Städeli), learning should connect new knowledge with existing knowledge structures so that students can integrate new concepts more effectively.\ Taking Module 323 into context, the class briefly reflects on previously learned concepts such as functions, programming paradigms and the idea of input and output states in programs. This helps build familiarity and allows students to connect their existing knowledge with the new concepts introduced in the lesson for V (Vorwissen Aktivieren). 2. **What additional or alternative tasks could activate prior knowledge?**\ Besides reviewing the Module 323 handouts, prior knowledge can be activated through other tasks. A possible approach is a conceptual comparison exercise, where students recall programming paradigms they have learned, such as procedural, structured and object-oriented programming and discuss how these relate / differ to functional programming concepts. 3. **Which questions or tasks could be used to activate prior knowledge for this lesson?**\ The instructor can ask students if they have previously used React or Next.js, what UI component libraries they have worked with and whether they have applied theming or consistent styling in a project. Tasks can include recalling a component they built, describing its props and state, or explaining how they structured navigation between screens. These questions and reflections help students connect their past experiences to the upcoming focus on reusable components, routing and theming in React Native. ## Step 9: Inform Phase Analysis 1. **Which task starts the first “Inform” phase?**\ The first informing phase begins with the introductory question:\ "Where have you already worked with functions (or methods)? Which advantages of functions (or methods) can you name?"\ This question activates the learners prior knowledge from previous modules (e.g, procedural or object-oriented programming) and connects it to the new topic of functional programming. 2. **Is it an active or passive instructional structure?**\ That above represents an active learning structure because learners are required to: * reflect on their previous experience with functions * formulate their own answers * potentially discuss their ideas with classmates / the class. Instead of simply listening to an explanation, students actively engage with the topic, which supports for deeper understanding. 3. **How is the principle "active, self-directed learning phases should dominate instruction" implemented?**\ Diethelm Wahl argues that activating and self-directed learning phases should dominate teaching, because they support the complex process of knowledge acquisition more effectively. E.g. The lesson begins with an activating question that encourages students to recall and apply prior knowledge rather than passively receiving information. ## Step 10: Process / Practice Phase Analysis 1. **Which types of tasks (individual, pair, group work; programming or theory tasks) are used in the practice phase?**\ In the processing phase, several different types of tasks are used to help students apply and deepen their knowledge of functional programming. The exercises mainly consist of a mix of theory and coding. Besides this combination, there is ample time for students to work on the tasks independently at their own pace, which encourages active engagement and personal reflection on the material. Introductory and review questions are occasionally discussed in the whole class, allowing learners to compare answers, clarify misunderstandings and reflect on different approaches. 2. **Which tasks specifically promote the “knowing how” skill?**\ The development of procedural skills, or “Können,” is particularly promoted through the practical programming exercises. In these tasks, students must analyze a programming problem, break it down into smaller functions through functional decomposition, implement functions with defined inputs and outputs and then combine these functions to solve a larger problem. ## Step 11: Evaluate Phase Analysis 1. **Which types of tasks are used in the evaluation phase (drawing summaries, reflection tasks, quizzes, mindmaps, presentations)?**\ In the evaluation phase, knowledge is consolidated for later use. Tasks included reflective exercises, quizzes, summarizing content through mind maps or glossaries and class presentations. In the functional programming module, students mainly worked on recap questions, reflective exercises and summary tasks, which helped them consolidate their understanding and procedural skills. ## Step 12: Create Lesson Flow (AVIVA Model) 1. **Applying the AVIVA Model to the Second Teaching Unit: Mapping "First Functional Program" to AVIVA Phases** | Phase | Goal | Method | Material | | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | | A
(Align) | Introduce functional programming
concepts, recap prior knowledge,
and set up problem context. | Presentation, guided
discussion, Q and A | PDF exercises 1-1.2,
Slides | | V
(Previous
knowledge) | Learn functional decomposition,
composition and pure functions.
Understand Pythagoras example
and its translation into TypeScript. | Reading, code
walkthroughs, guided
explanations | Exercises 2.1.1-2.1.3,
PDF, VSCode / TypeScript | | I
(Inform) | Apply knowledge by implementing
functions for Pythagoras sides,
angles and refactoring code into
reusable modules. | Individual coding
tasks, stepwise
modeling, step by
step implementation | Exercises 2.1-2.4,
TypeScript environment,
math.ts / main.ts | | V
(Process) | Deepen procedural skills by
debugging, testing and verifying
code. | Self-paced coding,
paired work,
guided feedback | Exercises 2.2-2.4,
TypeScript environment | | A
(Evaluate) | Consolidate knowledge by reflecting
on advantages of functional
programming and documenting
understanding. | Reflection exercises,
glossary entries,
more portfolio work | Exercise 2.5, Glossary /
Portfolio | 2. **Applying the AVIVA Model to our own Teaching Unit (AVIVVIVVIVA)** | Phase | Goal | Method | Material | | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------- | ------------------------------------------- | | A
(Align) | Students run the V-App template and
see a real mobile app on their device
(quick success experience). | Guided demo +
hands-on setup | GitHub repo, Expo Go,
terminal | | V
(Previous
knowledge) | Recall navigation concepts (Vue
Routing,React Router,
Next.js, stacks/tabs) and connect to file-
based routing. | Guided questioning,
comparison tasks | app structure, prior React
knowledge | | I
(Inform) | Implement navigation by creating a
Details screen and adding a Profile
tab. | Individual coding,
step-by-step
modeling | app/details.tsx, home.tsx,
profile.tsx | | V
(Process) | Test navigation behavior (push,
back, tab switching) and reflect on
routing structure. | Self-testing, peer
feedback | Expo Go | | V
(Previous
knowledge) | Recall UI components, Vue vs React
Native, prior use of component
libraries (e.g MUI). | Discussion, analogy
built | RNR components
overview | | I
(Inform) | Build Profile screen using reusable
components (card, input, select,
button). | Hands-on coding | @/components/ui | | V
(Process) | Test interaction, state handling and
UI consistency, reflect on
reusability benefits. | Testing, guided
feedback | Expo Go | | V
(Previous knowledge) | Recall light/dark mode (some
people), Tailwind, design systems,
css variables and consistent styling. | Guided discussion,
examples | global.css, theme
concepts | | I
(Inform) | Modify theme (global.css +
theme.ts) and use ThemeToggle. | Hands-on coding | lib/theme.ts, global.css | | V
(Process) | Test theme switching and
consistency across components and
navigation. | Self-testing, peer
review | Expo Go | | A
(Evaluate) | Kahoot quiz to reinforce routing,
components and theming concepts | Interactive quiz | Kahoot (6 questions) | ## Step 13: Review Teaching Methods 1. **Which teaching methods do you already know?**\ We are already familiar with direct instruction, guided exercises, group discussions, pair programming, hands-on coding tasks, quizzes and reflection activities. The methods have been effective in previous lessons for introducing concepts, reinforcing skills, and checking understanding. 2. **Which additional methods from the method pool could be used for this lesson?**\ Additional methods could include live coding demonstrations, interactive debugging sessions, collaborative component-building exercises and visual mindmaps to connect concepts. Peer presentations or code walkthroughs could also be used, depending on timing, to enhance understanding and engagement. ## Step 14: Plan Lesson Introduction 1. **What should be installed on the computers for the lesson?**\ Students should have Node.js installed, a code editor like VS Code or WebStorm and Expo Go installed on their mobile device. Additionally, the project repository with starter files should be cloned or downloaded beforehand to allow immediate hands-on work. 2. **Is there existing knowledge that can be built upon?**\ Yes, students already know JavaScript/TypeScript basics, including functions, props and state. They also have prior experience with component-based programming or web projects in general, which can be connected to React Natives component hierarchy and reusable components. 3. **Do any topics need repetition from previous lessons?**\ It may help to briefly review React concepts such as components, props, state and simple navigation principles for comparison. This ensures everyone is ready to move into React Native-specific concepts, routing and theming. 4. **How long should the introduction phase last?**\ The introduction phase should be 10-15 minutes, enough to set learning objectives, check prior knowledge and ensure all tools are ready for coding without consuming too much lesson time. 5. **Which teaching methods can be used for the lesson introduction?**\ Direct instruction: Present lesson objectives, app overview, and Expo setup.\ Q\&A / Discussion: Ask students about previous experience with React, routing and component libraries.\ Quick check / Quiz: Short questions about props, state and component hierarchy to activate prior knowledge.\ Demo: Show a minimal prebuilt screen in Expo Go to spark interest and connect to the lesson goals. ## Step 15: Plan Information Delivery & Practice Phase 1. **How can you use the provided teaching materials efficiently for the Inform and Process phases?**\ Using the Mintlify React Native tutorial to quickly show core concepts like routing, component libraries and theming. Focusing on one or two key examples per topic, then let students immediately practice implementing them. Including short diagrams or live coding demos to make abstract concepts clear without spending too much time reading. Reading is boring, actively implementing is more fun and activates more motivation. 2. **How can the listed teaching methods be applied most effectively?**\ By using short demos to introduce concepts, followed by guided exercises where students replicate and slightly modify the examples. Pair work or quick peer checks can reinforce learning, while keeping the session interactive without slowing down the pace. 3. **How long should the Inform and Process phases last?**\ Keeping the demo/explanation to 5-7 minutes per topic and allow 10-12 minutes for hands-on practice, fitting everything into the total 35-minute lesson. Prioritizing key concepts and exercises that directly support the learning objectives. ## Step 16: Plan Lesson Conclusion 1. **How will you integrate the Evaluate phase into your lesson plan?**\ By leaving some time at the end for a short interactive quiz (e.g, Kahoot! or a 3-5 question quick quiz) at the end to check understanding of routing, component libraries and theming. 2. **How can you coordinate with other teams to avoid redundancy?**\ We compared our lesson plans and made sure each team focuses on its dedicated topics, avoiding overlap and ensuring that content is covered efficiently. 3. **How will you finalize the lesson so that "the lesson will be implemented as planned"?** We will prepare all materials, and examples in advance, confirm the timing for each AVIVA phase (Arrive -> Activate -> Inform -> Verify/Process -> Evaluate) and have the quiz and demo tasks ready. At the end, we'll very briefly review student understanding and collect feedback to ensure the lesson goals are met.