{"id":7643,"date":"2025-10-02T10:52:55","date_gmt":"2025-10-02T10:52:55","guid":{"rendered":"https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/?p=7643"},"modified":"2025-10-06T08:19:27","modified_gmt":"2025-10-06T08:19:27","slug":"padlet-stem-notation-how-can-you-make-polls-with-a-program-source-code-on-padlet","status":"publish","type":"post","link":"https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/2025\/10\/02\/padlet-stem-notation-how-can-you-make-polls-with-a-program-source-code-on-padlet\/","title":{"rendered":"Padlet &amp; STEM notation: How can you make polls with a program source code on Padlet?"},"content":{"rendered":"<h2 style=\"padding-left: 40px\"><a href=\"https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/case-studies\/\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft wp-image-6130 size-full\" src=\"\/wp-content\/uploads\/sites\/42\/2019\/08\/Back-Arrow-e1565604225291.png\" alt=\"\" width=\"45\" height=\"45\" \/><\/a><\/h2>\n<p>&nbsp;<\/p>\n<h6>By: Dr Alan Guedes, School of Mathematical, Physical and Computational Sciences, <a href=\"mailto:a.guedes@reading.ac.uk\">a.guedes@reading.ac.uk<\/a><\/h6>\n<p>&nbsp;<\/p>\n<p>As a computer science lecturer, I am required to show programming source codes in my lectures, particularly for in-class activities like quizzes (e.g. &#8220;Determine the output of the following code&#8221; or &#8220;Identify the logical error within this code&#8221;). These quizzes allow me a do an in-class knowledge check for the students.<\/p>\n<p>The recent support for <a href=\"https:\/\/sites.reading.ac.uk\/TEL-Support-Staff\/key-topic-padlet-university-licence\/\">Padlet at the University of Reading<\/a> prompted me an investigation into an effective approach for displaying a source code in Padlet. However, it became apparent that Padlet is not explicitly designed for this purpose. My initial attempt involved directly placing the source code into a post&#8217;s title (image below), but this revealed the limitation of Padlet titles do not support multi-line text. In the following sections, I will share some options I discovered.<\/p>\n<div class=\"mceTemp\"><\/div>\n<figure id=\"attachment_7665\" aria-describedby=\"caption-attachment-7665\" style=\"width: 625px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-7665\" src=\"https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-content\/uploads\/sites\/26\/2025\/10\/alan-1.png\" alt=\"Screenshot of a poll creation interface titled \u201cPoll.\u201d The Java code snippet is formatted in a single line with line breaks, showing overloaded add methods and a call to add(2.5, 2). Below the code are multiple-choice options represented by radio buttons arranged in two rows.\" width=\"625\" height=\"409\" srcset=\"https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-content\/uploads\/sites\/26\/2025\/10\/alan-1.png 625w, https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-content\/uploads\/sites\/26\/2025\/10\/alan-1-300x196.png 300w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><figcaption id=\"caption-attachment-7665\" class=\"wp-caption-text\">Figure 1.1. Pasting source code into the title of a Padlet post<\/figcaption><\/figure>\n<h1><span style=\"font-size: 18.0pt;line-height: 115%\">Option 1: Uploading code as a text file<\/span><\/h1>\n<p>This approach involves using two Padlet posts (image below), where one post is dedicated to an uploaded source code file and other for the poll. The advantage of this method is that it generates syntax colouring for the code, which significantly enhances student readability. However, it presents two drawbacks. First, it requires an additional post solely for the poll, since a single post cannot accommodate both the file and the poll. So, the second post should \u201crefer\u201d to the one before. Second, it suffers from resolution degradation when viewed on mobile devices, what may require students do a second click to &#8220;open the file&#8221; and improve readability.<\/p>\n<div class=\"mceTemp\"><\/div>\n<figure id=\"attachment_7666\" aria-describedby=\"caption-attachment-7666\" style=\"width: 380px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\"size-large wp-image-7666\" src=\"https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-content\/uploads\/sites\/26\/2025\/10\/alan-2-380x1024.png\" alt=\"Screenshot of a coding question posted by a teacher named Alan Guedes. The question asks, \u201cWhat is the output of the code below?\u201d followed by a Java code snippet with overloaded add methods for integers and doubles, and a call to add(2.5, 2). Multiple-choice options are 2.5, 2, 4, and 4.5. No votes or comments are present.\" width=\"380\" height=\"1024\" srcset=\"https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-content\/uploads\/sites\/26\/2025\/10\/alan-2-380x1024.png 380w, https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-content\/uploads\/sites\/26\/2025\/10\/alan-2-111x300.png 111w, https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-content\/uploads\/sites\/26\/2025\/10\/alan-2.png 390w\" sizes=\"(max-width: 380px) 100vw, 380px\" \/><figcaption id=\"caption-attachment-7666\" class=\"wp-caption-text\">Figure 1.2. Using two Padlet posts<\/figcaption><\/figure>\n<h1><span style=\"font-size: 18.0pt;line-height: 115%\">Option 2: Code block in the body<\/span><\/h1>\n<p>This solution involves use only post, which has the code inside its body (Figure 1.3). The post title should remain concise and directly address the quiz query. The source code is then added as a &#8220;code block&#8221; within the body of the post. This method ensures student readability by preserving indentation and utilizing a monospace font, characteristics common in programming editors.<\/p>\n<p>While this represents a good solution, it has one drawback: it has been observed that Padlet&#8217;s default layouts may automatically wrap longer lines of code (Figure 1.4). This can complicate student readability.<\/p>\n<figure id=\"attachment_7667\" aria-describedby=\"caption-attachment-7667\" style=\"width: 737px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-7667\" src=\"https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-content\/uploads\/sites\/26\/2025\/10\/alan-3.png\" alt=\"Coding question interface showing a multiple-choice question: \u201cWhat is the output of the code below?\u201d Options are 2.5, 2, 4, and 4.5. The code block includes two overloaded add functions\u2014one for integers and one for doubles\u2014and a call to System.out.println(add(2.5, 2));.\" width=\"737\" height=\"682\" srcset=\"https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-content\/uploads\/sites\/26\/2025\/10\/alan-3.png 737w, https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-content\/uploads\/sites\/26\/2025\/10\/alan-3-300x278.png 300w\" sizes=\"(max-width: 737px) 100vw, 737px\" \/><figcaption id=\"caption-attachment-7667\" class=\"wp-caption-text\">Figure 1.3. Inputting the code block in the body of a post<\/figcaption><\/figure>\n<figure id=\"attachment_7668\" aria-describedby=\"caption-attachment-7668\" style=\"width: 768px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\"size-large wp-image-7668\" src=\"https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-content\/uploads\/sites\/26\/2025\/10\/alan-4-768x1024.png\" alt=\"Screenshot of a coding question displayed in a two-section layout labeled \u201cSection 1\u201d and \u201cSection 2.\u201d Section 1 contains the same Java code snippet and multiple-choice question as Image 1. Section 2 is empty.\" width=\"768\" height=\"1024\" srcset=\"https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-content\/uploads\/sites\/26\/2025\/10\/alan-4-768x1025.png 768w, https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-content\/uploads\/sites\/26\/2025\/10\/alan-4-225x300.png 225w, https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-content\/uploads\/sites\/26\/2025\/10\/alan-4.png 841w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><figcaption id=\"caption-attachment-7668\" class=\"wp-caption-text\">Figure 1.4. Code block displayed without text wrapping<\/figcaption><\/figure>\n<p>To mitigate this issue, the &#8220;stream&#8221; layout is identified as the optimal configuration. This layout (Figures 1.5 &amp; 1.6) will render content vertically without unnecessary text wrapping, thereby maintaining the readability of the source code.<\/p>\n<figure id=\"attachment_7669\" aria-describedby=\"caption-attachment-7669\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\"size-large wp-image-7669\" src=\"https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-content\/uploads\/sites\/26\/2025\/10\/alan-5-1024x522.png\" alt=\"Screenshot of an application\u2019s appearance settings. Options include wallpaper set to dark, color scheme set to light, font set to Alba, and post size set to standard. Layout format is set to \u201cstream,\u201d with an arrow indicating selection. Group posts by section is toggled on, sorting is set to drag and drop, and new posts appear first. Comments and reactions are enabled.\" width=\"800\" height=\"408\" srcset=\"https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-content\/uploads\/sites\/26\/2025\/10\/alan-5-1024x522.png 1024w, https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-content\/uploads\/sites\/26\/2025\/10\/alan-5-300x153.png 300w, https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-content\/uploads\/sites\/26\/2025\/10\/alan-5-768x391.png 768w, https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-content\/uploads\/sites\/26\/2025\/10\/alan-5.png 1284w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-7669\" class=\"wp-caption-text\">Figure 1.5. Selecting the text wrapping option<\/figcaption><\/figure>\n<figure id=\"attachment_7671\" aria-describedby=\"caption-attachment-7671\" style=\"width: 724px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\"size-large wp-image-7671\" src=\"https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-content\/uploads\/sites\/26\/2025\/10\/alan-7-724x1024.png\" alt=\"Screenshot of a coding question posted by a teacher named Alan Guedes. The question asks, \u201cWhat is the output of the code below?\u201d followed by a Java code snippet with overloaded add methods for integers and doubles, and a call to add(2.5, 2). Multiple-choice options are 2.5, 2, 4, and 4.5. No votes or comments are present.\" width=\"724\" height=\"1024\" srcset=\"https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-content\/uploads\/sites\/26\/2025\/10\/alan-7-724x1024.png 724w, https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-content\/uploads\/sites\/26\/2025\/10\/alan-7-212x300.png 212w, https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-content\/uploads\/sites\/26\/2025\/10\/alan-7.png 730w\" sizes=\"(max-width: 724px) 100vw, 724px\" \/><figcaption id=\"caption-attachment-7671\" class=\"wp-caption-text\">Figure 1.6. The \u201cstream\u201d post with text wrapping enabled<\/figcaption><\/figure>\n<h1>Final remarks<\/h1>\n<p>In conclusion, while Padlet may not be inherently designed for showing source code, the file upload and code block options are viable for displaying source code. These methods can be beneficial for lecturers conducting in-class activities involving source code.<\/p>\n<p>If you have a query about the institutional Padlet, please\u00a0<a href=\"https:\/\/uor.topdesk.net\/tas\/public\/ssp\/d3fed130-0f6c-11e5-a6c0-1697f925ec7b\">raise a ticket with the TEL Team<\/a>.<\/p>\n<hr \/>\n<p><strong>If you&#8217;re a University of Reading staff member, you can watch the recording of Alan&#8217;s presentation about notation in Padlet by selecting the following link: <a href=\"https:\/\/blogs.reading.ac.uk\/telblog\/2025\/10\/06\/power-up-your-teaching-with-padlet-showcase-recording-now-available\/\">TEL: Showcase: Power Up your Teaching with Padlet<\/a>.<\/strong><\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dr Alan Guedes in the Department of Computer Science explains how he, through trial and error, embeds coding notation and formative quizzes into Padlet. <\/p>\n","protected":false},"author":235,"featured_media":7648,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0},"categories":[14],"tags":[657,702],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-content\/uploads\/sites\/26\/2025\/10\/code-in-title-Padlet.png","_links":{"self":[{"href":"https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-json\/wp\/v2\/posts\/7643"}],"collection":[{"href":"https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-json\/wp\/v2\/users\/235"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-json\/wp\/v2\/comments?post=7643"}],"version-history":[{"count":5,"href":"https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-json\/wp\/v2\/posts\/7643\/revisions"}],"predecessor-version":[{"id":7680,"href":"https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-json\/wp\/v2\/posts\/7643\/revisions\/7680"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-json\/wp\/v2\/media\/7648"}],"wp:attachment":[{"href":"https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-json\/wp\/v2\/media?parent=7643"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-json\/wp\/v2\/categories?post=7643"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.reading.ac.uk\/t-and-l-exchange\/wp-json\/wp\/v2\/tags?post=7643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}