6th International Symposium for Engineering Education, 2016, The University of Sheffield, July 2016, UK

GRAPHIC WEB–APP FOR TEACHING TERNARY DIAGRAMS

Tamás Bánsági Jr*1 and Thomas L. Rodgers2

1Department of Chemical and Biological Engineering, The University of Sheffield, Sheffield S1 3JD, UK; 2School of Chemical Engineering and Analytical Science, The University of

Manchester, Manchester M13 9PL, UK

Abstract: Recent years have seen a rapid development in e-learning technologies. Specific topics, however, may require additional teaching tools created particularly for their unique characteristics. It is important that these tools are developed with learning outcomes in mind, and if possible are in a format easily accessible. We have developed a graphic web application for the teaching of liquid–liquid equilibria using ternary phase diagrams. This application allows students to draw liquid–liquid 2-phase equilibrium curves and calculate phase separation for a given mixture; the correct result is then produced with hints for the students if they get stuck. Student usage figures and opinions have been collected for the application during trial use on a combined full-time taught and distance learning course in Chemical Engineering at The University of Manchester. The current students have found this application useful for developing their understanding of liquid–liquid equilibria.

Keywords; web-app, ternary diagrams, interactive tutorials, plotting graphs.

*Correspondence to: T. Bánsági Jr, Department of Chemical and Biological Engineering, The University of Sheffield, Sheffield S1 3JD, UK. E-mail: t.bansagi@sheffield.ac.uk

1. INTRODUCTION

E-learning technologies provide educators a large array of tools which are typically embedded in Course Management Systems (CMS)/Virtual Learning Environments (VLE). Along with modern multimedia and chat support services, these systems have user-friendly facilities for creating on-line assignments from a variety of pre-set question types. Amongst others, these types typically include “Fill in the Blank”, “Multiple Choice”, “Calculated Numeric” and “Hot Spot” formats, the last being useful when students need to identify and pinpoint a specific location in a diagram or image. Despite the large number of choices and in-built flexibilities, certain subjects require uniquely structured question types not available in CMSs.

Liquid–liquid equilibria calculations are an essential part of a chemical engineer’s education. For a ternary system, suitable for liquid-liquid extraction, these calculations involve plotting and using datain an equilateral triangle graph. Describing three-component systems this way, using ternary diagrams, often in the context of phase domains is a popular method in science and engineering. Ensuring that students understand and are readily able to use such a broadly applicable tool is, therefore, very important.

6th International Symposium for Engineering Education, 2016, The University of Sheffield, July 2016, UK

Students first learning about ternary diagrams often find the concept of mapping the possible states of a three-component system onto a triangular domain challenging. Thus, mastering the ternary plot requires a lot of practice from many of them. To give students the opportunity of practicing on a large number of randomly-generated exercises, we developed an interactive graphic web application. The app was designed to have a strong free-hand feel for enhanced visual and kinaesthetic engagement.

The opportunity for students to answer questions is important for student learning as this allows them to practice and apply knowledge they have learnt. The software was developed to be complementary to the teaching and make sure that students do not have the wrong idea. There are currently limited activities in this area, Wolfram Demonstrations ProjectTM provide some interactive materials for liquid-liquid equilibria and liquid-liquid extraction (e.g. Binous et al., 2015; Binous, 2006). These are however, more demonstration based, do not allow students to attempt questions by drawing themselves and require installing Wolfram CDF Player.

2. SOFTWARE

The latest version of the HyperText Markup Language (HTML5) provides enhanced functionality through comprehensive application programming interfaces (APIs) for graphic content alleviating the need for plug-ins like Adobe Flash, ActiveX or Java applets. Web applications today relying solely on HTML5, JavaScript (JS) and Cascading Style Sheets (CSS) on the client side (usually involving communication with the web server in the background) offer dynamic, visually rich and highly interactive experience. These slim single-page applications (SPA) are becoming ever more popular thanks to the rapid spread of low-powered devices such as smartphones and tablet computers. Our SPA was made available as an optional practice tool for students attending Advanced Engineering Separations via the Virtual Learning Environment (Blackboard) of The University of Manchester. The app does not rely on importing pre-formatted ternary diagrams and tables into the page, which would be a major limiting factor in terms of preparing new exercises. Instead it generates all visual elements on the fly using only a few hundred bytes of raw data downloaded from the web server.

