@khanacademy/perseus-editor 25.1.1 → 25.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/es/index.js +15 -15
- package/dist/es/index.js.map +1 -1
- package/dist/index.js +14 -14
- package/dist/index.js.map +1 -1
- package/dist/widgets/expression-editor.d.ts +2 -3
- package/dist/widgets/group-editor.d.ts +0 -2
- package/dist/widgets/interactive-graph-editor/interactive-graph-editor.d.ts +984 -62
- package/dist/widgets/matrix-editor.d.ts +1 -1
- package/dist/widgets/radio/editor.d.ts +1 -3
- package/dist/widgets/video-editor.d.ts +0 -1
- package/package.json +43 -43
package/dist/index.js
CHANGED
|
@@ -118,7 +118,7 @@ var arrowCounterClockwise__default = /*#__PURE__*/_interopDefaultCompat(arrowCou
|
|
|
118
118
|
var Link__default = /*#__PURE__*/_interopDefaultCompat(Link$1);
|
|
119
119
|
var plusIcon__default = /*#__PURE__*/_interopDefaultCompat(plusIcon);
|
|
120
120
|
|
|
121
|
-
const libName="@khanacademy/perseus-editor";const libVersion="25.
|
|
121
|
+
const libName="@khanacademy/perseus-editor";const libVersion="25.2.0";perseusUtils.addLibraryVersionToPerseusDebug(libName,libVersion);
|
|
122
122
|
|
|
123
123
|
var jsxRuntime = {exports: {}};
|
|
124
124
|
|
|
@@ -1480,7 +1480,7 @@ class DragTarget extends React__namespace.Component{handleDrop(e){e.stopPropagat
|
|
|
1480
1480
|
|
|
1481
1481
|
function ToggleableCaret(props){const iconStyle=props.isExpanded?styles$S.expanded:styles$S.collapsed;return jsxRuntimeExports.jsx(wonderBlocksIcon.PhosphorIcon,{icon:caretRight__default.default,style:iconStyle})}const styles$S=aphrodite.StyleSheet.create({collapsed:{transition:".15s"},expanded:{transform:"rotate(90deg)",transition:".15s"}});
|
|
1482
1482
|
|
|
1483
|
-
const _upgradeWidgetInfo=props=>{const filteredProps=
|
|
1483
|
+
const _upgradeWidgetInfo=props=>{const filteredProps=perseus.excludeDenylistKeys(props);return perseusCore.applyDefaultsToWidget(filteredProps)};class WidgetEditor extends React__namespace.Component{UNSAFE_componentWillReceiveProps(nextProps){this.setState({widgetInfo:_upgradeWidgetInfo(nextProps)});if(nextProps.widgetIsOpen!=null&&nextProps.widgetIsOpen!==this.props.widgetIsOpen){this.setState({showWidget:nextProps.widgetIsOpen});}}render(){const widgetInfo=this.state.widgetInfo;const Ed=perseus.Widgets.getEditor(widgetInfo.type);let supportedAlignments;if(this.props.apiOptions.showAlignmentOptions){supportedAlignments=perseusCore.CoreWidgetRegistry.getSupportedAlignments(widgetInfo.type);}else {supportedAlignments=["default"];}const supportsStaticMode=perseus.Widgets.supportsStaticMode(widgetInfo.type);return jsxRuntimeExports.jsxs("div",{className:"perseus-widget-editor",children:[jsxRuntimeExports.jsxs("div",{className:"perseus-widget-editor-title "+(this.state.showWidget?"open":"closed"),children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-editor-title-id",children:jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:{display:"flex",flexDirection:"row",alignItems:"center",gap:"0.25em"},onClick:this._toggleWidget,children:[jsxRuntimeExports.jsx(ToggleableCaret,{isExpanded:this.state.showWidget}),jsxRuntimeExports.jsx("span",{children:this.props.id})]})}),supportsStaticMode&&jsxRuntimeExports.jsx(LabeledSwitch$1,{label:"Static",checked:!!widgetInfo.static,onChange:this._setStatic}),supportedAlignments.length>1&&jsxRuntimeExports.jsx("select",{className:"alignment",value:widgetInfo.alignment,onChange:this._handleAlignmentChange,children:supportedAlignments.map(alignment=>jsxRuntimeExports.jsx("option",{children:alignment},alignment))}),jsxRuntimeExports.jsx(SectionControlButton,{icon:perseus.iconTrash,onClick:()=>{this.props.onRemove();},title:"Remove image widget"})]}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-editor-content "+(this.state.showWidget?"enter":"leave"),children:Ed&&jsxRuntimeExports.jsx(Ed,{ref:this.widget,onChange:this._handleWidgetChange,static:widgetInfo.static,apiOptions:this.props.apiOptions,...widgetInfo.options})})]})}constructor(props){super(props),this._toggleWidget=e=>{e.preventDefault();this.setState({showWidget:!this.state.showWidget});},this._handleWidgetChange=(newProps,cb,silent)=>{const newWidgetInfo={...this.state.widgetInfo,options:{...this.state.widgetInfo.options,...this.widget.current?.serialize()??{},...newProps}};this.props.onChange(newWidgetInfo,cb,silent);},this._setStatic=value=>{const newWidgetInfo={...this.state.widgetInfo,static:value};this.props.onChange(newWidgetInfo);},this._handleAlignmentChange=e=>{const newAlignment=e.currentTarget.value;const newWidgetInfo=Object.assign({},this.state.widgetInfo);newWidgetInfo.alignment=newAlignment;this.props.onChange(newWidgetInfo);},this.getSaveWarnings=()=>{const issuesFunc=this.widget.current?.getSaveWarnings;return issuesFunc?issuesFunc():[]},this.serialize=()=>{const widgetInfo=this.state.widgetInfo;return {type:widgetInfo.type,alignment:widgetInfo.alignment,static:widgetInfo.static,graded:widgetInfo.graded,options:this.widget.current.serialize(),version:widgetInfo.version}};this.state={showWidget:props.widgetIsOpen??true,widgetInfo:_upgradeWidgetInfo(props)};this.widget=React__namespace.createRef();}}function LabeledSwitch$1(props){const{label,...switchProps}=props;const id=React.useId();return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx("label",{htmlFor:id,children:label}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxSmall_6}),jsxRuntimeExports.jsx(Switch__default.default,{id:id,...switchProps})]})}
|
|
1484
1484
|
|
|
1485
1485
|
class WidgetSelect extends React__namespace.Component{shouldComponentUpdate(){return false}render(){const widgets=perseus.Widgets.getPublicWidgets();const orderedWidgetNames=___default.default.sortBy(___default.default.keys(widgets),name=>{return widgets[name].displayName});const addWidgetString="Add a widget…";return jsxRuntimeExports.jsxs("select",{value:"",onChange:this.handleChange,"data-testid":"editor__widget-select",children:[jsxRuntimeExports.jsx("option",{value:"",children:addWidgetString}),jsxRuntimeExports.jsx("option",{disabled:true,children:"--"}),orderedWidgetNames.map(name=>{return jsxRuntimeExports.jsx("option",{value:name,children:widgets[name].displayName},name)})]})}constructor(...args){super(...args),this.handleChange=e=>{const widgetType=e.currentTarget.value;if(widgetType===""){return}if(this.props.onChange){this.props.onChange(widgetType);}};}}
|
|
1486
1486
|
|
|
@@ -1522,7 +1522,7 @@ const IssueDetails=({issue})=>{const[expanded,setExpanded]=React__namespace.useS
|
|
|
1522
1522
|
|
|
1523
1523
|
const IssuesPanel=({issues=[]})=>{const[showPanel,setShowPanel]=React.useState(false);const hasWarnings=issues.length>0;const issuesCount=`${issues.length} issue${issues.length===1?"":"s"}`;const icon=hasWarnings?iconWarning__default.default:iconPass__default.default;const iconColor=hasWarnings?wonderBlocksTokens.color.gold:wonderBlocksTokens.color.green;const togglePanel=()=>{if(hasWarnings){setShowPanel(!showPanel);}};return jsxRuntimeExports.jsxs("div",{className:"perseus-widget-editor",children:[jsxRuntimeExports.jsxs("div",{className:"perseus-widget-editor-title",children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-editor-title-id",children:jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:{display:"flex",flexDirection:"row",alignItems:"center",gap:"0.25em"},onClick:togglePanel,children:[jsxRuntimeExports.jsx(ToggleableCaret,{isExpanded:showPanel}),jsxRuntimeExports.jsx("span",{children:"Issues"})]})}),jsxRuntimeExports.jsx(wonderBlocksIcon.PhosphorIcon,{icon:icon,size:"medium",color:iconColor,testId:`issues-icon-${icon}`,style:{marginRight:"0.25em"}}),issuesCount]}),showPanel&&jsxRuntimeExports.jsx("div",{className:"perseus-widget-editor-panel",children:jsxRuntimeExports.jsx("div",{className:"perseus-widget-editor-content",children:issues.map(issue=>jsxRuntimeExports.jsx(IssueDetails,{issue:issue},issue.id))})})]})};
|
|
1524
1524
|
|
|
1525
|
-
const{InfoTip: InfoTip$o}=perseus.components;class ItemExtrasEditor extends React__namespace.Component{shouldShowFinancialCalculatorOptions(){return this.props.financialCalculatorMonthlyPayment||this.props.financialCalculatorTotalAmount||this.props.financialCalculatorTimeToPayOff}render(){return jsxRuntimeExports.jsx("div",{className:"perseus-answer-editor",children:jsxRuntimeExports.jsxs("div",{className:"perseus-answer-options",children:[jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:"Show calculator",infoTip:"Use the calculator when completing difficult calculations is NOT the intent of the question. DON’T use the calculator when testing the student’s ability to complete different types of computations.",checked:this.props.calculator,onChange:newCheckedState=>{this.props.onChange({calculator:newCheckedState});}}),jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:"Show financial calculator",infoTip:"This provides the student with the ability to view a financial calculator, e.g., for answering financial questions. Once checked, requires at least one of the three options below to be checked.",checked:this.shouldShowFinancialCalculatorOptions(),onChange:newCheckedState=>{this.props.onChange({financialCalculatorMonthlyPayment:newCheckedState,financialCalculatorTotalAmount:newCheckedState,financialCalculatorTimeToPayOff:newCheckedState});}}),this.shouldShowFinancialCalculatorOptions()&&jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:"Include monthly payment",infoTip:"This provides the student with the ability to view a monthly payment calculator; e.g., given a loan amount, interest rate, and term, what is the monthly payment?",checked:this.props.financialCalculatorMonthlyPayment,onChange:newCheckedState=>{this.props.onChange({financialCalculatorMonthlyPayment:newCheckedState});},indent:true}),jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:"Include total amount",infoTip:"This provides the student with the ability to view a total amount calculator; e.g., given a monthly payment, interest rate, and term, what is the total amount to be paid?",checked:this.props.financialCalculatorTotalAmount,onChange:newCheckedState=>{this.props.onChange({financialCalculatorTotalAmount:newCheckedState});},indent:true}),jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:"Include time-to-pay-off",infoTip:"This provides the student with the ability to view a time to pay off calculator; e.g., given a loan amount, interest rate, and monthly payment, how long will it take to pay off the loan?",checked:this.props.financialCalculatorTimeToPayOff,onChange:newCheckedState=>{this.props.onChange({financialCalculatorTimeToPayOff:newCheckedState});},indent:true})]}),jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:"Show periodic table",infoTip:"This provides the student with the ability to view a periodic table of the elements, e.g., for answering chemistry questions.",checked:this.props.periodicTable,onChange:newCheckedState=>{this.props.onChange({periodicTable:newCheckedState,periodicTableWithKey:false});}}),this.props.periodicTable&&jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:"Include key/legend with periodic table",infoTip:"Include a key for HS courses; omit for AP chemistry.",checked:this.props.periodicTableWithKey,onChange:newCheckedState=>{this.props.onChange({periodicTableWithKey:newCheckedState});},indent:true})
|
|
1525
|
+
const{InfoTip: InfoTip$o}=perseus.components;class ItemExtrasEditor extends React__namespace.Component{shouldShowFinancialCalculatorOptions(){return this.props.financialCalculatorMonthlyPayment||this.props.financialCalculatorTotalAmount||this.props.financialCalculatorTimeToPayOff}render(){return jsxRuntimeExports.jsx("div",{className:"perseus-answer-editor",children:jsxRuntimeExports.jsxs("div",{className:"perseus-answer-options",children:[jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:"Show calculator",infoTip:"Use the calculator when completing difficult calculations is NOT the intent of the question. DON’T use the calculator when testing the student’s ability to complete different types of computations.",checked:this.props.calculator,onChange:newCheckedState=>{this.props.onChange({calculator:newCheckedState});}}),jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:"Show financial calculator",infoTip:"This provides the student with the ability to view a financial calculator, e.g., for answering financial questions. Once checked, requires at least one of the three options below to be checked.",checked:this.shouldShowFinancialCalculatorOptions(),onChange:newCheckedState=>{this.props.onChange({financialCalculatorMonthlyPayment:newCheckedState,financialCalculatorTotalAmount:newCheckedState,financialCalculatorTimeToPayOff:newCheckedState});}}),this.shouldShowFinancialCalculatorOptions()&&jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:"Include monthly payment",infoTip:"This provides the student with the ability to view a monthly payment calculator; e.g., given a loan amount, interest rate, and term, what is the monthly payment?",checked:this.props.financialCalculatorMonthlyPayment,onChange:newCheckedState=>{this.props.onChange({financialCalculatorMonthlyPayment:newCheckedState});},indent:true}),jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:"Include total amount",infoTip:"This provides the student with the ability to view a total amount calculator; e.g., given a monthly payment, interest rate, and term, what is the total amount to be paid?",checked:this.props.financialCalculatorTotalAmount,onChange:newCheckedState=>{this.props.onChange({financialCalculatorTotalAmount:newCheckedState});},indent:true}),jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:"Include time-to-pay-off",infoTip:"This provides the student with the ability to view a time to pay off calculator; e.g., given a loan amount, interest rate, and monthly payment, how long will it take to pay off the loan?",checked:this.props.financialCalculatorTimeToPayOff,onChange:newCheckedState=>{this.props.onChange({financialCalculatorTimeToPayOff:newCheckedState});},indent:true})]}),jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:"Show periodic table",infoTip:"This provides the student with the ability to view a periodic table of the elements, e.g., for answering chemistry questions.",checked:this.props.periodicTable,onChange:newCheckedState=>{this.props.onChange({periodicTable:newCheckedState,periodicTableWithKey:false});}}),this.props.periodicTable&&jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:"Include key/legend with periodic table",infoTip:"Include a key for HS courses; omit for AP chemistry.",checked:this.props.periodicTableWithKey,onChange:newCheckedState=>{this.props.onChange({periodicTableWithKey:newCheckedState});},indent:true})]})})}constructor(...args){super(...args),this.serialize=()=>{const data={...ItemExtrasEditor.defaultProps};for(const key of perseusCore.ItemExtras){data[key]=!!this.props[key];}return data};}}ItemExtrasEditor.defaultProps={calculator:false,financialCalculatorMonthlyPayment:false,financialCalculatorTotalAmount:false,financialCalculatorTimeToPayOff:false,periodicTable:false,periodicTableWithKey:false};const ItemExtraCheckbox=props=>jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:[styles$P.checkbox,props.indent?styles$P.indented:undefined],children:jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:{flexDirection:"row"},children:[props.label," ",jsxRuntimeExports.jsx(InfoTip$o,{children:props.infoTip})]}),checked:props.checked,onChange:newCheckedState=>props.onChange(newCheckedState)})});const styles$P=aphrodite.StyleSheet.create({indented:{marginInlineStart:wonderBlocksTokens.spacing.large_24}});
|
|
1526
1526
|
|
|
1527
1527
|
const WARNINGS={inaccessibleWidget:(widgetType,widgetId)=>({id:`${widgetId} inaccessible`,description:`This ${widgetType} widget (${widgetId}) is inaccessible. Consider using an alternative to support all learners. Please check out the following documentation on compliant widget options.`,helpUrl:"https://khanacademy.atlassian.net/wiki/spaces/LC/pages/1909489691/Widget+Fundamentals",help:"Widget Fundamentals",impact:"medium",message:"Selecting inaccessible widgets for a practice item will result in this exercise being hidden from users with 'Hide visually dependant content' setting set to true. Please select another widget or create an alternative practice item."}),genericLinterWarning:(rule,message)=>({id:rule,description:message,help:"Learn more about best practices for authoring items",helpUrl:"https://docs.google.com/document/d/1N13f4sY-7EXWDwQ04ivA9vJBVvPPd60qjBT73B4NHuM/edit?tab=t.0",impact:"low",message:message})};
|
|
1528
1528
|
|
|
@@ -1532,7 +1532,7 @@ const{HUD}=perseus.components;class EditorPage extends React__namespace.Componen
|
|
|
1532
1532
|
|
|
1533
1533
|
function ContentPreview({question,apiOptions,seamless,linterContext,legacyPerseusLint,previewDevice}){const i18n=perseus.usePerseusI18n();const isMobile=previewDevice!=="desktop";const className=isMobile?"perseus-mobile":"";return jsxRuntimeExports.jsx(wonderBlocksCore.View,{className:`framework-perseus ${className}`,style:[styles$O.container,!seamless?styles$O.gutter:undefined],children:jsxRuntimeExports.jsx(keypadContext.StatefulKeypadContextProvider,{children:jsxRuntimeExports.jsx(keypadContext.KeypadContext.Consumer,{children:({setKeypadActive,keypadElement,setKeypadElement})=>jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(perseus.Renderer,{strings:i18n.strings,apiOptions:{...apiOptions,isMobile},keypadElement:keypadElement,linterContext:linterContext,legacyPerseusLint:legacyPerseusLint,...question}),jsxRuntimeExports.jsx(mathInput.MobileKeypad,{onAnalyticsEvent:()=>Promise.resolve(),onDismiss:()=>setKeypadActive(false),onElementMounted:setKeypadElement})]})})})})}const styles$O=aphrodite.StyleSheet.create({container:{padding:wonderBlocksTokens.spacing.xxxSmall_4,containerType:"inline-size",containerName:"perseus-root"},gutter:{marginRight:lintGutterWidth}});
|
|
1534
1534
|
|
|
1535
|
-
const{TextListEditor: TextListEditor$4}=perseus.components;const Categorizer=perseus.Categorizer.widget;class CategorizerEditor extends React__namespace.Component{render(){return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:"Randomize item order",checked:this.props.randomizeItems,onChange:value=>{this.props.onChange({randomizeItems:value});}})}),"Categories:",jsxRuntimeExports.jsx(TextListEditor$4,{options:this.props.categories,onChange:cat=>{this.change("categories",cat);},layout:"horizontal"}),"Items:",jsxRuntimeExports.jsx(TextListEditor$4,{options:this.props.items,onChange:items=>{this.change({items:items,values:___default.default.first(this.props.values,items.length)});},layout:"vertical"}),jsxRuntimeExports.jsx(Categorizer,{
|
|
1535
|
+
const{TextListEditor: TextListEditor$4}=perseus.components;const Categorizer=perseus.Categorizer.widget;class CategorizerEditor extends React__namespace.Component{render(){const categorizerProps={items:this.props.items,categories:this.props.categories,userInput:{values:this.props.values},handleUserInput:userInput=>{this.props.onChange({values:userInput.values});},apiOptions:this.props.apiOptions,trackInteraction:function(){}};return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:"Randomize item order",checked:this.props.randomizeItems,onChange:value=>{this.props.onChange({randomizeItems:value});}})}),"Categories:",jsxRuntimeExports.jsx(TextListEditor$4,{options:this.props.categories,onChange:cat=>{this.change("categories",cat);},layout:"horizontal"}),"Items:",jsxRuntimeExports.jsx(TextListEditor$4,{options:this.props.items,onChange:items=>{this.change({items:items,values:___default.default.first(this.props.values,items.length)});},layout:"vertical"}),jsxRuntimeExports.jsx(Categorizer,{...categorizerProps})]})}constructor(...args){super(...args),this.change=(...args)=>{return perseus.Changeable.change.apply(this,args)},this.serialize=()=>{return perseus.EditorJsonify.serialize.call(this)};}}CategorizerEditor.propTypes={...perseus.Changeable.propTypes,apiOptions:perseus.ApiOptions.propTypes,items:PropTypes__default.default.arrayOf(PropTypes__default.default.string),categories:PropTypes__default.default.arrayOf(PropTypes__default.default.string),values:PropTypes__default.default.arrayOf(PropTypes__default.default.number),randomizeItems:PropTypes__default.default.bool};CategorizerEditor.widgetName="categorizer";CategorizerEditor.defaultProps=perseusCore.categorizerLogic.defaultWidgetOptions;
|
|
1536
1536
|
|
|
1537
1537
|
class BlurInput extends React__namespace.Component{UNSAFE_componentWillReceiveProps(nextProps){this.setState({value:nextProps.value});}focus(){this.input.current?.focus();}render(){return jsxRuntimeExports.jsx("input",{ref:this.input,className:this.props.className,style:this.props.style,type:"text",value:this.state.value,onChange:this.handleChange,onBlur:this.handleBlur})}constructor(props){super(props),this.input=React__namespace.createRef(),this.handleChange=e=>{this.setState({value:e.target.value});},this.handleBlur=e=>{this.props.onChange(e.target.value);};this.state={value:this.props.value};}}
|
|
1538
1538
|
|
|
@@ -1546,8 +1546,8 @@ const{InfoTip: InfoTip$m,InlineIcon: InlineIcon$3}=perseus.components;class Drop
|
|
|
1546
1546
|
|
|
1547
1547
|
const{TextInput: TextInput$6}=perseus.components;class ExplanationEditor extends React__namespace.Component{render(){return jsxRuntimeExports.jsxs("div",{className:"perseus-widget-explanation-editor",children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsxs("label",{children:["Prompt to show explanation:"," ",jsxRuntimeExports.jsx(TextInput$6,{value:this.props.showPrompt,onChange:this.change("showPrompt")})]})}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsxs("label",{children:["Prompt to hide explanation:"," ",jsxRuntimeExports.jsx(TextInput$6,{value:this.props.hidePrompt,onChange:this.change("hidePrompt")})]})}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsx(Editor,{apiOptions:this.props.apiOptions,content:this.props.explanation,widgets:this.props.widgets,widgetEnabled:true,immutableWidgets:false,onChange:props=>{const newProps={};if(___default.default.has(props,"content")){newProps.explanation=props.content;}if(___default.default.has(props,"widgets")){newProps.widgets=props.widgets;}this.change(newProps);}})})]})}constructor(...args){super(...args),this.state={},this.change=(...args)=>{return perseus.Changeable.change.apply(this,args)},this.serialize=()=>{return perseus.EditorJsonify.serialize.call(this)};}}ExplanationEditor.propTypes={...perseus.Changeable.propTypes,showPrompt:PropTypes__default.default.string,hidePrompt:PropTypes__default.default.string,explanation:PropTypes__default.default.string,widgets:PropTypes__default.default.object,apiOptions:PropTypes__default.default.any};ExplanationEditor.widgetName="explanation";ExplanationEditor.defaultProps=perseusCore.explanationLogic.defaultWidgetOptions;
|
|
1548
1548
|
|
|
1549
|
-
const{ButtonGroup: ButtonGroup$7,InfoTip: InfoTip$l}=perseus.components;const buttonSetsList=["basic","trig","prealgebra","logarithms","scientific","basic relations","advanced relations"];class ExpressionEditor extends React__namespace.Component{serialize(){const{answerForms,buttonSets,functions,times,visibleLabel,ariaLabel}=this.props;return {answerForms,buttonSets,functions,times,visibleLabel,ariaLabel,extraKeys:perseusCore.deriveExtraKeys(this.props)}}updateAnswerForm(index,answerFormProps){const answerForms=this.props.answerForms.slice();answerForms[index]=answerFormProps;const{extraKeys:_,...restProps}=this.props;const extraKeys=perseusCore.deriveExtraKeys({...restProps,answerForms});this.props.onChange({answerForms,extraKeys});}changeSimplify(index,simplify){const answerForm={...this.props.answerForms[index],simplify};this.updateAnswerForm(index,answerForm);}changeForm(index,form){const answerForm={...this.props.answerForms[index],form};this.updateAnswerForm(index,answerForm);}changeConsidered(index,considered){const answerForm={...this.props.answerForms[index],considered};this.updateAnswerForm(index,answerForm);}changeTimes(times){this.props.onChange({times:times});}render(){const answerOptions=this.props.answerForms.map((ans,index)=>{const expressionProps={times:this.props.times,functions:this.props.functions,buttonSets:this.props.buttonSets,buttonsVisible:"focused",
|
|
1550
|
-
" to be`);}}});}return issues},this.newAnswer=()=>{const answerForms=this.props.answerForms.slice();const newKey=crypto.randomUUID();const newAnswerForm={considered:"correct",form:false,key:`${newKey}`,simplify:false,value:""};answerForms.push(newAnswerForm);this.props.onChange({answerForms});},this.handleRemoveForm=i=>{const updatedAnswerForms=this.props.answerForms.slice();updatedAnswerForms.splice(i,1);this.props.onChange({answerForms:updatedAnswerForms});},this.handleButtonSet=changingName=>{const buttonSetNames=buttonSetsList;const buttonSets=buttonSetNames.filter(set=>{return this.props.buttonSets.includes(set)!==(set===changingName)});this.props.onChange({buttonSets});},this.handleToggleDiv=()=>{let keep;let remove;if(this.props.buttonSets.includes("basic+div")){keep="basic";remove="basic+div";}else {keep="basic+div";remove="basic";}const buttonSets=this.props.buttonSets.filter(set=>set!==remove).concat(keep);this.props.onChange({buttonSets});},this.handleTexInsert=str=>{this.refs.expression.insert(str);},this.handleFunctions=value=>{this.setState({functionsInternal:value});const newProps={};newProps.functions=value.split(/[ ,]+/).filter(wonderStuffCore.isTruthy);this.props.onChange(newProps);},this.handleVisibleLabel=visibleLabel=>{this.props.onChange({visibleLabel});},this.handleAriaLabel=ariaLabel=>{this.props.onChange({ariaLabel});},this.changeExpressionWidget=(index,
|
|
1549
|
+
const{ButtonGroup: ButtonGroup$7,InfoTip: InfoTip$l}=perseus.components;const buttonSetsList=["basic","trig","prealgebra","logarithms","scientific","basic relations","advanced relations"];class ExpressionEditor extends React__namespace.Component{serialize(){const{answerForms,buttonSets,functions,times,visibleLabel,ariaLabel}=this.props;return {answerForms,buttonSets,functions,times,visibleLabel,ariaLabel,extraKeys:perseusCore.deriveExtraKeys(this.props)}}updateAnswerForm(index,answerFormProps){const answerForms=this.props.answerForms.slice();answerForms[index]=answerFormProps;const{extraKeys:_,...restProps}=this.props;const extraKeys=perseusCore.deriveExtraKeys({...restProps,answerForms});this.props.onChange({answerForms,extraKeys});}changeSimplify(index,simplify){const answerForm={...this.props.answerForms[index],simplify};this.updateAnswerForm(index,answerForm);}changeForm(index,form){const answerForm={...this.props.answerForms[index],form};this.updateAnswerForm(index,answerForm);}changeConsidered(index,considered){const answerForm={...this.props.answerForms[index],considered};this.updateAnswerForm(index,answerForm);}changeTimes(times){this.props.onChange({times:times});}render(){const answerOptions=this.props.answerForms.map((ans,index)=>{const expressionProps={times:this.props.times,functions:this.props.functions,buttonSets:this.props.buttonSets,buttonsVisible:"focused",userInput:ans.value,handleUserInput:input=>this.changeExpressionWidget(index,input),trackInteraction:()=>{},widgetId:this.props.widgetId+"-"+ans.key,visibleLabel:this.props.visibleLabel,ariaLabel:this.props.ariaLabel};return jsxRuntimeExports.jsx(AnswerOption,{considered:ans.considered,expressionProps:expressionProps,form:ans.form,simplify:ans.simplify,onDelete:()=>this.handleRemoveForm(index),onChangeSimplify:simplify=>this.changeSimplify(index,simplify),onChangeForm:form=>this.changeForm(index,form),onChangeConsidered:considered=>this.changeConsidered(index,considered)},ans.key)});const buttonSetChoices=buttonSetsList.map(name=>{const isBasic=name==="basic";const checked=this.props.buttonSets.includes(name)||isBasic;return jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:name,checked:checked,disabled:isBasic,onChange:()=>this.handleButtonSet(name)},name)});buttonSetChoices.unshift(jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:"show ÷ button",checked:this.props.buttonSets.includes("basic+div"),onChange:this.handleToggleDiv},"show ÷ button"));return jsxRuntimeExports.jsxs(wonderBlocksCore.View,{children:[jsxRuntimeExports.jsx(wonderBlocksTypography.HeadingSmall,{children:"Global Options"}),jsxRuntimeExports.jsx("div",{className:aphrodite.css(styles$N.paddedY),children:jsxRuntimeExports.jsx(wonderBlocksForm.LabeledTextField,{label:jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:["Visible label",jsxRuntimeExports.jsx(InfoTip$l,{children:"Optional visible text; strongly encouraged to help learners using dictation software, but can be omitted if the surrounding content provides enough context."})]}),value:this.props.visibleLabel||"",onChange:this.handleVisibleLabel})}),jsxRuntimeExports.jsx("div",{className:aphrodite.css(styles$N.paddedY),children:jsxRuntimeExports.jsx(wonderBlocksForm.LabeledTextField,{label:jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:["Aria label",jsxRuntimeExports.jsxs(InfoTip$l,{children:["Label text that's read by screen readers. Highly recommend adding a label here to ensure your exercise is accessible. For more information on writting accessible labels, please see"," ",jsxRuntimeExports.jsx("a",{href:"https://www.w3.org/WAI/tips/designing/#ensure-that-form-elements-include-clearly-associated-labels",target:"_blank",rel:"noreferrer",children:"this article."})]})]}),value:this.props.ariaLabel||"",onChange:this.handleAriaLabel})}),jsxRuntimeExports.jsx("div",{className:aphrodite.css(styles$N.paddedY),children:jsxRuntimeExports.jsx(wonderBlocksForm.LabeledTextField,{label:jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:["Function variables",jsxRuntimeExports.jsx(InfoTip$l,{children:'Single-letter variables listed here will be interpreted as functions. This let us know that f(x) means "f of x" and not "f times x".'})]}),value:this.state.functionsInternal,onChange:this.handleFunctions})}),jsxRuntimeExports.jsx("div",{className:aphrodite.css(styles$N.paddedY),children:jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:["Use × instead of ⋅ for multiplication",jsxRuntimeExports.jsx(InfoTip$l,{children:"For pre-algebra problems this option displays multiplication as \\times instead of \\cdot in both the rendered output and the acceptable formats examples."})]}),checked:this.props.times,onChange:newCheckedState=>{this.changeTimes(newCheckedState);}})}),jsxRuntimeExports.jsxs("div",{className:aphrodite.css(styles$N.paddedY),children:[jsxRuntimeExports.jsx(wonderBlocksTypography.HeadingXSmall,{children:"Button Sets"}),buttonSetChoices]}),jsxRuntimeExports.jsx(wonderBlocksTypography.HeadingSmall,{children:"Answers"}),jsxRuntimeExports.jsx(wonderBlocksTypography.Caption,{style:styles$N.answersSubtitle,children:"student responses area matched against these from top to bottom"}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:{gap:wonderBlocksTokens.spacing.xSmall_8},children:answerOptions}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(Button__default.default,{size:"small",onClick:this.newAnswer,children:"Add new answer"})]})}constructor(props){super(props),this.getSaveWarnings=()=>{const issues=[];if(this.props.answerForms.length===0){issues.push("No answers specified");}else {const hasCorrect=this.props.answerForms.some(form=>{return form.considered==="correct"});if(!hasCorrect){issues.push("No correct answer specified");}___default.default(this.props.answerForms).each((form,ix)=>{if(this.props.value===""){issues.push(`Answer ${ix+1} is empty`);}else {const expression=KAS__namespace.parse(form.value,{functions:this.props.functions});if(!expression.parsed){issues.push(`Couldn't parse ${form.value}`);}else if(form.simplify&&!expression.expr.isSimplified()){issues.push(`${form.value} isn't simplified, but is required" +
|
|
1550
|
+
" to be`);}}});}return issues},this.newAnswer=()=>{const answerForms=this.props.answerForms.slice();const newKey=crypto.randomUUID();const newAnswerForm={considered:"correct",form:false,key:`${newKey}`,simplify:false,value:""};answerForms.push(newAnswerForm);this.props.onChange({answerForms});},this.handleRemoveForm=i=>{const updatedAnswerForms=this.props.answerForms.slice();updatedAnswerForms.splice(i,1);this.props.onChange({answerForms:updatedAnswerForms});},this.handleButtonSet=changingName=>{const buttonSetNames=buttonSetsList;const buttonSets=buttonSetNames.filter(set=>{return this.props.buttonSets.includes(set)!==(set===changingName)});this.props.onChange({buttonSets});},this.handleToggleDiv=()=>{let keep;let remove;if(this.props.buttonSets.includes("basic+div")){keep="basic";remove="basic+div";}else {keep="basic+div";remove="basic";}const buttonSets=this.props.buttonSets.filter(set=>set!==remove).concat(keep);this.props.onChange({buttonSets});},this.handleTexInsert=str=>{this.refs.expression.insert(str);},this.handleFunctions=value=>{this.setState({functionsInternal:value});const newProps={};newProps.functions=value.split(/[ ,]+/).filter(wonderStuffCore.isTruthy);this.props.onChange(newProps);},this.handleVisibleLabel=visibleLabel=>{this.props.onChange({visibleLabel});},this.handleAriaLabel=ariaLabel=>{this.props.onChange({ariaLabel});},this.changeExpressionWidget=(index,input)=>{const answerForm={...this.props.answerForms[index],value:input};this.updateAnswerForm(index,answerForm);};this.state={functionsInternal:this.props.functions.join(" ")};}}ExpressionEditor.widgetName="expression";ExpressionEditor.defaultProps=perseusCore.expressionLogic.defaultWidgetOptions;const findNextIn=function(arr,val){let ix=arr.indexOf(val);ix=(ix+1)%arr.length;return arr[ix]};class AnswerOption extends React__namespace.Component{render(){const removeButton=this.state.deleteFocused?jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(Button__default.default,{size:"small",onClick:this.handleImSure,actionType:"destructive",children:"I'm sure!"}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(Button__default.default,{size:"small",onClick:this.handleCancelDelete,kind:"secondary",children:"Cancel"})]}):jsxRuntimeExports.jsx(Button__default.default,{size:"small",onClick:this.handleDelete,actionType:"destructive",kind:"tertiary",style:styles$N.deleteButton,children:"Delete"});return jsxRuntimeExports.jsxs("div",{className:aphrodite.css(styles$N.answerOption),children:[jsxRuntimeExports.jsx(ButtonGroup$7,{onChange:this.toggleConsidered,allowEmpty:false,value:this.props.considered,selectedButtonStyle:consideredButtonStyles[this.props.considered],buttons:perseusCore.PerseusExpressionAnswerFormConsidered.map(c=>({value:c,content:c,title:`This answer will be considered ${c}`}))}),jsxRuntimeExports.jsx(perseus.Expression,{...this.props.expressionProps}),jsxRuntimeExports.jsx("div",{className:aphrodite.css(styles$N.paddedY,styles$N.paddedX),children:jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:["Answer expression must have the same form.",jsxRuntimeExports.jsx(InfoTip$l,{children:"The student's answer must be in the same form. Commutativity and excess negative signs are ignored."})]}),checked:this.props.form,onChange:this.props.onChangeForm})}),jsxRuntimeExports.jsx("div",{className:aphrodite.css(styles$N.paddedY,styles$N.paddedX),children:jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:["Answer expression must be fully expanded and simplified.",jsxRuntimeExports.jsx(InfoTip$l,{children:'The student\'s answer must be fully expanded and simplified. Answering this equation (x^2+2x+1) with this factored equation (x+1)^2 will render this response "Your answer is not fully expanded and simplified."'})]}),checked:this.props.simplify,onChange:this.props.onChangeSimplify})}),jsxRuntimeExports.jsx("div",{className:aphrodite.css(styles$N.buttonRow,styles$N.paddedY),children:removeButton})]})}constructor(...args){super(...args),this.state={deleteFocused:false},this.handleImSure=()=>{this.props.onDelete();this.handleCancelDelete();},this.handleCancelDelete=()=>{this.setState({deleteFocused:false});},this.handleDelete=()=>{this.setState({deleteFocused:true});},this.toggleConsidered=()=>{const newVal=findNextIn(perseusCore.PerseusExpressionAnswerFormConsidered,this.props.considered);this.props.onChangeConsidered(newVal);};}}const styles$N=aphrodite.StyleSheet.create({paddedX:{paddingLeft:wonderBlocksTokens.spacing.xSmall_8,paddingRight:wonderBlocksTokens.spacing.xSmall_8},paddedY:{paddingTop:wonderBlocksTokens.spacing.xxSmall_6,paddingBottom:wonderBlocksTokens.spacing.xxSmall_6},answersSubtitle:{fontStyle:"italic"},answerOption:{border:"1px solid #ddd",borderRadius:"3px",display:"flex",flexDirection:"column"},answerStatusWrong:{backgroundColor:wonderBlocksTokens.color.fadedRed16},answerStatusCorrect:{backgroundColor:wonderBlocksTokens.color.fadedGreen16},answerStatusUngraded:{backgroundColor:wonderBlocksTokens.color.fadedBlue16},buttonRow:{display:"flex"},deleteButton:{paddingInline:wonderBlocksTokens.sizing.size_160}});const consideredButtonStyles={wrong:styles$N.answerStatusWrong,correct:styles$N.answerStatusCorrect,ungraded:styles$N.answerStatusUngraded};
|
|
1551
1551
|
|
|
1552
1552
|
class FreeResponseEditor extends React__namespace.Component{render(){return jsxRuntimeExports.jsxs(wonderBlocksCore.View,{children:[jsxRuntimeExports.jsx(wonderBlocksLabeledField.LabeledField,{label:jsxRuntimeExports.jsx(wonderBlocksTypography.HeadingSmall,{children:"Question"}),field:jsxRuntimeExports.jsx("textarea",{value:this.props.question,onChange:e=>this.props.onChange({question:e.target.value})}),styles:{root:styles$M.labeledInputField}}),jsxRuntimeExports.jsx(wonderBlocksLabeledField.LabeledField,{label:jsxRuntimeExports.jsx(wonderBlocksTypography.HeadingSmall,{children:"Placeholder"}),field:jsxRuntimeExports.jsx("textarea",{value:this.props.placeholder,onChange:e=>this.props.onChange({placeholder:e.target.value})}),styles:{root:styles$M.labeledInputField}}),jsxRuntimeExports.jsx(wonderBlocksLabeledField.LabeledField,{label:jsxRuntimeExports.jsx(wonderBlocksTypography.HeadingSmall,{children:"Allow unlimited characters"}),field:jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{checked:this.props.allowUnlimitedCharacters,onChange:val=>this.props.onChange({allowUnlimitedCharacters:val})}),styles:{root:styles$M.labeledInputField}}),!this.props.allowUnlimitedCharacters&&jsxRuntimeExports.jsx(wonderBlocksLabeledField.LabeledField,{label:jsxRuntimeExports.jsx(wonderBlocksTypography.HeadingSmall,{children:"Character limit"}),field:jsxRuntimeExports.jsx("input",{type:"number",min:1,value:this.props.characterLimit,onChange:this.handleUpdateCharacterLimit}),styles:{root:styles$M.labeledInputField}}),jsxRuntimeExports.jsxs(wonderBlocksCore.View,{children:[jsxRuntimeExports.jsx(wonderBlocksTypography.HeadingSmall,{children:"Scoring criteria"}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$M.criteriaList,children:this.renderCriteriaList()}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{children:jsxRuntimeExports.jsx(Button__default.default,{onClick:this.handleAddCriterion,startIcon:plusCircle__default.default,children:"Add an item"})})]})]})}constructor(...args){super(...args),this.serialize=()=>{return {allowUnlimitedCharacters:this.props.allowUnlimitedCharacters,characterLimit:this.props.characterLimit,placeholder:this.props.placeholder,question:this.props.question,scoringCriteria:this.props.scoringCriteria}},this.getSaveWarnings=()=>{const warnings=[];if(!this.props.question){warnings.push("The question is empty");}if(this.props.question.match(perseus.Util.rWidgetRule)!=null){warnings.push("The question contains a widget");}return warnings},this.handleUpdateCharacterLimit=e=>{const val=parseInt(e.target.value);if(isNaN(val)){return}this.props.onChange({characterLimit:Math.max(1,val)});},this.handleUpdateCriterion=(index,criterion)=>{const newCriteria=this.props.scoringCriteria.map((c,i)=>{if(i===index){return criterion}return c});this.props.onChange({scoringCriteria:newCriteria});},this.handleDeleteCriterion=index=>{this.props.onChange({scoringCriteria:this.props.scoringCriteria.filter((_,i)=>i!==index)});},this.handleAddCriterion=()=>{this.props.onChange({scoringCriteria:[...this.props.scoringCriteria,{text:""}]});},this.renderCriteriaList=()=>{const isDeletable=this.props.scoringCriteria.length>1;return this.props.scoringCriteria.map((criterion,index)=>{return jsxRuntimeExports.jsx(CriterionEditor,{criterion:criterion,index:index,isDeletable:isDeletable,onChange:this.handleUpdateCriterion,onDelete:this.handleDeleteCriterion},index)})};}}FreeResponseEditor.defaultProps=perseusCore.freeResponseLogic.defaultWidgetOptions;FreeResponseEditor.widgetName="free-response";const CriterionEditor=function(props){return jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$M.criterionContainer,children:[jsxRuntimeExports.jsx("textarea",{"aria-label":`Criterion ${props.index+1}`,onChange:e=>props.onChange(props.index,{text:e.target.value}),value:props.criterion.text}),props.isDeletable&&jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$M.deleteButtonContainer,children:jsxRuntimeExports.jsx(Button__default.default,{"aria-label":`Delete criterion ${props.index+1}`,actionType:"destructive",disabled:!props.isDeletable,kind:"tertiary",onClick:()=>props.onDelete(props.index),size:"small",startIcon:trashIcon__default.default,children:"Delete"})})]})};const styles$M=aphrodite.StyleSheet.create({criteriaList:{gap:wonderBlocksTokens.spacing.small_12},criterionContainer:{paddingTop:wonderBlocksTokens.spacing.xSmall_8,paddingBottom:wonderBlocksTokens.spacing.xSmall_8,borderBottom:`1px solid ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`,":last-child":{borderBottom:"none"}},deleteButtonContainer:{display:"flex",flexDirection:"row",justifyContent:"flex-end"},labeledInputField:{paddingBottom:wonderBlocksTokens.spacing.large_24}});
|
|
1553
1553
|
|
|
@@ -1557,9 +1557,9 @@ class GradedGroupSetEditor extends React__namespace.Component{UNSAFE_componentWi
|
|
|
1557
1557
|
|
|
1558
1558
|
const{ButtonGroup: ButtonGroup$6,InfoTip: InfoTip$k,RangeInput: RangeInput$6}=perseus.components;const defaultBackgroundImage$1={url:null,width:0,height:0};function numSteps$1(range,step){return Math.floor((range[1]-range[0])/step)}class GraphSettings extends React__namespace.Component{getInitialState(){return this.stateFromProps(this.props)}componentDidMount(){this._isMounted=true;this.changeGraph=___default.default.debounce(this.changeGraph,300);}UNSAFE_componentWillReceiveProps(nextProps){if(!___default.default.isEqual(this.props.labels,nextProps.labels)||!___default.default.isEqual(this.props.gridStep,nextProps.gridStep)||!___default.default.isEqual(this.props.snapStep,nextProps.snapStep)||!___default.default.isEqual(this.props.step,nextProps.step)||!___default.default.isEqual(this.props.range,nextProps.range)||!___default.default.isEqual(this.props.backgroundImage,nextProps.backgroundImage)){this.setState(this.stateFromProps(nextProps));}}componentWillUnmount(){this._isMounted=false;}stateFromProps(props){return {labelsTextbox:props.labels,gridStepTextbox:props.gridStep,snapStepTextbox:props.snapStep,stepTextbox:props.step,rangeTextbox:props.range,backgroundImage:___default.default.clone(props.backgroundImage)}}change(...args){return perseus.Changeable.change.apply(this,args)}changeRulerLabel(e){this.change({rulerLabel:e.target.value});}changeRulerTicks(e){this.change({rulerTicks:+e.target.value});}changeBackgroundUrl(e){if(e.type==="keypress"&&e.key!=="Enter"){return}const setUrl=(url,width,height)=>{const image=___default.default.clone(this.props.backgroundImage);image.url=url;image.width=width;image.height=height;this.setState({backgroundImage:image},this.changeGraph);};const url=ReactDOM__default.default.findDOMNode(this.refs["bg-url"]).value;if(url){perseus.Util.getImageSize(url,(width,height)=>{if(this._isMounted){setUrl(url,width,height);}});}else {setUrl(null,0,0);}}renderLabelChoices(choices){return ___default.default.map(choices,function([name,value]){return jsxRuntimeExports.jsx("option",{value:value,children:name},value)})}validRange(range){const numbers=___default.default.every(range,function(num){return ___default.default.isFinite(num)});if(!numbers){return "Range must be a valid number"}if(range[0]>=range[1]){return "Range must have a higher number on the right"}return true}validateStepValue(settings){const{step,range,name,minTicks,maxTicks}=settings;if(!___default.default.isFinite(step)){return name+" must be a valid number"}const nSteps=numSteps$1(range,step);if(nSteps<minTicks){return name+" is too large, there must be at least "+minTicks+" ticks."}if(nSteps>maxTicks){return name+" is too small, there can be at most "+maxTicks+" ticks."}return true}validSnapStep(step,range){return this.validateStepValue({step:step,range:range,name:"Snap step",minTicks:5,maxTicks:60})}validGridStep(step,range){return this.validateStepValue({step:step,range:range,name:"Grid step",minTicks:3,maxTicks:60})}validStep(step,range){return this.validateStepValue({step:step,range:range,name:"Step",minTicks:3,maxTicks:20})}validBackgroundImageSize(image){if(!image.url){return true}const validSize=image.width<=450&&image.height<=450;if(!validSize){return "Image must be smaller than 450px x 450px."}return true}validateGraphSettings(range,step,gridStep,snapStep,image){const self=this;let msg;const goodRange=___default.default.every(range,function(range){msg=self.validRange(range);return msg===true});if(!goodRange){return msg}const goodStep=___default.default.every(step,function(step,i){msg=self.validStep(step,range[i]);return msg===true});if(!goodStep){return msg}const goodGridStep=___default.default.every(gridStep,function(gridStep,i){msg=self.validGridStep(gridStep,range[i]);return msg===true});if(!goodGridStep){return msg}const goodSnapStep=___default.default.every(snapStep,function(snapStep,i){msg=self.validSnapStep(snapStep,range[i]);return msg===true});if(!goodSnapStep){return msg}const goodImageSize=this.validBackgroundImageSize(image);if(goodImageSize!==true){msg=goodImageSize;return msg}return true}changeLabel(i,e){const val=e.target.value;const labels=this.state.labelsTextbox.slice();labels[i]=val;this.setState({labelsTextbox:labels},this.changeGraph);}changeRange(i,values){const ranges=this.state.rangeTextbox.slice();ranges[i]=values;const step=this.state.stepTextbox.slice();const gridStep=this.state.gridStepTextbox.slice();const snapStep=this.state.snapStepTextbox.slice();const scale=perseus.Util.scaleFromExtent(ranges[i],this.props.box[i]);if(this.validRange(ranges[i])===true){step[i]=perseus.Util.tickStepFromExtent(ranges[i],this.props.box[i]);gridStep[i]=perseus.Util.gridStepFromTickStep(step[i],scale);snapStep[i]=gridStep[i]/2;}this.setState({stepTextbox:step,gridStepTextbox:gridStep,snapStepTextbox:snapStep,rangeTextbox:ranges},this.changeGraph);}changeStep(step){this.setState({stepTextbox:step},this.changeGraph);}changeSnapStep(snapStep){this.setState({snapStepTextbox:snapStep},this.changeGraph);}changeGridStep(gridStep){this.setState({gridStepTextbox:gridStep,snapStepTextbox:___default.default.map(gridStep,function(step){return step/2})},this.changeGraph);}changeGraph(){const labels=this.state.labelsTextbox;const range=___default.default.map(this.state.rangeTextbox,function(range){return ___default.default.map(range,Number)});const step=___default.default.map(this.state.stepTextbox,Number);const gridStep=this.state.gridStepTextbox;const snapStep=this.state.snapStepTextbox;const image=this.state.backgroundImage;const validationResult=this.validateGraphSettings(range,step,gridStep,snapStep,image);if(validationResult===true){this.change({valid:true,labels:labels,range:range,step:step,gridStep:gridStep,snapStep:snapStep,backgroundImage:image});}else {this.change({valid:validationResult});}}render(){const scale=[kmath.KhanMath.roundTo(2,perseus.Util.scaleFromExtent(this.props.range[0],this.props.box[0])),kmath.KhanMath.roundTo(2,perseus.Util.scaleFromExtent(this.props.range[1],this.props.box[1]))];const{TeX}=perseus.Dependencies.getDependencies();return jsxRuntimeExports.jsxs("div",{children:[___default.default.contains(this.props.editableSettings,"canvas")&&jsxRuntimeExports.jsxs("div",{className:"graph-settings",children:[jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[jsxRuntimeExports.jsx("label",{htmlFor:"canvas-size",children:"Canvas size (x,y pixels)"}),jsxRuntimeExports.jsx(RangeInput$6,{id:"canvas-size",value:this.props.box,onChange:box=>{this.change({box:box});}})]}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:["Scale (px per div):"," ",jsxRuntimeExports.jsx(TeX,{children:"("+scale[0]+", "+scale[1]+")"})]})]}),___default.default.contains(this.props.editableSettings,"graph")&&jsxRuntimeExports.jsxs("div",{className:"graph-settings",children:[jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[jsxRuntimeExports.jsxs("div",{className:"perseus-widget-left-col",children:[jsxRuntimeExports.jsx("label",{htmlFor:"labels-x",children:"x Label"}),jsxRuntimeExports.jsx("input",{id:"labels-x",type:"text",className:"graph-settings-axis-label",ref:"labels-0",onChange:e=>this.changeLabel(0,e),value:this.state.labelsTextbox[0]||""})]}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-right-col",children:[jsxRuntimeExports.jsx("label",{htmlFor:"labels-y",children:"y Label"}),jsxRuntimeExports.jsx("input",{id:"labels-y",type:"text",className:"graph-settings-axis-label",ref:"labels-1",onChange:e=>this.changeLabel(1,e),value:this.state.labelsTextbox[1]||""})]})]}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[jsxRuntimeExports.jsxs("div",{className:"perseus-widget-left-col",children:[jsxRuntimeExports.jsx("label",{htmlFor:"range-x",children:"x Range"}),jsxRuntimeExports.jsx(RangeInput$6,{id:"range-x",value:this.state.rangeTextbox[0],onChange:vals=>this.changeRange(0,vals)})]}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-right-col",children:[jsxRuntimeExports.jsx("label",{htmlFor:"range-y",children:"y Range"}),jsxRuntimeExports.jsx(RangeInput$6,{id:"range-y",value:this.state.rangeTextbox[1],onChange:vals=>this.changeRange(1,vals)})]})]}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[jsxRuntimeExports.jsxs("div",{className:"perseus-widget-left-col",children:[jsxRuntimeExports.jsx("label",{htmlFor:"tick-step",children:"Tick Step"}),jsxRuntimeExports.jsx(RangeInput$6,{id:"tick-step",value:this.state.stepTextbox,onChange:this.changeStep})]}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-right-col",children:[jsxRuntimeExports.jsx("label",{htmlFor:"grid-step",children:"Grid Step"}),jsxRuntimeExports.jsx(RangeInput$6,{id:"grid-step",value:this.state.gridStepTextbox,onChange:this.changeGridStep})]})]}),___default.default.contains(this.props.editableSettings,"snap")&&jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsxs("div",{className:"perseus-widget-left-col",children:[jsxRuntimeExports.jsx("label",{htmlFor:"snap-step",children:"Snap Step"}),jsxRuntimeExports.jsx(RangeInput$6,{id:"snap-step",value:this.state.snapStepTextbox,onChange:this.changeSnapStep})]})}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[jsxRuntimeExports.jsx("label",{children:"Markings: "}),jsxRuntimeExports.jsx(ButtonGroup$6,{value:this.props.markings,allowEmpty:false,buttons:[{value:"graph",content:"Graph"},{value:"grid",content:"Grid"},{value:"none",content:"None"}],onChange:this.change("markings")})]}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-left-col",children:jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:"Show tooltips",checked:this.props.showTooltips,onChange:value=>{this.change({showTooltips:value});}})})]}),___default.default.contains(this.props.editableSettings,"image")&&jsxRuntimeExports.jsxs("div",{className:"image-settings",children:[jsxRuntimeExports.jsx("div",{children:"Background image:"}),jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx("label",{htmlFor:"bg-url",children:"Url:"}),jsxRuntimeExports.jsx("input",{id:"bg-url",type:"text",className:"graph-settings-background-url",ref:"bg-url",value:this.state.backgroundImage.url||"",onChange:e=>{const image=___default.default.clone(this.props.backgroundImage);image.url=e.target.value;this.setState({backgroundImage:image});},onKeyPress:this.changeBackgroundUrl,onBlur:this.changeBackgroundUrl}),jsxRuntimeExports.jsx(InfoTip$k,{children:jsxRuntimeExports.jsx("p",{children:'Create an image in graphie, or use the "Add image" function to create a background.'})})]})]}),___default.default.contains(this.props.editableSettings,"measure")&&jsxRuntimeExports.jsxs("div",{className:"misc-settings",children:[jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-left-col",children:jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:"Show ruler",checked:this.props.showRuler,onChange:value=>{this.change({showRuler:value});}})}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-right-col",children:jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:"Show protractor",checked:this.props.showProtractor,onChange:value=>{this.change({showProtractor:value});}})})]}),this.props.showRuler&&jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsxs("label",{children:[" ","Ruler label:"," ",jsxRuntimeExports.jsxs("select",{onChange:this.changeRulerLabel,value:this.props.rulerLabel,children:[jsxRuntimeExports.jsx("option",{value:"",children:"None"}),jsxRuntimeExports.jsx("optgroup",{label:"Metric",children:this.renderLabelChoices([["milimeters","mm"],["centimeters","cm"],["meters","m"],["kilometers","km"]])}),jsxRuntimeExports.jsx("optgroup",{label:"Imperial",children:this.renderLabelChoices([["inches","in"],["feet","ft"],["yards","yd"],["miles","mi"]])})]})]})}),jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsxs("label",{children:[" ","Ruler ticks:"," ",jsxRuntimeExports.jsx("select",{onChange:this.changeRulerTicks,value:this.props.rulerTicks,children:___default.default.map([1,2,4,8,10,16],function(n){return jsxRuntimeExports.jsx("option",{value:n,children:n},n)})})]})})]})]})]})}constructor(props){super(props),this._isMounted=false;this.state=this.getInitialState();this.change=this.change.bind(this);this.changeBackgroundUrl=this.changeBackgroundUrl.bind(this);this.changeGraph=this.changeGraph.bind(this);this.changeGridStep=this.changeGridStep.bind(this);this.changeLabel=this.changeLabel.bind(this);this.changeRange=this.changeRange.bind(this);this.changeRulerLabel=this.changeRulerLabel.bind(this);this.changeRulerTicks=this.changeRulerTicks.bind(this);this.changeSnapStep=this.changeSnapStep.bind(this);this.changeStep=this.changeStep.bind(this);}}GraphSettings.defaultProps={editableSettings:["graph","snap","image","measure"],box:[perseus.interactiveSizes.defaultBoxSizeSmall,perseus.interactiveSizes.defaultBoxSizeSmall],labels:["x","y"],range:[[-10,10],[-10,10]],step:[1,1],gridStep:[1,1],snapStep:[1,1],valid:true,backgroundImage:defaultBackgroundImage$1,markings:"graph",rulerLabel:"",rulerTicks:10,showProtractor:false,showRuler:false,showTooltips:false};
|
|
1559
1559
|
|
|
1560
|
-
const{InfoTip: InfoTip$j,MultiButtonGroup}=perseus.components;const Grapher=perseus.GrapherWidget.widget;const{chooseType,defaultPlotProps,getEquationString,typeToButton}=perseus.GrapherUtil;class GrapherEditor extends React__namespace.Component{render(){const sizeClass=perseus.containerSizeClass.SMALL;let equationString;let graph;if(this.props.graph.valid===true){const graphProps={
|
|
1560
|
+
const{InfoTip: InfoTip$j,MultiButtonGroup}=perseus.components;const Grapher=perseus.GrapherWidget.widget;const{chooseType,defaultPlotProps,getEquationString,typeToButton}=perseus.GrapherUtil;class GrapherEditor extends React__namespace.Component{render(){const sizeClass=perseus.containerSizeClass.SMALL;let equationString;let graph;if(this.props.graph.valid===true){const graphProps={apiOptions:this.props.apiOptions,containerSizeClass:sizeClass,graph:this.props.graph,userInput:this.props.correct,handleUserInput:(userInput,cb)=>{let correct=this.props.correct;if(correct.type===userInput?.type){correct=___default.default.extend({},correct,userInput);}else {correct=userInput;}this.props.onChange({correct:correct},cb);},availableTypes:this.props.availableTypes,trackInteraction:function(){}};graph=jsxRuntimeExports.jsx(Grapher,{...graphProps});equationString=getEquationString(graphProps.userInput);}else {graph=jsxRuntimeExports.jsx("div",{className:"perseus-error",children:this.props.graph.valid});}return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsxs("div",{children:["Correct answer"," ",jsxRuntimeExports.jsx(InfoTip$j,{children:jsxRuntimeExports.jsx("p",{children:"Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer."})})," ",": ",equationString]}),jsxRuntimeExports.jsx(GraphSettings,{editableSettings:["graph","snap","image"],box:perseus.getInteractiveBoxFromSizeClass(sizeClass),range:this.props.graph.range,labels:this.props.graph.labels,step:this.props.graph.step,gridStep:this.props.graph.gridStep,snapStep:this.props.graph.snapStep,valid:this.props.graph.valid,backgroundImage:this.props.graph.backgroundImage,markings:this.props.graph.markings,rulerLabel:this.props.graph.rulerLabel,rulerTicks:this.props.graph.rulerTicks,showTooltips:this.props.graph.showTooltips,onChange:this.change("graph")}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[jsxRuntimeExports.jsx("label",{children:"Available functions: "}),jsxRuntimeExports.jsx(MultiButtonGroup,{allowEmpty:false,values:this.props.availableTypes,buttons:___default.default.map(perseusCore.GrapherUtil.allTypes,typeToButton),onChange:this.handleAvailableTypesChange})]}),graph]})}constructor(...args){super(...args),this.change=(...args)=>{return perseus.Changeable.change.apply(this,args)},this.handleAvailableTypesChange=newAvailableTypes=>{let correct=this.props.correct;if(!___default.default.contains(newAvailableTypes,this.props.correct.type)){const graph=this.props.graph;const newType=chooseType(newAvailableTypes);correct=defaultPlotProps(newType,graph);}this.props.onChange({availableTypes:newAvailableTypes,correct:correct});},this.serialize=()=>{return ___default.default.chain(this.props).pick("correct","availableTypes").extend({graph:___default.default.omit(this.props.graph,"box")}).value()};}}GrapherEditor.propTypes={...perseus.Changeable.propTypes};GrapherEditor.widgetName="grapher";GrapherEditor.defaultProps=perseusCore.grapherLogic.defaultWidgetOptions;
|
|
1561
1561
|
|
|
1562
|
-
class GroupEditor extends React__namespace.Component{render(){return jsxRuntimeExports.jsx("div",{className:"perseus-group-editor",children:jsxRuntimeExports.jsx(Editor,{ref:this.editor,content:this.props.content,widgets:this.props.widgets,apiOptions:this.props.apiOptions,images:this.props.images,widgetEnabled:true,immutableWidgets:false,onChange:this.props.onChange})})}constructor(...args){super(...args),this.editor=React__namespace.createRef(),this.
|
|
1562
|
+
class GroupEditor extends React__namespace.Component{render(){return jsxRuntimeExports.jsx("div",{className:"perseus-group-editor",children:jsxRuntimeExports.jsx(Editor,{ref:this.editor,content:this.props.content,widgets:this.props.widgets,apiOptions:this.props.apiOptions,images:this.props.images,widgetEnabled:true,immutableWidgets:false,onChange:this.props.onChange})})}constructor(...args){super(...args),this.editor=React__namespace.createRef(),this.getSaveWarnings=()=>{return this.editor.current?.getSaveWarnings()},this.serialize=()=>{return ___default.default.extend({},this.editor.current?.serialize())};}}GroupEditor.propTypes={content:PropTypes__default.default.string,widgets:PropTypes__default.default.object,images:PropTypes__default.default.object,apiOptions:perseus.ApiOptions.propTypes};GroupEditor.widgetName="group";GroupEditor.defaultProps=perseusCore.groupLogic.defaultWidgetOptions;
|
|
1563
1563
|
|
|
1564
1564
|
class PairEditor extends React__namespace.Component{render(){return jsxRuntimeExports.jsxs("fieldset",{children:[jsxRuntimeExports.jsxs("label",{children:["Name:",jsxRuntimeExports.jsx(BlurInput,{value:this.props.name,onChange:this.change("name")})]}),jsxRuntimeExports.jsxs("label",{children:["Value:",jsxRuntimeExports.jsx(BlurInput,{value:this.props.value,onChange:this.change("value")})]})]})}constructor(...args){super(...args),this.change=(...args)=>{return perseus.Changeable.change.apply(this,args)},this.serialize=()=>{return perseus.EditorJsonify.serialize.call(this)};}}PairEditor.propTypes={...perseus.Changeable.propTypes,name:PropTypes__default.default.string,value:PropTypes__default.default.string};PairEditor.defaultProps={name:"",value:""};class PairsEditor extends React__namespace.Component{render(){const editors=___default.default.map(this.props.pairs,(pair,i)=>{return jsxRuntimeExports.jsx(PairEditor,{name:pair.name,value:pair.value,onChange:this.handlePairChange.bind(this,i)},i)});return jsxRuntimeExports.jsx("div",{children:editors})}constructor(...args){super(...args),this.change=(...args)=>{return perseus.Changeable.change.apply(this,args)},this.handlePairChange=(pairIndex,pair)=>{const pairs=this.props.pairs.slice();pairs[pairIndex]=pair;const lastPair=pairs[pairs.length-1];if(lastPair.name&&lastPair.value){pairs.push({name:"",value:""});}this.change("pairs",pairs);},this.serialize=()=>{return perseus.EditorJsonify.serialize.call(this)};}}PairsEditor.propTypes={...perseus.Changeable.propTypes,pairs:PropTypes__default.default.arrayOf(PropTypes__default.default.shape({name:PropTypes__default.default.string,value:PropTypes__default.default.string})).isRequired};class IframeEditor extends React__namespace.Component{render(){return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsxs("div",{style:{fontWeight:"bold",textAlign:"center"},children:["This widget is deprecated! ",jsxRuntimeExports.jsx("br",{}),"Try using the Video or CS Program widgets instead."]}),jsxRuntimeExports.jsxs("label",{children:["Url or Program ID:",jsxRuntimeExports.jsx(BlurInput,{value:this.props.url,onChange:this.change("url")})]}),jsxRuntimeExports.jsx("br",{}),jsxRuntimeExports.jsxs("label",{children:["Settings:",jsxRuntimeExports.jsx(PairsEditor,{name:"settings",pairs:this.props.settings,onChange:this.handleSettingsChange})]}),jsxRuntimeExports.jsx("br",{}),jsxRuntimeExports.jsxs("label",{children:["Width:",jsxRuntimeExports.jsx(BlurInput,{value:this.props.width,onChange:this.change("width")})]}),jsxRuntimeExports.jsxs("label",{children:["Height:",jsxRuntimeExports.jsx(BlurInput,{value:this.props.height,onChange:this.change("height")})]}),jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:"Allow full screen",checked:this.props.allowFullScreen,onChange:value=>{this.props.onChange({allowFullScreen:value});}}),jsxRuntimeExports.jsx("br",{}),jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:"Allow iframe content to redirect the page",checked:this.props.allowTopNavigation,onChange:value=>{this.props.onChange({allowTopNavigation:value});}})]})}constructor(...args){super(...args),this.change=(...args)=>{return perseus.Changeable.change.apply(this,args)},this.handleSettingsChange=settings=>{this.change({settings:settings.pairs});},this.serialize=()=>{return perseus.EditorJsonify.serialize.call(this)};}}IframeEditor.propTypes={...perseus.Changeable.propTypes};IframeEditor.widgetName="iframe";IframeEditor.defaultProps=perseusCore.iframeLogic.defaultWidgetOptions;
|
|
1565
1565
|
|
|
@@ -1686,7 +1686,7 @@ const StartCoordsSinusoid=props=>{const{startCoords,onChange}=props;return jsxRu
|
|
|
1686
1686
|
|
|
1687
1687
|
const StartCoordsSettingsInner=props=>{const{type,range,step,allowReflexAngles,onChange}=props;switch(type){case "linear":case "ray":const linearCoords=perseus.getLineCoords(props,range,step);return jsxRuntimeExports.jsx(StartCoordsLine,{startCoords:linearCoords,onChange:onChange});case "linear-system":case "segment":const multiLineCoords=type==="segment"?perseus.getSegmentCoords(props,range,step):perseus.getLinearSystemCoords(props,range,step);return jsxRuntimeExports.jsx(StartCoordsMultiline,{type:type,startCoords:multiLineCoords,onChange:onChange});case "circle":const circleCoords=perseus.getCircleCoords(props);const radius=kmath.vector.length(kmath.vector.subtract(circleCoords.radiusPoint,circleCoords.center));return jsxRuntimeExports.jsx(StartCoordsCircle,{startCoords:{center:circleCoords.center,radius},onChange:onChange});case "sinusoid":const sinusoidCoords=perseus.getSinusoidCoords(props,range,step);return jsxRuntimeExports.jsx(StartCoordsSinusoid,{startCoords:sinusoidCoords,onChange:onChange});case "quadratic":const quadraticCoords=perseus.getQuadraticCoords(props,range,step);return jsxRuntimeExports.jsx(StartCoordsQuadratic,{startCoords:quadraticCoords,onChange:onChange});case "point":case "polygon":const pointCoords=type==="point"?perseus.getPointCoords(props,range,step):perseus.getPolygonCoords(props,range,step);return jsxRuntimeExports.jsx(StartCoordsPoint,{startCoords:pointCoords,onChange:onChange});case "angle":const angleCoords=perseus.getAngleCoords({graph:props,range,step});return jsxRuntimeExports.jsx(StartCoordsAngle,{startCoords:angleCoords,allowReflexAngles:allowReflexAngles,onChange:onChange});default:return null}};const StartCoordsSettings=props=>{const{range,step,onChange}=props;const[isOpen,setIsOpen]=React__namespace.useState(true);return jsxRuntimeExports.jsxs(wonderBlocksCore.View,{children:[jsxRuntimeExports.jsx(Heading,{isCollapsible:true,title:"Start coordinates",isOpen:isOpen,onToggle:()=>setIsOpen(!isOpen)}),isOpen&&jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(StartCoordsSettingsInner,{...props}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(Button__default.default,{startIcon:arrowCounterClockwise__default.default,kind:"tertiary",size:"small",onClick:()=>{onChange(getDefaultGraphStartCoords(props,range,step));},children:"Use default start coordinates"})]})]})};
|
|
1688
1688
|
|
|
1689
|
-
const{InfoTip: InfoTip$b}=perseus.components;const InteractiveGraph=perseus.InteractiveGraphWidget.widget;const POLYGON_SIDES=___default.default.map(___default.default.range(3,13),function(value){return jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:`${value}`,label:`${value} sides`},`polygon-sides-${value}`)});class InteractiveGraphEditor extends React__namespace.Component{serialize(){const json=___default.default.pick(this.props,"step","backgroundImage","markings","labels","labelLocation","showProtractor","showTooltips","range","gridStep","snapStep","lockedFigures","fullGraphAriaLabel","fullGraphAriaDescription");const graph=this.refs.graph;if(graph){const correct=graph&&graph.getUserInput();___default.default.extend(json,{graph:{type:correct.type,startCoords:this.props.graph&&getStartCoords(this.props.graph)},correct:correct});___default.default.each(["allowReflexAngles","angleOffsetDeg","numPoints","numSides","numSegments","showAngles","showSides","snapTo","snapDegrees"],function(key){if(___default.default.has(correct,key)){json.graph[key]=correct[key];}});}return json}render(){let graph;let equationString;const gridStep=this.props.gridStep||perseus.Util.getGridStep(this.props.range,this.props.step,perseus.interactiveSizes.defaultBoxSize);const snapStep=this.props.snapStep||perseus.Util.snapStepFromGridStep(gridStep);const sizeClass=perseus.containerSizeClass.SMALL;if(this.props.valid===true){const correct=this.props.correct;const graphProps={ref:"graph",box:this.props.box,range:this.props.range,labels:this.props.labels,labelLocation:this.props.labelLocation,step:this.props.step,gridStep:gridStep,snapStep:snapStep,graph:correct,backgroundImage:this.props.backgroundImage,markings:this.props.markings,showProtractor:this.props.showProtractor,showTooltips:this.props.showTooltips,lockedFigures:this.props.lockedFigures,fullGraphAriaLabel:this.props.fullGraphAriaLabel,fullGraphAriaDescription:this.props.fullGraphAriaDescription,trackInteraction:function(){},onChange:({graph:newGraph})=>{let correct=this.props.correct;invariant__default.default(newGraph!=null);if(correct.type===newGraph.type){correct=mergeGraphs(correct,newGraph);}else {correct=newGraph;}this.props.onChange({correct:correct,graph:this.props.graph});}};graph=jsxRuntimeExports.jsx(InteractiveGraph,{...graphProps,containerSizeClass:sizeClass,apiOptions:{...this.props.apiOptions,isMobile:false}});equationString=InteractiveGraph.getEquationString(graphProps);}else {graph=jsxRuntimeExports.jsx("div",{className:"perseus-error",children:this.props.valid});}return jsxRuntimeExports.jsx(wonderBlocksCore.Id,{children:graphId=>jsxRuntimeExports.jsxs(wonderBlocksCore.View,{children:[jsxRuntimeExports.jsx(LabeledRow,{label:"Answer type:",children:jsxRuntimeExports.jsx(GraphTypeSelector,{graphType:this.props.graph?.type??InteractiveGraph.defaultProps.graph.type,onChange:type=>{this.props.onChange({graph:{type},correct:{type}});}})}),jsxRuntimeExports.jsx(InteractiveGraphDescription,{ariaLabelValue:this.props.fullGraphAriaLabel??"",ariaDescriptionValue:this.props.fullGraphAriaDescription??"",onChange:this.props.onChange}),jsxRuntimeExports.jsx(InteractiveGraphCorrectAnswer,{id:graphId,equationString:equationString,children:graph}),this.props.correct?.type==="point"&&jsxRuntimeExports.jsx(LabeledRow,{label:"Number of Points:",children:jsxRuntimeExports.jsx(GraphPointsCountSelector,{numPoints:this.props.correct?.numPoints,onChange:points=>{this.props.onChange({correct:{type:"point",numPoints:points},graph:{type:"point",numPoints:points}});}})}),this.props.correct?.type==="angle"&&jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$a.row,children:[jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:jsxRuntimeExports.jsx(wonderBlocksTypography.LabelSmall,{children:"Show angle measures"}),checked:!!this.props.correct?.showAngles,onChange:newValue=>{if(this.props.graph?.type==="angle"){invariant__default.default(this.props.correct.type==="angle",`Expected graph type to be angle, but got ${this.props.correct.type}`);this.props.onChange({correct:{...this.props.correct,showAngles:newValue},graph:{...this.props.graph,showAngles:newValue}});}}}),jsxRuntimeExports.jsx(InfoTip$b,{children:jsxRuntimeExports.jsx("p",{children:"Displays the interior angle measures."})})]}),jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$a.row,children:[jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:jsxRuntimeExports.jsx(wonderBlocksTypography.LabelSmall,{children:"Allow reflex angles"}),checked:!!this.props.correct?.allowReflexAngles,onChange:newValue=>{invariant__default.default(this.props.correct.type==="angle",`Expected graph type to be angle, but got ${this.props.correct.type}`);invariant__default.default(this.props.graph?.type==="angle",`Expected graph type to be angle, but got ${this.props.graph?.type}`);const update={allowReflexAngles:newValue};this.props.onChange({correct:{...this.props.correct,...update},graph:{...this.props.graph,...update}});}}),jsxRuntimeExports.jsx(InfoTip$b,{children:jsxRuntimeExports.jsx("p",{children:"Allow students to be able to create reflex angles."})})]})]}),this.props.correct?.type==="polygon"&&jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(LabeledRow,{label:"Number of sides:",children:jsxRuntimeExports.jsx(wonderBlocksDropdown.SingleSelect,{selectedValue:this.props.correct?.numSides?`${this.props.correct.numSides}`:"3",placeholder:"",onChange:newValue=>{invariant__default.default(this.props.graph?.type==="polygon");const updates={numSides:parsePointCount(newValue),coords:undefined,startCoords:undefined,snapTo:"grid"};this.props.onChange({correct:{...this.props.correct,...updates},graph:{...this.props.graph,...updates}});},style:styles$a.singleSelectShort,children:[...POLYGON_SIDES,jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"unlimited",label:"unlimited sides"},"unlimited")]},"polygon-select")}),jsxRuntimeExports.jsxs(LabeledRow,{label:"Snap to:",children:[jsxRuntimeExports.jsxs(wonderBlocksDropdown.SingleSelect,{selectedValue:this.props.correct?.snapTo||"grid",placeholder:"",onChange:newValue=>{invariant__default.default(this.props.correct.type==="polygon",`Expected correct answer type to be polygon, but got ${this.props.correct.type}`);invariant__default.default(this.props.graph?.type==="polygon",`Expected graph type to be polygon, but got ${this.props.graph?.type}`);const updates={snapTo:newValue,coords:null};this.props.onChange({correct:{...this.props.correct,...updates},graph:{...this.props.graph,...updates}});},style:styles$a.singleSelectShort,children:[jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"grid",label:"grid"}),this.props.correct?.numSides!=="unlimited"&&jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"angles",label:"interior angles"}),this.props.correct?.numSides!=="unlimited"&&jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"sides",label:"side measures"})]}),jsxRuntimeExports.jsxs(InfoTip$b,{children:[jsxRuntimeExports.jsx("p",{children:"These options affect the movement of the vertex points. The grid option will guide the points to the nearest half step along the grid."}),jsxRuntimeExports.jsx("p",{children:"The interior angle and side measure options guide the points to the nearest whole angle or side measure respectively."})]})]}),jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$a.row,children:[jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:jsxRuntimeExports.jsx(wonderBlocksTypography.LabelSmall,{children:"Show angle measures"}),checked:!!this.props.correct?.showAngles,onChange:()=>{if(this.props.graph?.type==="polygon"){invariant__default.default(this.props.correct.type==="polygon",`Expected graph type to be polygon, but got ${this.props.correct.type}`);this.props.onChange({correct:{...this.props.correct,showAngles:!this.props.correct.showAngles},graph:{...this.props.graph,showAngles:!this.props.graph.showAngles}});}}}),jsxRuntimeExports.jsx(InfoTip$b,{children:jsxRuntimeExports.jsx("p",{children:"Displays the interior angle measures."})})]}),jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$a.row,children:[jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:jsxRuntimeExports.jsx(wonderBlocksTypography.LabelSmall,{children:"Show side measures"}),checked:!!this.props.correct?.showSides,onChange:()=>{if(this.props.graph?.type==="polygon"&&this.props.correct.type==="polygon"){this.props.onChange({correct:{...this.props.correct,showSides:!this.props.correct.showSides},graph:{...this.props.graph,showSides:!this.props.graph.showSides}});}}}),jsxRuntimeExports.jsx(InfoTip$b,{children:jsxRuntimeExports.jsx("p",{children:"Displays the side lengths."})})]})]}),this.props.correct?.type==="segment"&&jsxRuntimeExports.jsx(LabeledRow,{label:"Number of segments:",children:jsxRuntimeExports.jsx(SegmentCountSelector,{numSegments:this.props.correct?.numSegments,onChange:sides=>{this.props.onChange({correct:{type:"segment",numSegments:sides,coords:null},graph:{type:"segment",numSegments:sides}});}})}),this.props.graph?.type&&shouldShowStartCoordsUI(this.props.graph,this.props.static)&&jsxRuntimeExports.jsx(StartCoordsSettings,{...this.props.graph,range:this.props.range,step:this.props.step,onChange:this.changeStartCoords}),jsxRuntimeExports.jsx(InteractiveGraphSRTree,{graphId:graphId,correct:this.props.correct,fullGraphAriaLabel:this.props.fullGraphAriaLabel,fullGraphAriaDescription:this.props.fullGraphAriaDescription,lockedFigures:this.props.lockedFigures}),jsxRuntimeExports.jsx(InteractiveGraphSettings,{box:perseus.getInteractiveBoxFromSizeClass(sizeClass),range:this.props.range,labels:this.props.labels,labelLocation:this.props.labelLocation,step:this.props.step,gridStep:gridStep,snapStep:snapStep,valid:this.props.valid,backgroundImage:this.props.backgroundImage,markings:this.props.markings,showProtractor:this.props.showProtractor,showTooltips:this.props.showTooltips,onChange:this.props.onChange}),this.props.correct.type==="polygon"&&jsxRuntimeExports.jsxs(LabeledRow,{label:"Student answer must",children:[jsxRuntimeExports.jsxs(wonderBlocksDropdown.SingleSelect,{selectedValue:this.props.correct.match||"exact",onChange:newValue=>{invariant__default.default(this.props.correct.type==="polygon",`Expected graph type to be polygon, but got ${this.props.correct.type}`);const correct={...this.props.correct,match:newValue};this.props.onChange({correct});},placeholder:"",style:styles$a.singleSelectShort,children:[jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"exact",label:"match exactly"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"congruent",label:"be congruent"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"approx",label:"be approximately congruent"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"similar",label:"be similar"})]}),jsxRuntimeExports.jsx(InfoTip$b,{children:jsxRuntimeExports.jsxs("ul",{children:[jsxRuntimeExports.jsx("li",{children:jsxRuntimeExports.jsxs("p",{children:[jsxRuntimeExports.jsx("b",{children:"Match Exactly:"})," Match exactly in size, orientation, and location on the grid even if it is not shown in the background."]})}),jsxRuntimeExports.jsx("li",{children:jsxRuntimeExports.jsxs("p",{children:[jsxRuntimeExports.jsx("b",{children:"Be Congruent:"})," Be congruent in size and shape, but can be located anywhere on the grid."]})}),jsxRuntimeExports.jsx("li",{children:jsxRuntimeExports.jsxs("p",{children:[jsxRuntimeExports.jsx("b",{children:"Be Approximately Congruent:"})," ","Be exactly similar, and congruent in size and shape to within 0.1 units, but can be located anywhere on the grid."," ",jsxRuntimeExports.jsx("em",{children:"Use this with snapping to angle measure."})]})}),jsxRuntimeExports.jsx("li",{children:jsxRuntimeExports.jsxs("p",{children:[jsxRuntimeExports.jsx("b",{children:"Be Similar:"})," Be similar with matching interior angles, and side measures that are matching or a multiple of the correct side measures. The figure can be located anywhere on the grid."]})})]})})]}),this.props.correct.type==="angle"&&jsxRuntimeExports.jsxs(LabeledRow,{label:"Student answer must",children:[jsxRuntimeExports.jsxs(wonderBlocksDropdown.SingleSelect,{selectedValue:this.props.correct.match||"exact",onChange:newValue=>{invariant__default.default(this.props.correct.type==="angle",`Expected graph type to be angle, but got ${this.props.correct.type}`);this.props.onChange({correct:{...this.props.correct,match:newValue}});},placeholder:"",style:styles$a.singleSelectShort,children:[jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"exact",label:"match exactly"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"congruent",label:"be congruent"})]}),jsxRuntimeExports.jsx(InfoTip$b,{children:jsxRuntimeExports.jsx("p",{children:"Congruency requires only that the angle measures are the same. An exact match implies congruency, but also requires that the angles have the same orientation and that the vertices are in the same position."})})]}),jsxRuntimeExports.jsx(LockedFiguresSection,{figures:this.props.lockedFigures,onChange:this.props.onChange})]})})}constructor(...args){super(...args),this.displayName="InteractiveGraphEditor",this.className="perseus-widget-interactive-graph",this.changeStartCoords=coords=>{if(!this.props.graph?.type){return}const graph={...this.props.graph,startCoords:coords};this.props.onChange({graph:graph});},this.getSaveWarnings=()=>{const issues=[];for(const figure of this.props.lockedFigures??[]){if(figure.type==="line"&&kmath.vector.equal(figure.points[0].coord,figure.points[1].coord)){issues.push("The line cannot have length 0.");}}if(this.props.graph?.type==="polygon"&&this.props.graph.numSides==="unlimited"&&this.props.graph.coords===null){issues.push("Polygon must be closed.");}return issues};}}InteractiveGraphEditor.widgetName="interactive-graph";InteractiveGraphEditor.defaultProps={...perseusCore.interactiveGraphLogic.defaultWidgetOptions,valid:true,lockedFigures:[]};function mergeGraphs(a,b){if(a.type!==b.type){throw new Error(`Cannot merge graphs with different types (${a.type} and ${b.type})`)}switch(a.type){case "angle":invariant__default.default(b.type==="angle");return {...a,...b};case "circle":invariant__default.default(b.type==="circle");return {...a,...b};case "linear":invariant__default.default(b.type==="linear");return {...a,...b};case "linear-system":invariant__default.default(b.type==="linear-system");return {...a,...b};case "none":invariant__default.default(b.type==="none");return {...a,...b};case "point":invariant__default.default(b.type==="point");return {...a,...b};case "polygon":invariant__default.default(b.type==="polygon");return {...a,...b};case "quadratic":invariant__default.default(b.type==="quadratic");return {...a,...b};case "ray":invariant__default.default(b.type==="ray");return {...a,...b};case "segment":invariant__default.default(b.type==="segment");return {...a,...b};case "sinusoid":invariant__default.default(b.type==="sinusoid");return {...a,...b};default:throw new wonderStuffCore.UnreachableCaseError(a)}}const styles$a=aphrodite.StyleSheet.create({singleSelectShort:{height:26},row:{flexDirection:"row",marginTop:wonderBlocksTokens.spacing.xSmall_8,alignItems:"center"}});
|
|
1689
|
+
const{InfoTip: InfoTip$b}=perseus.components;const InteractiveGraph=perseus.InteractiveGraphWidget.widget;const POLYGON_SIDES=___default.default.map(___default.default.range(3,13),function(value){return jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:`${value}`,label:`${value} sides`},`polygon-sides-${value}`)});class InteractiveGraphEditor extends React__namespace.Component{serialize(){const json=___default.default.pick(this.props,"step","backgroundImage","markings","labels","labelLocation","showProtractor","showTooltips","range","gridStep","snapStep","lockedFigures","fullGraphAriaLabel","fullGraphAriaDescription");const graph=this.refs.graph;if(graph){const correct=graph&&graph.getUserInput();___default.default.extend(json,{graph:{type:correct.type,startCoords:this.props.graph&&getStartCoords(this.props.graph)},correct:correct});___default.default.each(["allowReflexAngles","angleOffsetDeg","numPoints","numSides","numSegments","showAngles","showSides","snapTo","snapDegrees"],function(key){if(___default.default.has(correct,key)){json.graph[key]=correct[key];}});}return json}render(){let graph;let equationString;const gridStep=this.props.gridStep||perseus.Util.getGridStep(this.props.range,this.props.step,perseus.interactiveSizes.defaultBoxSize);const snapStep=this.props.snapStep||perseus.Util.snapStepFromGridStep(gridStep);const sizeClass=perseus.containerSizeClass.SMALL;if(this.props.valid===true){const correct=this.props.correct;const graphProps={ref:"graph",box:this.props.box,range:this.props.range,labels:this.props.labels,labelLocation:this.props.labelLocation,step:this.props.step,gridStep:gridStep,snapStep:snapStep,backgroundImage:this.props.backgroundImage,markings:this.props.markings,showProtractor:this.props.showProtractor,showTooltips:this.props.showTooltips,lockedFigures:this.props.lockedFigures,fullGraphAriaLabel:this.props.fullGraphAriaLabel,fullGraphAriaDescription:this.props.fullGraphAriaDescription,trackInteraction:function(){},userInput:correct,handleUserInput:newGraph=>{let correct=this.props.correct;invariant__default.default(newGraph!=null);if(correct.type===newGraph.type){correct=mergeGraphs(correct,newGraph);}else {correct=newGraph;}this.props.onChange({correct:correct,graph:this.props.graph});}};graph=jsxRuntimeExports.jsx(InteractiveGraph,{...graphProps,containerSizeClass:sizeClass,apiOptions:{...this.props.apiOptions,isMobile:false}});equationString=InteractiveGraph.getEquationString(graphProps);}else {graph=jsxRuntimeExports.jsx("div",{className:"perseus-error",children:this.props.valid});}return jsxRuntimeExports.jsx(wonderBlocksCore.Id,{children:graphId=>jsxRuntimeExports.jsxs(wonderBlocksCore.View,{children:[jsxRuntimeExports.jsx(LabeledRow,{label:"Answer type:",children:jsxRuntimeExports.jsx(GraphTypeSelector,{graphType:this.props.graph?.type??InteractiveGraph.defaultProps.userInput.type,onChange:type=>{this.props.onChange({graph:{type},correct:{type}});}})}),jsxRuntimeExports.jsx(InteractiveGraphDescription,{ariaLabelValue:this.props.fullGraphAriaLabel??"",ariaDescriptionValue:this.props.fullGraphAriaDescription??"",onChange:this.props.onChange}),jsxRuntimeExports.jsx(InteractiveGraphCorrectAnswer,{id:graphId,equationString:equationString,children:graph}),this.props.correct?.type==="point"&&jsxRuntimeExports.jsx(LabeledRow,{label:"Number of Points:",children:jsxRuntimeExports.jsx(GraphPointsCountSelector,{numPoints:this.props.correct?.numPoints,onChange:points=>{this.props.onChange({correct:{type:"point",numPoints:points},graph:{type:"point",numPoints:points}});}})}),this.props.correct?.type==="angle"&&jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$a.row,children:[jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:jsxRuntimeExports.jsx(wonderBlocksTypography.LabelSmall,{children:"Show angle measures"}),checked:!!this.props.correct?.showAngles,onChange:newValue=>{if(this.props.graph?.type==="angle"){invariant__default.default(this.props.correct.type==="angle",`Expected graph type to be angle, but got ${this.props.correct.type}`);this.props.onChange({correct:{...this.props.correct,showAngles:newValue},graph:{...this.props.graph,showAngles:newValue}});}}}),jsxRuntimeExports.jsx(InfoTip$b,{children:jsxRuntimeExports.jsx("p",{children:"Displays the interior angle measures."})})]}),jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$a.row,children:[jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:jsxRuntimeExports.jsx(wonderBlocksTypography.LabelSmall,{children:"Allow reflex angles"}),checked:!!this.props.correct?.allowReflexAngles,onChange:newValue=>{invariant__default.default(this.props.correct.type==="angle",`Expected graph type to be angle, but got ${this.props.correct.type}`);invariant__default.default(this.props.graph?.type==="angle",`Expected graph type to be angle, but got ${this.props.graph?.type}`);const update={allowReflexAngles:newValue};this.props.onChange({correct:{...this.props.correct,...update},graph:{...this.props.graph,...update}});}}),jsxRuntimeExports.jsx(InfoTip$b,{children:jsxRuntimeExports.jsx("p",{children:"Allow students to be able to create reflex angles."})})]})]}),this.props.correct?.type==="polygon"&&jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(LabeledRow,{label:"Number of sides:",children:jsxRuntimeExports.jsx(wonderBlocksDropdown.SingleSelect,{selectedValue:this.props.correct?.numSides?`${this.props.correct.numSides}`:"3",placeholder:"",onChange:newValue=>{invariant__default.default(this.props.graph?.type==="polygon");const updates={numSides:parsePointCount(newValue),coords:undefined,startCoords:undefined,snapTo:"grid"};this.props.onChange({correct:{...this.props.correct,...updates},graph:{...this.props.graph,...updates}});},style:styles$a.singleSelectShort,children:[...POLYGON_SIDES,jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"unlimited",label:"unlimited sides"},"unlimited")]},"polygon-select")}),jsxRuntimeExports.jsxs(LabeledRow,{label:"Snap to:",children:[jsxRuntimeExports.jsxs(wonderBlocksDropdown.SingleSelect,{selectedValue:this.props.correct?.snapTo||"grid",placeholder:"",onChange:newValue=>{invariant__default.default(this.props.correct.type==="polygon",`Expected correct answer type to be polygon, but got ${this.props.correct.type}`);invariant__default.default(this.props.graph?.type==="polygon",`Expected graph type to be polygon, but got ${this.props.graph?.type}`);const updates={snapTo:newValue,coords:null};this.props.onChange({correct:{...this.props.correct,...updates},graph:{...this.props.graph,...updates}});},style:styles$a.singleSelectShort,children:[jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"grid",label:"grid"}),this.props.correct?.numSides!=="unlimited"&&jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"angles",label:"interior angles"}),this.props.correct?.numSides!=="unlimited"&&jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"sides",label:"side measures"})]}),jsxRuntimeExports.jsxs(InfoTip$b,{children:[jsxRuntimeExports.jsx("p",{children:"These options affect the movement of the vertex points. The grid option will guide the points to the nearest half step along the grid."}),jsxRuntimeExports.jsx("p",{children:"The interior angle and side measure options guide the points to the nearest whole angle or side measure respectively."})]})]}),jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$a.row,children:[jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:jsxRuntimeExports.jsx(wonderBlocksTypography.LabelSmall,{children:"Show angle measures"}),checked:!!this.props.correct?.showAngles,onChange:()=>{if(this.props.graph?.type==="polygon"){invariant__default.default(this.props.correct.type==="polygon",`Expected graph type to be polygon, but got ${this.props.correct.type}`);this.props.onChange({correct:{...this.props.correct,showAngles:!this.props.correct.showAngles},graph:{...this.props.graph,showAngles:!this.props.graph.showAngles}});}}}),jsxRuntimeExports.jsx(InfoTip$b,{children:jsxRuntimeExports.jsx("p",{children:"Displays the interior angle measures."})})]}),jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$a.row,children:[jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:jsxRuntimeExports.jsx(wonderBlocksTypography.LabelSmall,{children:"Show side measures"}),checked:!!this.props.correct?.showSides,onChange:()=>{if(this.props.graph?.type==="polygon"&&this.props.correct.type==="polygon"){this.props.onChange({correct:{...this.props.correct,showSides:!this.props.correct.showSides},graph:{...this.props.graph,showSides:!this.props.graph.showSides}});}}}),jsxRuntimeExports.jsx(InfoTip$b,{children:jsxRuntimeExports.jsx("p",{children:"Displays the side lengths."})})]})]}),this.props.correct?.type==="segment"&&jsxRuntimeExports.jsx(LabeledRow,{label:"Number of segments:",children:jsxRuntimeExports.jsx(SegmentCountSelector,{numSegments:this.props.correct?.numSegments,onChange:sides=>{this.props.onChange({correct:{type:"segment",numSegments:sides,coords:null},graph:{type:"segment",numSegments:sides}});}})}),this.props.graph?.type&&shouldShowStartCoordsUI(this.props.graph,this.props.static)&&jsxRuntimeExports.jsx(StartCoordsSettings,{...this.props.graph,range:this.props.range,step:this.props.step,onChange:this.changeStartCoords}),jsxRuntimeExports.jsx(InteractiveGraphSRTree,{graphId:graphId,correct:this.props.correct,fullGraphAriaLabel:this.props.fullGraphAriaLabel,fullGraphAriaDescription:this.props.fullGraphAriaDescription,lockedFigures:this.props.lockedFigures}),jsxRuntimeExports.jsx(InteractiveGraphSettings,{box:perseus.getInteractiveBoxFromSizeClass(sizeClass),range:this.props.range,labels:this.props.labels,labelLocation:this.props.labelLocation,step:this.props.step,gridStep:gridStep,snapStep:snapStep,valid:this.props.valid,backgroundImage:this.props.backgroundImage,markings:this.props.markings,showProtractor:this.props.showProtractor,showTooltips:this.props.showTooltips,onChange:this.props.onChange}),this.props.correct.type==="polygon"&&jsxRuntimeExports.jsxs(LabeledRow,{label:"Student answer must",children:[jsxRuntimeExports.jsxs(wonderBlocksDropdown.SingleSelect,{selectedValue:this.props.correct.match||"exact",onChange:newValue=>{invariant__default.default(this.props.correct.type==="polygon",`Expected graph type to be polygon, but got ${this.props.correct.type}`);const correct={...this.props.correct,match:newValue};this.props.onChange({correct});},placeholder:"",style:styles$a.singleSelectShort,children:[jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"exact",label:"match exactly"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"congruent",label:"be congruent"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"approx",label:"be approximately congruent"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"similar",label:"be similar"})]}),jsxRuntimeExports.jsx(InfoTip$b,{children:jsxRuntimeExports.jsxs("ul",{children:[jsxRuntimeExports.jsx("li",{children:jsxRuntimeExports.jsxs("p",{children:[jsxRuntimeExports.jsx("b",{children:"Match Exactly:"})," Match exactly in size, orientation, and location on the grid even if it is not shown in the background."]})}),jsxRuntimeExports.jsx("li",{children:jsxRuntimeExports.jsxs("p",{children:[jsxRuntimeExports.jsx("b",{children:"Be Congruent:"})," Be congruent in size and shape, but can be located anywhere on the grid."]})}),jsxRuntimeExports.jsx("li",{children:jsxRuntimeExports.jsxs("p",{children:[jsxRuntimeExports.jsx("b",{children:"Be Approximately Congruent:"})," ","Be exactly similar, and congruent in size and shape to within 0.1 units, but can be located anywhere on the grid."," ",jsxRuntimeExports.jsx("em",{children:"Use this with snapping to angle measure."})]})}),jsxRuntimeExports.jsx("li",{children:jsxRuntimeExports.jsxs("p",{children:[jsxRuntimeExports.jsx("b",{children:"Be Similar:"})," Be similar with matching interior angles, and side measures that are matching or a multiple of the correct side measures. The figure can be located anywhere on the grid."]})})]})})]}),this.props.correct.type==="angle"&&jsxRuntimeExports.jsxs(LabeledRow,{label:"Student answer must",children:[jsxRuntimeExports.jsxs(wonderBlocksDropdown.SingleSelect,{selectedValue:this.props.correct.match||"exact",onChange:newValue=>{invariant__default.default(this.props.correct.type==="angle",`Expected graph type to be angle, but got ${this.props.correct.type}`);this.props.onChange({correct:{...this.props.correct,match:newValue}});},placeholder:"",style:styles$a.singleSelectShort,children:[jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"exact",label:"match exactly"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"congruent",label:"be congruent"})]}),jsxRuntimeExports.jsx(InfoTip$b,{children:jsxRuntimeExports.jsx("p",{children:"Congruency requires only that the angle measures are the same. An exact match implies congruency, but also requires that the angles have the same orientation and that the vertices are in the same position."})})]}),jsxRuntimeExports.jsx(LockedFiguresSection,{figures:this.props.lockedFigures,onChange:this.props.onChange})]})})}constructor(...args){super(...args),this.displayName="InteractiveGraphEditor",this.className="perseus-widget-interactive-graph",this.changeStartCoords=coords=>{if(!this.props.graph?.type){return}const graph={...this.props.graph,startCoords:coords};this.props.onChange({graph:graph});},this.getSaveWarnings=()=>{const issues=[];for(const figure of this.props.lockedFigures??[]){if(figure.type==="line"&&kmath.vector.equal(figure.points[0].coord,figure.points[1].coord)){issues.push("The line cannot have length 0.");}}if(this.props.graph?.type==="polygon"&&this.props.graph.numSides==="unlimited"&&this.props.graph.coords===null){issues.push("Polygon must be closed.");}return issues};}}InteractiveGraphEditor.widgetName="interactive-graph";InteractiveGraphEditor.defaultProps={...perseusCore.interactiveGraphLogic.defaultWidgetOptions,valid:true,lockedFigures:[]};function mergeGraphs(a,b){if(a.type!==b.type){throw new Error(`Cannot merge graphs with different types (${a.type} and ${b.type})`)}switch(a.type){case "angle":invariant__default.default(b.type==="angle");return {...a,...b};case "circle":invariant__default.default(b.type==="circle");return {...a,...b};case "linear":invariant__default.default(b.type==="linear");return {...a,...b};case "linear-system":invariant__default.default(b.type==="linear-system");return {...a,...b};case "none":invariant__default.default(b.type==="none");return {...a,...b};case "point":invariant__default.default(b.type==="point");return {...a,...b};case "polygon":invariant__default.default(b.type==="polygon");return {...a,...b};case "quadratic":invariant__default.default(b.type==="quadratic");return {...a,...b};case "ray":invariant__default.default(b.type==="ray");return {...a,...b};case "segment":invariant__default.default(b.type==="segment");return {...a,...b};case "sinusoid":invariant__default.default(b.type==="sinusoid");return {...a,...b};default:throw new wonderStuffCore.UnreachableCaseError(a)}}const styles$a=aphrodite.StyleSheet.create({singleSelectShort:{height:26},row:{flexDirection:"row",marginTop:wonderBlocksTokens.spacing.xSmall_8,alignItems:"center"}});
|
|
1690
1690
|
|
|
1691
1691
|
const gray98="#FAFAFA";const gray95="#F0F1F2";const gray85="#D6D8DA";const gray76="#BABEC2";const gray68="#888D93";const gray41="#626569";const gray17="#21242C";
|
|
1692
1692
|
|
|
@@ -1721,7 +1721,7 @@ class LabelImageEditor extends React__namespace.Component{componentDidUpdate(pre
|
|
|
1721
1721
|
|
|
1722
1722
|
const{InfoTip: InfoTip$a,TextListEditor: TextListEditor$3}=perseus.components;class MatcherEditor extends React__namespace.Component{render(){return jsxRuntimeExports.jsxs("div",{className:"perseus-matcher-editor",children:[jsxRuntimeExports.jsxs("div",{children:[" ","Correct answer:"," ",jsxRuntimeExports.jsx(InfoTip$a,{children:jsxRuntimeExports.jsx("p",{children:"Enter the correct answers here. The preview on the right will show the cards in a randomized order, which is how the student will see them."})})]}),jsxRuntimeExports.jsxs("div",{className:"perseus-clearfix",children:[jsxRuntimeExports.jsx(TextListEditor$3,{options:this.props.left,onChange:(options,cb)=>{this.props.onChange({left:options},cb);},layout:"vertical"}),jsxRuntimeExports.jsx(TextListEditor$3,{options:this.props.right,onChange:(options,cb)=>{this.props.onChange({right:options},cb);},layout:"vertical"})]}),jsxRuntimeExports.jsxs("span",{children:[" ","Labels:"," ",jsxRuntimeExports.jsx(InfoTip$a,{children:jsxRuntimeExports.jsx("p",{children:"These are entirely optional."})})]}),jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx("input",{type:"text",defaultValue:this.props.labels[0],onChange:this.onLabelChange.bind(this,0)}),jsxRuntimeExports.jsx("input",{type:"text",defaultValue:this.props.labels[1],onChange:this.onLabelChange.bind(this,1)})]}),jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:"Order of the matched pairs matters:",checked:this.props.orderMatters,onChange:value=>{this.props.onChange({orderMatters:value});}}),jsxRuntimeExports.jsxs(InfoTip$a,{children:[jsxRuntimeExports.jsx("p",{children:"With this option enabled, only the order provided above will be treated as correct. This is useful when ordering is significant, such as in the context of a proof."}),jsxRuntimeExports.jsx("p",{children:"If disabled, pairwise matching is sufficient. To make this clear, the left column becomes fixed in the provided order and only the cards in the right column can be moved."})]})]}),jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:"Padding:",checked:this.props.padding,onChange:value=>{this.props.onChange({padding:value});}}),jsxRuntimeExports.jsx(InfoTip$a,{children:jsxRuntimeExports.jsx("p",{children:"Padding is good for text, but not needed for images."})})]})]})}constructor(...args){super(...args),this.onLabelChange=(index,e)=>{const labels=___default.default.clone(this.props.labels);labels[index]=e.target.value;this.props.onChange({labels:labels});},this.getSaveWarnings=()=>{if(this.props.left.length!==this.props.right.length){return ["The two halves of the matcher have different numbers"+" of cards."]}return []},this.serialize=()=>{return ___default.default.pick(this.props,"left","right","labels","orderMatters","padding")};}}MatcherEditor.propTypes={left:PropTypes__default.default.array,right:PropTypes__default.default.array,labels:PropTypes__default.default.array,orderMatters:PropTypes__default.default.bool,padding:PropTypes__default.default.bool};MatcherEditor.widgetName="matcher";MatcherEditor.defaultProps=perseusCore.matcherLogic.defaultWidgetOptions;
|
|
1723
1723
|
|
|
1724
|
-
const{RangeInput: RangeInput$3}=perseus.components;const Matrix=perseus.MatrixWidget.widget;const MAX_BOARD_SIZE=6;class MatrixEditor extends React__namespace.Component{render(){const matrixProps=
|
|
1724
|
+
const{RangeInput: RangeInput$3}=perseus.components;const Matrix=perseus.MatrixWidget.widget;const MAX_BOARD_SIZE=6;class MatrixEditor extends React__namespace.Component{render(){const matrixProps={onBlur:()=>{},onFocus:()=>{},trackInteraction:()=>{},userInput:{answers:this.props.answers},handleUserInput:userInput=>{this.change({answers:userInput.answers});},...this.props};return jsxRuntimeExports.jsxs("div",{className:"perseus-matrix-editor",children:[jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[" ","Max matrix size:"," ",jsxRuntimeExports.jsx(RangeInput$3,{value:this.props.matrixBoardSize,onChange:this.onMatrixBoardSizeChange,format:this.props.labelStyle,useArrowKeys:true})]}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsx(Matrix,{...matrixProps})}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[" ","Matrix prefix:"," ",jsxRuntimeExports.jsx(Editor,{ref:"prefix",apiOptions:this.props.apiOptions,content:this.props.prefix,widgetEnabled:false,onChange:newProps=>{this.change({prefix:newProps.content});}})]}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[" ","Matrix suffix:"," ",jsxRuntimeExports.jsx(Editor,{ref:"suffix",apiOptions:this.props.apiOptions,content:this.props.suffix,widgetEnabled:false,onChange:newProps=>{this.change({suffix:newProps.content});}})]})]})}constructor(...args){super(...args),this.change=(...args)=>{return perseus.Changeable.change.apply(this,args)},this.onMatrixBoardSizeChange=range=>{const matrixSize=perseusCore.getMatrixSize(this.props.answers);if(range[0]!==null&&range[1]!==null){range=[Math.round(Math.min(Math.max(range[0],1),MAX_BOARD_SIZE)),Math.round(Math.min(Math.max(range[1],1),MAX_BOARD_SIZE))];const answers=___default.default(Math.min(range[0],matrixSize[0])).times(row=>{return ___default.default(Math.min(range[1],matrixSize[1])).times(col=>{return this.props.answers[row][col]})});this.props.onChange({matrixBoardSize:range,answers:answers});}},this.serialize=()=>{return perseus.EditorJsonify.serialize.call(this)};}}MatrixEditor.propTypes={...perseus.Changeable.propTypes,matrixBoardSize:PropTypes__default.default.arrayOf(PropTypes__default.default.number).isRequired,answers:PropTypes__default.default.arrayOf(PropTypes__default.default.arrayOf(PropTypes__default.default.number)),prefix:PropTypes__default.default.string,suffix:PropTypes__default.default.string,cursorPosition:PropTypes__default.default.arrayOf(PropTypes__default.default.number)};MatrixEditor.widgetName="matrix";MatrixEditor.defaultProps=perseusCore.matrixLogic.defaultWidgetOptions;
|
|
1725
1725
|
|
|
1726
1726
|
const{InfoTip: InfoTip$9,NumberInput: NumberInput$7,RangeInput: RangeInput$2}=perseus.components;const defaultImage={url:null,top:0,left:0};class MeasurerEditor extends React__namespace.Component{render(){const image=___default.default.extend({},defaultImage,this.props.image);return jsxRuntimeExports.jsxs("div",{className:"perseus-widget-measurer",children:[jsxRuntimeExports.jsx("div",{children:"Image displayed under protractor and/or ruler:"}),jsxRuntimeExports.jsxs("div",{children:["URL:"," ",jsxRuntimeExports.jsx("input",{type:"text",className:"perseus-widget-measurer-url",ref:"image-url",defaultValue:image.url,onChange:this._changeUrl}),jsxRuntimeExports.jsx(InfoTip$9,{children:jsxRuntimeExports.jsx("p",{children:'Create an image in graphie, or use the "Add image" function to create a background.'})})]}),image.url&&jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[jsxRuntimeExports.jsxs("label",{className:"perseus-widget-left-col",children:["Pixels from top:"," ",jsxRuntimeExports.jsx(NumberInput$7,{placeholder:0,onChange:this._changeTop,value:image.top,useArrowKeys:true})]}),jsxRuntimeExports.jsxs("label",{className:"perseus-widget-right-col",children:["Pixels from left:"," ",jsxRuntimeExports.jsx(NumberInput$7,{placeholder:0,onChange:this._changeLeft,value:image.left,useArrowKeys:true})]})]}),jsxRuntimeExports.jsxs("div",{children:["Containing area [width, height]:"," ",jsxRuntimeExports.jsx(RangeInput$2,{onChange:this.change("box"),value:this.props.box,useArrowKeys:true})]}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-left-col",children:jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:"Show ruler",checked:this.props.showRuler,onChange:value=>{this.props.onChange({showRuler:value});}})}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-right-col",children:jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:"Show protractor",checked:this.props.showProtractor,onChange:value=>{this.props.onChange({showProtractor:value});}})})]}),this.props.showRuler&&jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsxs("label",{children:[" ","Ruler label:"," ",jsxRuntimeExports.jsxs("select",{onChange:e=>this.change("rulerLabel",e.target.value),value:this.props.rulerLabel,children:[jsxRuntimeExports.jsx("option",{value:"",children:"None"}),jsxRuntimeExports.jsx("optgroup",{label:"Metric",children:this.renderLabelChoices([["milimeters","mm"],["centimeters","cm"],["meters","m"],["kilometers","km"]])}),jsxRuntimeExports.jsx("optgroup",{label:"Imperial",children:this.renderLabelChoices([["inches","in"],["feet","ft"],["yards","yd"],["miles","mi"]])})]})]})}),jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsxs("label",{children:[" ","Ruler ticks:"," ",jsxRuntimeExports.jsx("select",{onChange:e=>this.change("rulerTicks",+e.target.value),value:this.props.rulerTicks,children:___default.default.map([1,2,4,8,10,16],function(n){return jsxRuntimeExports.jsx("option",{value:n,children:n},n)})})]})}),jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsxs("label",{children:["Ruler pixels per unit:"," ",jsxRuntimeExports.jsx(NumberInput$7,{placeholder:40,onChange:this.change("rulerPixels"),value:this.props.rulerPixels,useArrowKeys:true})]})}),jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsxs("label",{children:["Ruler length in units:"," ",jsxRuntimeExports.jsx(NumberInput$7,{placeholder:10,onChange:this.change("rulerLength"),value:this.props.rulerLength,useArrowKeys:true})]})})]})]})}constructor(...args){super(...args),this.className="perseus-widget-measurer",this.change=(...args)=>{return perseus.Changeable.change.apply(this,args)},this._changeUrl=e=>{this._changeImage("url",e.target.value);},this._changeTop=newTop=>{this._changeImage("top",newTop);},this._changeLeft=newLeft=>{this._changeImage("left",newLeft);},this._changeImage=(subProp,newValue)=>{const image=___default.default.clone(this.props.image);image[subProp]=newValue;this.change("image",image);},this.renderLabelChoices=choices=>{return ___default.default.map(choices,function(nameAndValue){const[name,value]=nameAndValue;return jsxRuntimeExports.jsx("option",{value:value,children:name},value)})},this.serialize=()=>{return perseus.EditorJsonify.serialize.call(this)};}}MeasurerEditor.widgetName="measurer";MeasurerEditor.propTypes={...perseus.Changeable.propTypes,box:PropTypes__default.default.arrayOf(PropTypes__default.default.number),image:PropTypes__default.default.shape({url:PropTypes__default.default.string,top:PropTypes__default.default.number,left:PropTypes__default.default.number}),showProtractor:PropTypes__default.default.bool,showRuler:PropTypes__default.default.bool,rulerLabel:PropTypes__default.default.string,rulerTicks:PropTypes__default.default.number,rulerPixels:PropTypes__default.default.number,rulerLength:PropTypes__default.default.number};MeasurerEditor.defaultProps=perseusCore.measurerLogic.defaultWidgetOptions;
|
|
1727
1727
|
|
|
@@ -1741,17 +1741,17 @@ class PassageRefTargetEditor extends React__namespace.Component{render(){return
|
|
|
1741
1741
|
|
|
1742
1742
|
class PhetSimulationEditor extends React__namespace.Component{serialize(){return {url:this.props.url,description:this.props.description}}render(){return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx(wonderBlocksForm.LabeledTextField,{label:"URL",value:this.props.url,onChange:url=>this.props.onChange({url}),style:{marginBottom:wonderBlocksTokens.spacing.large_24}}),jsxRuntimeExports.jsx(wonderBlocksForm.LabeledTextField,{label:"Description",value:this.props.description,onChange:description=>this.props.onChange({description})})]})}constructor(...args){super(...args),this.getSaveWarnings=()=>{if(perseus.makeSafeUrl(this.props.url,"en")===null){return ["Please enter a URL from the PhET domain."]}return []};}}PhetSimulationEditor.defaultProps=perseusCore.phetSimulationLogic.defaultWidgetOptions;PhetSimulationEditor.widgetName="phet-simulation";
|
|
1743
1743
|
|
|
1744
|
-
const{InfoTip: InfoTip$3,NumberInput: NumberInput$2,RangeInput,TextListEditor: TextListEditor$1}=perseus.components;const Plotter=perseus.PlotterWidget.widget;const STARTING="starting";const CORRECT="correct";const editingStates=[STARTING,CORRECT];function padArray(array,n,value){const copy=___default.default.clone(array);copy.length=n;for(let i=array.length;i<n;i++){copy[i]=value;}return copy}const editorDefaults={scaleY:1,maxY:10,snapsPerLine:2};const formatNumber=num=>"$"+kmath.number.round(num,2)+"$";class PlotterEditor extends React__namespace.Component{UNSAFE_componentWillMount(){this.fetchPic(this.props.picUrl);}UNSAFE_componentWillReceiveProps(nextProps){this.fetchPic(nextProps.picUrl);if(nextProps.static){this.setState({editing:"starting"});}}render(){const setFromScale=___default.default.contains(["line","histogram","dotplot"],this.props.type);const canChangeSnaps=!___default.default.contains(["pic","dotplot"],this.props.type);const
|
|
1744
|
+
const{InfoTip: InfoTip$3,NumberInput: NumberInput$2,RangeInput,TextListEditor: TextListEditor$1}=perseus.components;const Plotter=perseus.PlotterWidget.widget;const STARTING="starting";const CORRECT="correct";const editingStates=[STARTING,CORRECT];function padArray(array,n,value){const copy=___default.default.clone(array);copy.length=n;for(let i=array.length;i<n;i++){copy[i]=value;}return copy}const editorDefaults={scaleY:1,maxY:10,snapsPerLine:2};const formatNumber=num=>"$"+kmath.number.round(num,2)+"$";class PlotterEditor extends React__namespace.Component{UNSAFE_componentWillMount(){this.fetchPic(this.props.picUrl);}UNSAFE_componentWillReceiveProps(nextProps){this.fetchPic(nextProps.picUrl);if(nextProps.static){this.setState({editing:"starting"});}}render(){const setFromScale=___default.default.contains(["line","histogram","dotplot"],this.props.type);const canChangeSnaps=!___default.default.contains(["pic","dotplot"],this.props.type);const plotterProps={...this.props,trackInteraction:()=>{},starting:this.props[this.state.editing],onChange:this.handlePlotterChange,userInput:this.props.correct,handleUserInput:userInput=>{this.props.onChange({correct:userInput});}};return jsxRuntimeExports.jsxs("div",{className:"perseus-widget-plotter-editor",children:[jsxRuntimeExports.jsxs("div",{children:["Chart type:"," ",perseusCore.plotterPlotTypes.map(type=>{return jsxRuntimeExports.jsxs("label",{children:[jsxRuntimeExports.jsx("input",{type:"radio",name:"chart-type",checked:this.props.type===type,onChange:___default.default.partial(this.changeType,type)}),type]},type)},this)]}),jsxRuntimeExports.jsxs("div",{children:["Labels:"," ",["x","y"].map((axis,i)=>{return jsxRuntimeExports.jsxs("label",{children:[axis+":",jsxRuntimeExports.jsx("input",{type:"text",onChange:___default.default.partial(this.changeLabel,i),defaultValue:this.props.labels[i]})]},axis)},this)]}),setFromScale&&jsxRuntimeExports.jsxs("div",{className:"set-from-scale-box",children:[jsxRuntimeExports.jsx("span",{className:"categories-title",children:"Set Categories From Scale"}),jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsxs("label",{children:["Tick Step:"," ",jsxRuntimeExports.jsx(NumberInput$2,{placeholder:1,useArrowKeys:true,value:this.state.tickStep,onChange:this.handleChangeTickStep})]}),jsxRuntimeExports.jsx(InfoTip$3,{children:jsxRuntimeExports.jsx("p",{children:"The difference between adjacent ticks."})})]}),jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsxs("label",{children:["Range:"," ",jsxRuntimeExports.jsx(RangeInput,{placeholder:[0,10],useArrowKeys:true,value:[this.state.minX,this.state.maxX],onChange:this.handleChangeRange})]})}),jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsxs("button",{onClick:this.setCategoriesFromScale,children:["Set Categories"," "]})})]}),jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsxs("label",{children:["Label Interval:"," ",jsxRuntimeExports.jsx(NumberInput$2,{useArrowKeys:true,value:this.props.labelInterval,onChange:this.changeLabelInterval})]}),jsxRuntimeExports.jsx(InfoTip$3,{children:jsxRuntimeExports.jsx("p",{children:'Which ticks to display the labels for. For instance, setting this to "4" will only show every 4th label (plus the last one)'})})]}),this.props.type==="pic"&&jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsxs("label",{children:["Picture:"," ",jsxRuntimeExports.jsx(BlurInput,{className:"pic-url",value:this.props.picUrl,onChange:this.changePicUrl}),jsxRuntimeExports.jsx(InfoTip$3,{children:jsxRuntimeExports.jsx("p",{children:'Use the default picture of Earth, or insert the URL for a different picture using the "Add image" function.'})})]}),this.state.pic&&this.state.pic.width!==this.state.pic.height&&jsxRuntimeExports.jsxs("p",{className:"warning",children:[jsxRuntimeExports.jsx("b",{children:"Warning"}),": You are using a picture which is not square. This means the image will get distorted. You should probably crop it to be square."]})]}),jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsxs("label",{children:["Categories:"," ",jsxRuntimeExports.jsx(TextListEditor$1,{ref:"categories",layout:"horizontal",options:this.props.categories,onChange:this.changeCategories})]})}),jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsxs("label",{children:["Scale (y):"," ",jsxRuntimeExports.jsx("input",{type:"text",onChange:this.changeScale,defaultValue:this.props.scaleY})]})}),jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsxs("label",{children:["Max y:"," ",jsxRuntimeExports.jsx("input",{type:"text",ref:"maxY",onChange:this.changeMax,defaultValue:this.props.maxY})]})}),canChangeSnaps&&jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsxs("label",{children:["Snaps per line:"," ",jsxRuntimeExports.jsx("input",{type:"text",onChange:this.changeSnaps,defaultValue:this.props.snapsPerLine})]}),jsxRuntimeExports.jsx(InfoTip$3,{children:jsxRuntimeExports.jsx("p",{children:"Creates the specified number of divisions between the horizontal lines. Fewer snaps between lines makes the graph easier for the student to create correctly."})})]}),jsxRuntimeExports.jsxs("div",{children:["Editing values:"," ",editingStates.map(editing=>jsxRuntimeExports.jsxs("label",{children:[jsxRuntimeExports.jsx("input",{type:"radio",disabled:editing===CORRECT&&this.props.static,checked:this.props.static?editing===STARTING:this.state.editing===editing,onChange:e=>this.changeEditing(editing)}),editing]},editing)),jsxRuntimeExports.jsxs(InfoTip$3,{children:[jsxRuntimeExports.jsx("p",{children:"Use this toggle to switch between editing the correct answer (what the student will be graded on) and the starting values (what the student will see plotted when they start the problem). Note: These cannot be the same."}),jsxRuntimeExports.jsx("p",{children:"In static mode, the starting values are rendered out to the displayed widget."})]})]}),jsxRuntimeExports.jsx(Plotter,{...plotterProps})]})}constructor(...args){super(...args),this.state={editing:this.props.static?STARTING:CORRECT,pic:null,loadedUrl:null,minX:null,maxX:null,tickStep:null},this.fetchPic=url=>{if(this.state.loadedUrl!==url){const pic=new Image;pic.src=url;pic.onload=()=>{this.setState({pic:pic,loadedUrl:url});};}},this.handleChangeTickStep=value=>{this.setState({tickStep:value});},this.handleChangeRange=newValue=>{this.setState({minX:newValue[0],maxX:newValue[1]});},this.changeLabelInterval=value=>{this.props.onChange({labelInterval:value});},this.handlePlotterChange=newProps=>{const props={};props[this.state.editing]=newProps.values;this.props.onChange(props);},this.changeType=type=>{let categories;if(type==="histogram"){categories=[formatNumber(0)].concat(this.props.categories);this.props.onChange({type:type,categories:categories});}else if(this.props.type==="histogram"){categories=this.props.categories.slice(1);this.props.onChange({type:type,categories:categories});}else {this.props.onChange({type:type});}if(categories){const node=ReactDOM__default.default.findDOMNode(this.refs.categories);node.value=categories.join(", ");}},this.changeLabel=(i,e)=>{const labels=___default.default.clone(this.props.labels);labels[i]=e.target.value;this.props.onChange({labels:labels});},this.changePicUrl=value=>{const url=perseus.Util.getRealImageUrl(value);this.props.onChange({picUrl:url});},this.changeCategories=categories=>{let n=categories.length;if(this.props.type==="histogram"){n--;}const value=this.props.scaleY;this.props.onChange({categories:categories,correct:padArray(this.props.correct,n,value),starting:padArray(this.props.starting,n,value)});},this.changeScale=e=>{const oldScale=this.props.scaleY;const newScale=+e.target.value||editorDefaults.scaleY;const scale=function(value){return value*newScale/oldScale};const maxY=scale(this.props.maxY);this.props.onChange({scaleY:newScale,maxY:maxY,correct:___default.default.map(this.props.correct,scale),starting:___default.default.map(this.props.starting,scale)});ReactDOM__default.default.findDOMNode(this.refs.maxY).value=maxY;},this.changeMax=e=>{this.props.onChange({maxY:+e.target.value||editorDefaults.maxY});},this.changeSnaps=e=>{this.props.onChange({snapsPerLine:+e.target.value||editorDefaults.snapsPerLine});},this.changeEditing=editing=>{this.setState({editing:editing});},this.setCategoriesFromScale=()=>{const scale=this.state.tickStep||1;const min=this.state.minX||0;const max=this.state.maxX||0;const length=Math.floor((max-min)/scale)*scale;let categories;if(this.props.type==="histogram"||this.props.type==="dotplot"){categories=___default.default.range(0,length+scale,scale);}else {categories=___default.default.range(scale,length+scale,scale);}categories=___default.default.map(categories,num=>num+min);categories=___default.default.map(categories,formatNumber);this.changeCategories(categories);const node=ReactDOM__default.default.findDOMNode(this.refs.categories);node.value=categories.join(", ");},this.serialize=()=>{const json=___default.default.pick(this.props,"correct","starting","type","labels","categories","scaleY","maxY","snapsPerLine","labelInterval");if(this.props.type==="pic"){json.picUrl=this.props.picUrl;}return json};}}PlotterEditor.widgetName="plotter";PlotterEditor.defaultProps=perseusCore.plotterLogic.defaultWidgetOptions;
|
|
1745
1745
|
|
|
1746
1746
|
const{NumberInput: NumberInput$1,TextInput}=perseus.components;function validateOptions(height,programID){const errors=[];if(programID===""){errors.push("The program ID is required.");}if(!Number.isInteger(height)||height<1){errors.push("The height must be a positive integer.");}return errors}class PythonProgramEditor extends React__namespace.Component{serialize(){return {programID:this.props.programID,height:this.props.height}}render(){return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsxs("label",{children:["User Program ID:"," ",jsxRuntimeExports.jsx(TextInput,{value:this.props.programID,onChange:this.change("programID"),placeholder:"123"})]}),jsxRuntimeExports.jsx("br",{}),jsxRuntimeExports.jsxs("label",{children:["Height:"," ",jsxRuntimeExports.jsx(NumberInput$1,{value:this.props.height,onChange:this.change("height"),placeholder:"400"})]})]})}constructor(...args){super(...args),this.change=(...args)=>{return perseus.Changeable.change.apply(this,args)},this.getSaveWarnings=()=>{return validateOptions(this.props.height,this.props.programID)};}}PythonProgramEditor.widgetName="python-program";PythonProgramEditor.defaultProps=perseusCore.pythonProgramLogic.defaultWidgetOptions;
|
|
1747
1747
|
|
|
1748
|
-
class ChoiceEditor extends React__namespace.Component{render(){const checkedClass=this.props.choice.correct?"correct":"incorrect";let placeholder="Type a choice here...";if(this.props.choice.isNoneOfTheAbove){placeholder=this.props.choice.correct?"Type the answer to reveal to the user...":"None of the above";}const editor=jsxRuntimeExports.jsx(Editor,{ref:"content-editor",apiOptions:this.props.apiOptions,content:this.props.choice.content||"",widgetEnabled:false,placeholder:placeholder,disabled:this.props.choice.isNoneOfTheAbove&&!this.props.choice.correct,onChange:this.props.onContentChange});const rationaleEditor=jsxRuntimeExports.jsx(Editor,{ref:"rationale-editor",apiOptions:this.props.apiOptions,content:this.props.choice.rationale||"",widgetEnabled:false,placeholder:`Why is this choice ${checkedClass}?`,onChange:this.props.onRationaleChange});const deleteLink=jsxRuntimeExports.jsx("a",{className:"simple-button orange delete-choice",href:"#",onClick:e=>{e.stopPropagation();e.preventDefault();this.props.onDelete();},title:"Remove this choice",children:"Remove this choice"});return jsxRuntimeExports.jsxs("div",{className:"choice-rationale-editors",children:[jsxRuntimeExports.jsx("div",{className:`choice-editor ${checkedClass}`,children:editor}),jsxRuntimeExports.jsx("div",{className:"rationale-editor",children:rationaleEditor}),this.props.showDelete&&deleteLink]})}}class RadioEditor extends React__namespace.Component{onRationaleChange(choiceIndex,newRationale){const choices=this.props.choices.slice();choices[choiceIndex]=___default.default.extend({},choices[choiceIndex],{rationale:newRationale});if(newRationale===""){delete choices[choiceIndex].rationale;}this.props.onChange({choices:choices});}serialize(){const{choices,randomize,multipleSelect,countChoices,hasNoneOfTheAbove,deselectEnabled}=this.props;return {choices,randomize,multipleSelect,countChoices,hasNoneOfTheAbove,deselectEnabled,numCorrect:perseusCore.deriveNumCorrect(
|
|
1748
|
+
class ChoiceEditor extends React__namespace.Component{render(){const checkedClass=this.props.choice.correct?"correct":"incorrect";let placeholder="Type a choice here...";if(this.props.choice.isNoneOfTheAbove){placeholder=this.props.choice.correct?"Type the answer to reveal to the user...":"None of the above";}const editor=jsxRuntimeExports.jsx(Editor,{ref:"content-editor",apiOptions:this.props.apiOptions,content:this.props.choice.content||"",widgetEnabled:false,placeholder:placeholder,disabled:this.props.choice.isNoneOfTheAbove&&!this.props.choice.correct,onChange:this.props.onContentChange});const rationaleEditor=jsxRuntimeExports.jsx(Editor,{ref:"rationale-editor",apiOptions:this.props.apiOptions,content:this.props.choice.rationale||"",widgetEnabled:false,placeholder:`Why is this choice ${checkedClass}?`,onChange:this.props.onRationaleChange});const deleteLink=jsxRuntimeExports.jsx("a",{className:"simple-button orange delete-choice",href:"#",onClick:e=>{e.stopPropagation();e.preventDefault();this.props.onDelete();},title:"Remove this choice",children:"Remove this choice"});return jsxRuntimeExports.jsxs("div",{className:"choice-rationale-editors",children:[jsxRuntimeExports.jsx("div",{className:`choice-editor ${checkedClass}`,children:editor}),jsxRuntimeExports.jsx("div",{className:"rationale-editor",children:rationaleEditor}),this.props.showDelete&&deleteLink]})}}class RadioEditor extends React__namespace.Component{onRationaleChange(choiceIndex,newRationale){const choices=this.props.choices.slice();choices[choiceIndex]=___default.default.extend({},choices[choiceIndex],{rationale:newRationale});if(newRationale===""){delete choices[choiceIndex].rationale;}this.props.onChange({choices:choices});}serialize(){const{choices,randomize,multipleSelect,countChoices,hasNoneOfTheAbove,deselectEnabled}=this.props;return {choices,randomize,multipleSelect,countChoices,hasNoneOfTheAbove,deselectEnabled,numCorrect:perseusCore.deriveNumCorrect(choices)}}render(){const numCorrect=perseusCore.deriveNumCorrect(this.props.choices);return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx(Link__default.default,{href:"https://www.khanacademy.org/internal-courses/content-creation-best-practices/xe46daa512cd9c644:question-writing/xe46daa512cd9c644:multiple-choice/a/stems",target:"_blank",children:"Multiple choice best practices"}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[jsxRuntimeExports.jsx(LabeledSwitch,{label:"Randomize order",checked:this.props.randomize,onChange:value=>{this.props.onChange({randomize:value});},style:{marginBlockEnd:wonderBlocksTokens.sizing.size_060}}),jsxRuntimeExports.jsx(LabeledSwitch,{label:"Multiple selections",checked:this.props.multipleSelect,onChange:value=>{this.onMultipleSelectChange({multipleSelect:value});},style:{marginBlockEnd:wonderBlocksTokens.sizing.size_060}}),this.props.multipleSelect&&jsxRuntimeExports.jsx(LabeledSwitch,{label:"Specify number correct",checked:this.props.countChoices,onChange:value=>{this.onCountChoicesChange({countChoices:value});},style:{marginBlockEnd:wonderBlocksTokens.sizing.size_060}})]}),jsxRuntimeExports.jsx(perseus.BaseRadio,{multipleSelect:this.props.multipleSelect,countChoices:this.props.countChoices,numCorrect:numCorrect,editMode:true,labelWrap:false,apiOptions:this.props.apiOptions,reviewMode:false,choices:this.props.choices.map((choice,i)=>{return {content:jsxRuntimeExports.jsx(ChoiceEditor,{ref:`choice-editor${i}`,apiOptions:this.props.apiOptions,choice:choice,onContentChange:newProps=>{if(newProps.content!=null){this.onContentChange(i,newProps.content);}},onRationaleChange:newProps=>{if(newProps.content!=null){this.onRationaleChange(i,newProps.content);}},onDelete:()=>this.onDelete(i),showDelete:this.props.choices.length>=2}),isNoneOfTheAbove:choice.isNoneOfTheAbove,checked:choice.correct}},this),onChange:this.onChange}),jsxRuntimeExports.jsxs("div",{className:"add-choice-container",children:[jsxRuntimeExports.jsx(Button__default.default,{size:"small",kind:"tertiary",startIcon:plusIcon__default.default,onClick:this.addChoice.bind(this,false),children:"Add a choice"}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.large_24}),jsxRuntimeExports.jsx(Button__default.default,{size:"small",kind:"tertiary",startIcon:plusIcon__default.default,onClick:this.addChoice.bind(this,true),children:"None of the above"})]})]})}constructor(...args){super(...args),this.onMultipleSelectChange=allowMultiple=>{const isMultipleSelect=allowMultiple.multipleSelect;let choices=this.props.choices;if(!isMultipleSelect){const numCorrect=perseusCore.deriveNumCorrect(choices);if(numCorrect>1){choices=choices.map(choice=>{return {...choice,correct:false}});}}this.props.onChange({multipleSelect:isMultipleSelect,choices,numCorrect:perseusCore.deriveNumCorrect(choices)});},this.onCountChoicesChange=count=>{const countChoices=count.countChoices;this.props.onChange({countChoices});},this.onChange=({checked})=>{const choices=this.props.choices.map((choice,i)=>{return {...choice,correct:checked[i],content:choice.isNoneOfTheAbove&&!checked[i]?"":choice.content}});this.props.onChange({choices,numCorrect:perseusCore.deriveNumCorrect(choices)});},this.onContentChange=(choiceIndex,newContent)=>{const choices=this.props.choices.slice();choices[choiceIndex]=___default.default.extend({},choices[choiceIndex],{content:newContent});this.props.onChange({choices:choices});},this.onDelete=choiceIndex=>{const choices=this.props.choices.slice();const deleted=choices[choiceIndex];choices.splice(choiceIndex,1);this.props.onChange({choices,hasNoneOfTheAbove:this.props.hasNoneOfTheAbove&&!deleted.isNoneOfTheAbove,numCorrect:perseusCore.deriveNumCorrect(choices)});},this.addChoice=(noneOfTheAbove,e)=>{e.preventDefault();const choices=this.props.choices.slice();const newChoice={isNoneOfTheAbove:noneOfTheAbove,content:""};const addIndex=choices.length-(this.props.hasNoneOfTheAbove?1:0);choices.splice(addIndex,0,newChoice);this.props.onChange({choices:choices,hasNoneOfTheAbove:noneOfTheAbove||this.props.hasNoneOfTheAbove},()=>{this.refs[`choice-editor${addIndex}`].refs["content-editor"].focus();});},this.focus=()=>{this.refs["choice-editor0"].refs["content-editor"].focus();return true},this.getSaveWarnings=()=>{if(!___default.default.some(___default.default.pluck(this.props.choices,"correct"))){return ["No choice is marked as correct."]}return []};}}RadioEditor.widgetName="radio";RadioEditor.defaultProps=perseusCore.radioLogic.defaultWidgetOptions;
|
|
1749
1749
|
|
|
1750
1750
|
const{InfoTip: InfoTip$2,TextListEditor}=perseus.components;const HORIZONTAL="horizontal";const VERTICAL="vertical";class SorterEditor extends React__namespace.Component{render(){const editor=this;return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsxs("div",{children:[" ","Correct answer:"," ",jsxRuntimeExports.jsx(InfoTip$2,{children:jsxRuntimeExports.jsx("p",{children:"Enter the correct answer (in the correct order) here. The preview on the right will have the cards in a randomized order, which is how the student will see them."})})]}),jsxRuntimeExports.jsx(TextListEditor,{options:this.props.correct,onChange:function(options,cb){editor.props.onChange({correct:options},cb);},layout:this.props.layout}),jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsxs("label",{children:[" ","Layout:"," ",jsxRuntimeExports.jsxs("select",{value:this.props.layout,onChange:this.onLayoutChange,children:[jsxRuntimeExports.jsx("option",{value:HORIZONTAL,children:"Horizontal"}),jsxRuntimeExports.jsx("option",{value:VERTICAL,children:"Vertical"})]})]}),jsxRuntimeExports.jsx(InfoTip$2,{children:jsxRuntimeExports.jsx("p",{children:"Use the horizontal layout for short text and small images. The vertical layout is best for longer text and larger images."})})]}),jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:"Padding:",checked:this.props.padding,onChange:value=>{this.props.onChange({padding:value});}}),jsxRuntimeExports.jsx(InfoTip$2,{children:jsxRuntimeExports.jsx("p",{children:"Padding is good for text, but not needed for images."})})]})]})}constructor(...args){super(...args),this.onLayoutChange=e=>{this.props.onChange({layout:e.target.value});},this.serialize=()=>{return ___default.default.pick(this.props,"correct","layout","padding")};}}SorterEditor.propTypes={correct:PropTypes__default.default.array,layout:PropTypes__default.default.oneOf([HORIZONTAL,VERTICAL]),padding:PropTypes__default.default.bool};SorterEditor.widgetName="sorter";SorterEditor.defaultProps=perseusCore.sorterLogic.defaultWidgetOptions;
|
|
1751
1751
|
|
|
1752
|
-
const{InfoTip: InfoTip$1,NumberInput}=perseus.components;const Table=perseus.TableWidget.widget;class TableEditor extends React__namespace.Component{render(){return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsxs("label",{children:["Number of columns:"," ",jsxRuntimeExports.jsx(NumberInput,{ref:this.numberOfColumns,value:this.props.columns,onChange:val=>{if(val){this.onSizeInput(this.props.rows,val);}},useArrowKeys:true})]})}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsxs("label",{children:["Number of rows:"," ",jsxRuntimeExports.jsx(NumberInput,{ref:"numberOfRows",value:this.props.rows,onChange:val=>{if(val){this.onSizeInput(val,this.props.columns);}},useArrowKeys:true})]})}),jsxRuntimeExports.jsxs("div",{children:[" ","Table of answers:"," ",jsxRuntimeExports.jsx(InfoTip$1,{children:jsxRuntimeExports.jsx("p",{children:"The student has to fill out all cells in the table. For partially filled tables create a table using the template, and insert text input boxes as desired."})})]}),jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsx(Table,{
|
|
1752
|
+
const{InfoTip: InfoTip$1,NumberInput}=perseus.components;const Table=perseus.TableWidget.widget;class TableEditor extends React__namespace.Component{render(){const tableProps={headers:this.props.headers,onChange:this.props.onChange,userInput:this.props.answers,handleUserInput:userInput=>{this.props.onChange({answers:userInput});},apiOptions:this.props.apiOptions,editableHeaders:true,onFocus:()=>{},onBlur:()=>{},trackInteraction:()=>{},Editor:Editor};return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsxs("label",{children:["Number of columns:"," ",jsxRuntimeExports.jsx(NumberInput,{ref:this.numberOfColumns,value:this.props.columns,onChange:val=>{if(val){this.onSizeInput(this.props.rows,val);}},useArrowKeys:true})]})}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsxs("label",{children:["Number of rows:"," ",jsxRuntimeExports.jsx(NumberInput,{ref:"numberOfRows",value:this.props.rows,onChange:val=>{if(val){this.onSizeInput(val,this.props.columns);}},useArrowKeys:true})]})}),jsxRuntimeExports.jsxs("div",{children:[" ","Table of answers:"," ",jsxRuntimeExports.jsx(InfoTip$1,{children:jsxRuntimeExports.jsx("p",{children:"The student has to fill out all cells in the table. For partially filled tables create a table using the template, and insert text input boxes as desired."})})]}),jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsx(Table,{...tableProps})})]})}constructor(...args){super(...args),this.numberOfColumns=React__namespace.createRef(),this.focus=()=>{this.numberOfColumns.current?.focus();},this.onSizeInput=(numRawRows,numRawColumns)=>{let rows=+numRawRows||0;let columns=+numRawColumns||0;rows=Math.min(Math.max(1,rows),30);columns=Math.min(Math.max(1,columns),6);const oldColumns=this.props.columns;const oldRows=this.props.rows;const answers=this.props.answers;if(rows<=oldRows){answers.length=rows;}else {___default.default(rows-oldRows).times(function(){answers.push(perseus.Util.stringArrayOfSize(oldColumns));});}function fixColumnSizing(array){if(columns<=oldColumns){array.length=columns;}else {___default.default(columns-oldColumns).times(function(){array.push("");});}}const headers=this.props.headers;fixColumnSizing(headers);___default.default.each(answers,fixColumnSizing);this.props.onChange({rows:rows,columns:columns,answers:answers,headers:headers});},this.serialize=()=>{const json=___default.default.pick(this.props,"headers","rows","columns");return ___default.default.extend({},json,{answers:___default.default.map(this.props.answers,___default.default.clone)})};}}TableEditor.propTypes={rows:PropTypes__default.default.number,columns:PropTypes__default.default.number,headers:PropTypes__default.default.arrayOf(PropTypes__default.default.string),answers:PropTypes__default.default.arrayOf(PropTypes__default.default.arrayOf(PropTypes__default.default.string))};TableEditor.widgetName="table";TableEditor.defaultProps=perseusCore.tableLogic.defaultWidgetOptions;
|
|
1753
1753
|
|
|
1754
|
-
const{InfoTip}=perseus.components;const KA_VIDEO_URL=/khanacademy\.org\/.*\/v\/(.*)$/;function getSlugFromUrl(url){const match=KA_VIDEO_URL.exec(url);if(match){return match[1]}return url}class VideoEditor extends React__namespace.Component{render(){return jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsxs("label",{children:["KA Video Slug:"," ",jsxRuntimeExports.jsx(BlurInput,{value:this.props.location,style:{width:290},onChange:this._handleUrlChange}),jsxRuntimeExports.jsx(InfoTip,{children:"KA video URLs will be converted to just the slug."})]})})}constructor(...args){super(...args),this._handleUrlChange=url=>{this.props.onChange({location:getSlugFromUrl(url)});},this.
|
|
1754
|
+
const{InfoTip}=perseus.components;const KA_VIDEO_URL=/khanacademy\.org\/.*\/v\/(.*)$/;function getSlugFromUrl(url){const match=KA_VIDEO_URL.exec(url);if(match){return match[1]}return url}class VideoEditor extends React__namespace.Component{render(){return jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsxs("label",{children:["KA Video Slug:"," ",jsxRuntimeExports.jsx(BlurInput,{value:this.props.location,style:{width:290},onChange:this._handleUrlChange}),jsxRuntimeExports.jsx(InfoTip,{children:"KA video URLs will be converted to just the slug."})]})})}constructor(...args){super(...args),this._handleUrlChange=url=>{this.props.onChange({location:getSlugFromUrl(url)});},this.serialize=()=>{return perseus.EditorJsonify.serialize.call(this)};}}VideoEditor.propTypes={location:PropTypes__default.default.string,onChange:PropTypes__default.default.func};VideoEditor.widgetName="video";VideoEditor.defaultProps=perseusCore.videoLogic.defaultWidgetOptions;
|
|
1755
1755
|
|
|
1756
1756
|
var AllEditors = [CategorizerEditor,CSProgramEditor,DefinitionEditor,DropdownEditor,ExplanationEditor,ExpressionEditor,FreeResponseEditor,GradedGroupEditor,GradedGroupSetEditor,GrapherEditor,GroupEditor,IframeEditor,ImageEditor,InputNumberEditor,InteractionEditor,InteractiveGraphEditor,LabelImageEditor,MatcherEditor,MatrixEditor,MeasurerEditor,MoleculeWidgetEditor,NumberLineEditor,NumericInputEditor,OrdererEditor,PassageEditor,PassageRefEditor,PassageRefTargetEditor,PhetSimulationEditor,PlotterEditor,PythonProgramEditor,SorterEditor,TableEditor,VideoEditor,RadioEditor,DeprecatedStandinEditor];
|
|
1757
1757
|
|