Training is a significant part of all occupations. We all must undergo some kind of training to learn how to do the job – and a large portion of us will find that we eventually have to train others. When there's a group of employees that need to learn a specific item, it's common to find that training in the form of sessions or presentations. If you're like me, and you've been faced with having to run training sessions in the past, the question that comes to mind is how do I structure this session effectively? Also, how can I make sure that I'm engaging my learners and avoid simply talking at them?

Today I'm here to share a training framework that I've found successful in ensuring that learners are engaged and that they consolidate the information I've just taught them. This framework is Whole-Part-Whole.


What is Whole-Part-Whole (WPW)?

WPW is a model whereby students can learn new skills and knowledge. It consists of three stages which we will demonstrate through an example skill that we’ll be teaching our hypothetical class: How to embed an image using HTML. For this example, let’s also presume that our class already has a basic knowledge of what HTML is and how it works.


1. The Whole

This is where students are first introduced to the concept or the skill. Here, we prepare students by contextualizing this new skill against what they already know. This stage is also where we outline what they will learn and what they will get out of this training. Using our example, at this stage, we would explain to our learners that during this session they will learn about how to embed an image using HTML. In addition, the reason they are learning about it is to further their HTML knowledge and to add to their toolkit of skills. Adding images can help elevate text-heavy content and how it’s consumed by the audience. During this stage, we will also let learners know of the session’s objectives i.e., what content we will cover. In this case, the objectives are for students to:

1. Learn the basic HTML code used for embedding images

2. Understand the breakdown of the important components of the code

3. Participate in a live demo of how to use the code with examples.


2. The Parts

For this section, we will now go through the different “parts” of the training session (the objectives) as well as the “parts” of the HTML code. This will enable learners to obtain a good understanding of each individual part that makes up the “whole” - the knowledge of how to embed an image via HTML.


Objective 1: The HTML Code for Embedding Images

Here students are introduced to the code which will embed an image:

<img src="xx" alt="xx">

However, the code by itself doesn’t really have any meaning. What does each attribute mean? What do we have to input in order for it the work? This brings us to our next objective – breaking down the components.

Note: The code being introduced is a basic one to match the skill level of the learners. We will touch on slight modifications such as specifying width and height but will leave it to the simple code for the purpose of this training.


Objective 2: The Breakdown

At this point, we would go through what each part of the image tag entails. For example, we can start at the code’s most basic form:


However, this form needs to be built upon. Adding attributes will allow us to include a source for the image as well as alternate text.

<img src="xx" alt="xx">

Src enables us to specify where we draw the image from. Here, we can further explain the various image sources such as folders or other websites etc.

Alt allows us to state what text will appear if the browser is not able to display the image. Following this, we can also expand on attributes that will help us control how large the image is. For example, the style attribute where we can dictate the width and height of the image in pixels.

style="width: xxpx; height: xxpx;"

Combining all those components together produces the following code:

<img src="xx" alt="xx" style="width: xxpx; height: xxpx;"></img>

As we can see, going through the components allows students to understand how the tag works in its entirety. To fully cement that knowledge, we can then use a live example.


Objective 3: How It All Works Together

A live example can be achieved in different ways. If there are sufficient resources, students should ideally be able to use the code themselves and see how the example works in real-time. During this activity, students can play around with different variations of the code (for example, inputting different sources, alternate text or size specifications).

This activity also allows students to link all the separate concepts together. Through “learning by doing”, students are more immersed in the content and can consequentially master the skill more effectively rather than simply being shown.

An important thing to note is that interactivity doesn’t just have to be included in this part of the training session. Activities can be included at any time as long as there is a purpose. For instance, there can be check-ins to allow students to ask questions each time a concept is introduced, or even items like a poll at the beginning of the session to gauge the overall knowledge level of the learner group.


3. The Whole

You may have already noted that each objective aligned with the WPW framework. Now that we have consolidated the student’s learning of the individual components with activity in Objective 3, can we conclude the training session at this stage?

Technically there’s nothing saying you can’t. However, a better ending to the training session would be to bring the students back to the objectives introduced at the beginning and provide them with a corresponding key takeaway. So going back to our HTML example, we can then summarise the following for students:

1. A basic HTML code to embed an image is as follows:

<img src="xx" alt="xx" style="width: xxpx; height: xxpx;"></img>

2. The components which make it all work are the image source, the alternate text and the style attributes.  

3. Together, these components allow us to specify where the image comes from, what text appears if the browser can’t display the image and the image size.

Having key takeaways also allows us to further emphasise the important points of the training session. That is if there’s anything that students learn once they have left the training, it should be these points.


Key Take Aways

And so, as I leave you here at the end of this blog post – what are my takeaways for you?

  • The WPW is an effective three-part framework that you can use to structure your training.
  • The first Whole allows you to introduce a new skill or concept
  • The Parts enable you to break down that skill or concept into individual components that are easy for your learners to learn and process.
  • The last Whole helps you link those individual components together and cement your learners’ understanding of the skill or concept.

How can we help you?

Innovation is crucial to achieving a competitive advantage. Interserv believes in fostering innovation by working with our clients to develop new products, revitalise existing products, and looking for new ways to solve problems.

Related articles