The app (screenshot shown in Figure 1) comprises of tree panels: (I) a column on the left separated from the rest of the screen by a vertical line; (II) a rectangular area above the triangle; and (III) a standard, fully-labelled ternary triangle with buttons underneath. (I) is for displaying miscibility and mutual equilibrium data tables, also used for collecting numeric answers and outputting corresponding numeric solutions. Questions and hints are shown in (II), whereas (III) serves as graphic core for free-hand interaction. To familiarise students with the two frequently-used ways of labelling, component names are placed either at the vertices or parallel to the sides (not shown).

6th International Symposium for Engineering Education, 2016, The University of Sheffield, July 2016, UK

2.1 Drawing Ternary Phase DiagramsThe first task for students is to add points (black circles) using the compositions provided in the upper table to outline the curve between the region of homogeneous mixtures and the domain characterised by phase separation. They can switch to “Erase” mode to remove any unwanted points from the diagram before going back to “Draw” mode to continue. When they are satisfied with the location of the points they click “Next” to reveal the solution. The app only allows them to proceed if they added as many points as the number of rows in the Equilibrium Miscibility Data Table. Pressing “Next” again takes them to the tie line drawing module which retains the correct 2-phase boundary from Question 1 as guidance. Using the “Draw” or “Erase” modes, students in Question 2 now required to populate the diagram with tie lines by placing black squares to where the end points are located. If the number of lines is right, the app unlocks the “Next” button and students can continue onto the solution (Figure 2b).

Figure 1. Layout of ternary web–app with Hint for Question 1 revealed.

Figure 2. (a) 2–phase bonudary and (b) tie lines: student input (black) and app-generated solutions (green).

(a) (b)

6th International Symposium for Engineering Education, 2016, The University of Sheffield, July 2016, UK

2.2 Using Ternary Liquid–Liquid Extraction (LLE) SystemsClicking “Next” again launches Question 3 which focuses on the total composition of a mixture when a Feed (F) is put into contact with Solvent (S) where the composition of the former and the S/F mass ratio are randomly assigned. The “Draw” and “Erase” buttons have been replaced with “F”, “S” and “M” buttons. Students can place these entities on the diagram individually by pressing the corresponding buttons first, followed by clicking at the desired location. The chosen positions are only temporarily locked at this stage, students are allowed to move F, S and M around freely until the composition of the mixture (M) is entered on Panel I and “Next” is pressed. The hint for this exercise is a line drawn between S and F without identifying the end points (Figure 3a). Once F, S and M are placed and the composition of M is entered, students can click “Next” to reveal the solution (seen in Figure 3b).

In the final stage, loaded by pressing “Next” after the solution to Question 3 is examined, students are asked to position and input the compositions of the two phases the total mixture, M, separates into. Like before, the location of phases A and B produced in this step can be added to the diagram, and subsequently moved, by clicking buttons “A” or “B” (Figure 3c). When the positions of the two phases are finalized and their compositions are entered, students press “Next” to uncover the solution (shown in Figure 3d) and finally “Done” to finish and return to Question 1 with a new set of data and parameters. Students are given the option to abort the exercise at any stage by clicking “Hit Me” which takes them back to the first screen while refreshing.

Figure 3. Phase separation in a single step operation.

(a) (b)

(c) (d)

6th International Symposium for Engineering Education, 2016, The University of Sheffield, July 2016, UK

Students, depending on their confidence, can adopt three different strategies or a combination of them to complete the steps of this exercise. Some may choose to carefully consider the position of each point and make calculations before entering the compositions without using hints, while others may feel more comfortable using the extra bits of information offered. It is also possible to simply make up answers along the way and watch as the solution unfolds step by step. Thanks to the large number of combinations, students can even decide to start out by just coasting through the app and then slowly become more and more engaged without encountering the same set of questions twice.

