Merge remote-tracking branch 'origin/master' into dev/riknoll/diff-by…

…-line

docs/blog.md

@@ -1,5 +1,13 @@
 # Microsoft MakeCode Blog
 
+## [MakeCode Code Evaluation Tool Beta](/blog/tools/code-eval-tool)
+
+January 14th, 2025 by [Jaqster](https://github.com/jaqster)
+
+The year 2025 is already off to a great start with the Beta release of a new tool for Teachers! **MakeCode Code Evaluation** is an online tool for teachers to help them understand and evaluate student programs.
+
+**[Continue reading this blog post](/blog/tools/code-eval-tool)**
+
 ## [MakeCode for the micro:bit 2024 Update](/blog/microbit/2024-update)
 
 September 4, 2024 by [Jaqster](https://github.com/jaqster)

docs/blog/SUMMARY.md

@@ -1,6 +1,7 @@
 # Microsoft MakeCode Blog
 
 * [Blog](/blog)
+    * [MakeCode Code Evaluation Tool Beta](/blog/tools/code-eval-tool)
     * [MakeCode for the micro:bit 2024 Update](/blog/microbit/2024-update)
     * [MakeCode Arcade - now more ways to play!](/blog/arcade/arcade-on-microbit-xbox)
     * [MakeCode Minecraft 2023 Update](/blog/minecraft/2023-release)

docs/blog/tools/code-eval-tool.md

@@ -0,0 +1,20 @@
+# MakeCode Code Evaluation Tool Beta
+
+**Posted on January 14th, 2025 by [Jaqster](https://github.com/jaqster)**
+
+The year 2025 is already off to a great start with the Beta release of a new tool for Teachers! MakeCode [Code Evaluation](https://makecode.microbit.org/--eval) is an online tool for teachers to help them understand and evaluate student programs. We’ve heard from many teachers over the years that one of the most onerous parts of their job is assessing and evaluating student projects. With many teachers responsible for over 100 students, taking 10 minutes to understand, evaluate and give feedback for each program their students turn in means over 16 hours of review and grading!
+
+The Code Evaluation tool is our first effort to help teachers with this process. We have released it for use with MakeCode for micro:bit projects initially.
+
+Watch this short video to see how to get started:
+
+https://youtu.be/7pA2EbG4QPk
+
+More documentation can be found on the [Code Evaluation Tool]([https://makecode.microbit.org/code-eval-tool) info page.
+
+The Code Evaluation tool has been released as a Beta – meaning that it’s still a work-in-progress. We have ideas on how we could improve it, but we want to hear from you! Please try it out and click on the Give Feedback button to let us know your thoughts - https://makecode.microbit.org/--eval.
+
+Happy Making, Coding, and Evaluating!
+
+<br/>
+The MakeCode Team

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pxt-core",
-  "version": "11.3.10",
+  "version": "11.3.11",
   "description": "Microsoft MakeCode provides Blocks / JavaScript / Python tools and editors",
   "keywords": [
     "TypeScript",

react-common/components/controls/Button.tsx

@@ -28,6 +28,7 @@ export interface ButtonViewProps extends ContainerProps {
 
 export interface ButtonProps extends ButtonViewProps {
     onClick: () => void;
+    onRightClick?: () => void;
     onBlur?: () => void;
     onKeydown?: (e: React.KeyboardEvent) => void;
 }
@@ -49,6 +50,7 @@ export const Button = (props: ButtonProps) => {
         ariaPressed,
         role,
         onClick,
+        onRightClick,
         onKeydown,
         onBlur,
         buttonRef,
@@ -78,7 +80,8 @@ export const Button = (props: ButtonProps) => {
     );
 
     let clickHandler = (ev: React.MouseEvent) => {
-        if (onClick) onClick();
+        if (onRightClick && ev.button !== 0) onRightClick();
+        else if (onClick) onClick();
         if (href) window.open(href, target || "_blank", "noopener,noreferrer")
         ev.stopPropagation();
         ev.preventDefault();

react-common/components/controls/CarouselNav.tsx

@@ -0,0 +1,62 @@
+import { classList } from "../util";
+import { Button } from "./Button";
+
+export interface CarouselNavProps {
+    pages: number;
+    selected: number;
+    maxDisplayed?: number;
+    onPageSelected: (page: number) => void;
+}
+
+export const CarouselNav = (props: CarouselNavProps) => {
+    const { pages, selected, maxDisplayed, onPageSelected } = props;
+
+    const displayedPages: number[] = [];
+    let start = 0;
+    let end = pages;
+
+    if (maxDisplayed) {
+        start = Math.min(
+            Math.max(0, selected - (maxDisplayed >> 1)),
+            Math.max(0, start + pages - maxDisplayed)
+        );
+        end = Math.min(start + maxDisplayed, pages);
+    }
+
+    for (let i = start; i < end; i++) {
+        displayedPages.push(i);
+    }
+
+    return (
+        <div className="common-carousel-nav">
+            <Button
+                className="common-carousel-nav-arrow"
+                title={lf("Previous page")}
+                leftIcon="fas fa-chevron-circle-left"
+                onClick={() => onPageSelected(selected - 1)}
+                disabled={selected === 0}
+            />
+            <ul className="common-carousel-nav">
+                {displayedPages.map(page =>
+                    <li key={page} onClick={() => onPageSelected(page)}>
+                        <Button
+                            className={classList(selected === page && "selected")}
+                            title={lf("Jump to page {0}", page + 1)}
+                            onClick={() => onPageSelected(page)}
+                            label={
+                                <span className="common-carousel-nav-button-handle" />
+                            }
+                        />
+                    </li>
+                )}
+            </ul>
+            <Button
+                className="common-carousel-nav-arrow"
+                title={lf("Next page")}
+                leftIcon="fas fa-chevron-circle-right"
+                onClick={() => onPageSelected(selected + 1)}
+                disabled={selected === pages - 1}
+            />
+        </div>
+    )
+}