3. STUDENT USE

The web-app was tested using the students taking a combined 3rd year undergraduate and MSc module at The University of Manchester (Advanced Engineering Separations) and was available to the students as a link in the module’s page on Blackboard stored with the material for the week of 26th-30th October. Figure 4 shows the number of uses of the web-app over the period of the course. There are several key events in the course that trigger the use of the web-app. The first period of use is during the time that the topic of liquid-liquid extraction was taught to the students; 12 th-26th

October. The largest peak in this period is just before the first coursework was due which included the topic of liquid-liquid extract and contained questions relating to the web-app. The second period of use starts on the 23rd November, this was unexpected as a topic unrelated to liquid-liquid extraction was being taught (azeotropic distillation sequencing). However, this topic involved the use of ternary diagrams so the students were independently using the tool to remind themselves of the use of ternary diagrams.

Figure 4. Traffic throughout the semester – (–) due date for the coursework on LLE, (–) lecture which also involved ternary diagrams though not on LLE, (–) date of exam.

6th International Symposium for Engineering Education, 2016, The University of Sheffield, July 2016, UK

The third period of use is during revision for the final exam (22nd January), unsurprisingly this is where the majority of the use of the web-app is. When asked students comments that they liked the ability to practice the questions multiple times with different options, one student’s comment was, “It is indeed a very good way for student who would like to do more practices and consolidate their knowledge. I would strongly recommend these questions to other students!”.

4. EVALUATION

To allow students to practice for a first coursework and to a compulsory formative quiz is given to the students, five questions in this quiz are based on liquid-liquid extraction topics related to the web-app. Table 1 shows the results from this quiz that was given to the students in this year’s course (2015-2016) and last year’s course (2014-2015) as comparison as the web-app was not available. It should be noted that the questions were identical both years.

Year 2014-2015 2015-2016Number of Students 118 221Average Mark / % 77.1 91.0

Table 1. Average student mark over 5 questions on a compulsory formative quiz on plotting and using ternary diagrams for liquid-liquid extraction.

It is clear from the results in Table 1 that there is a significant improvement in performance between the two year groups. As the major change to this part of the course was the addition of the web-app, then it must be concluded that it did help student understanding of ternary diagrams for liquid-liquid equlibria.

At the end of the course an evaluation questionnaire was answered by the students, this had a 50% return rate and the result for the question “The eLearning resources provided in this unit enhanced my learning experience” gained an average mark of 4.5/5.0. A more specific questionnaire was also given to the students with the results given in Table 2.

Question ResultsMy background knowledge was suitable for this activity 4.4This activity has improved my understanding of LLE 4.5I feel more confident with LLE systems 4.4I would like see similar activities in other courses 4.5

Table 2. Scores received in a survey of the web app, marks out of 5.

It is clear from Table 2 that students did like the web-app and felt like it improved their understanding of liquid-liquid equlibria. The top comment from the students was that they liked the fact they could get hints for the questions rather than just having the answered revealed.

6th International Symposium for Engineering Education, 2016, The University of Sheffield, July 2016, UK

5. CONCLUSIONS

A HTML5/JS/CSS-based, interactive, graphic web-app was developed for the teaching and learning of LLE using ternary diagrams was trialled by chemical engineering students at The University of Manchester. The students liked using the web-app and felt that it aided their understanding. The authors feel encouraged by the positive student feedback and the improved exam results showing that understanding was gained by the students. As one student wrote, “These are well-designed online questions that helps students better understand how to do this type of questions. The step-by-step method, together with hints, is easy for students to follow and think.”. Development is currently underway to include multi-stage LLE, and to design similar tools for other areas of (chemical) engineering and science.

6. REFERENCES

Binous, H., Hasseine, A., and Bellagi, A., 2015, Liquid-Liquid Equilibrium Diagrams for Ternary Mixtures. URL:http://demonstrations.wolfram.com/LiquidLiquidEquilibriumDiagramsForTernaryMixtures/

Binous, H., 2006, Liquid-liquid equilibrium and extraction using Mathematica®Computers in Education Journal, 16 (1), 78–81.