SCORM实现的例子很少，所以我有点迷茫。我需要根据 3 个问题获得学生分数。我真的不明白我在做什么。我知道我可能需要一个像 calculateScore() 这样的函数。不过，SCORM 让我很困惑。我使用 SCORMCLOUD 进行测试，但每次我想测试某些东西时我都会重新上传构建..
APP.js
function App() {
Scorm.init();
const [learnerName, setLearnerName] = useState(`${Scorm.getLearnerName()}`);
const [assessment, setAssessment] = useState([]);
const finish = () => {
Scorm.finish();
};
const updateAssesment = (correct, response) => {
setAssessment(assessment.concat([correct]));
Scorm.submitMCQ(correct, response);
};
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<Learner name={learnerName} />
</header>
<main>
<Mcq result={updateAssesment.bind()} question="What is 10 * 10?" correctAnswer={0} answers={["100", "20"]} />
<Mcq
result={updateAssesment.bind()}
question="What is the capital of Spain?"
correctAnswer={2}
answers={["Barcelona", "Lisbon", "Madrid"]}
/>
<Mcq
result={updateAssesment.bind()}
question="Which US President's office commissioned the creation of SCORM?"
correctAnswer={3}
answers={["Donald Trump", "Barack Obama", "Ronald Reagan", "Bill Clinton"]}
/>
<CompleteButton completeActivity={finish.bind()} />
</main>
</div>
);
}
export default App;
SCORM.js
import { SCORM } from "pipwerks-scorm-api-wrapper";
let Scorm = {
init() {
SCORM.init();
},
getLearnerName() {
return SCORM.get("cmi.core.student_name");
},
submitMCQ(correct, response) {
let nextIndex = SCORM.get("cmi.interactions._count", true);
SCORM.set("cmi.interactions." + nextIndex + ".id", "round_" + nextIndex);
SCORM.set("cmi.interactions." + nextIndex + ".type", "choice");
SCORM.set("cmi.interactions." + nextIndex + ".student_response", response);
SCORM.set("cmi.interactions." + nextIndex + ".result", correct);
},
calculateScore() {
//something here??
SCORM.set("cmi.core.score.raw", "0");
SCORM.set("cmi.core.score.max", "100");
SCORM.set("cmi.core.score.min", "0");
},
finish() {
alert("you have finished!");
SCORM.set("cmi.core.lesson_status", "completed");
SCORM.save();
SCORM.quit();
},
};
export default Scorm;
MCQ 组件
export default function Mcq(props) {
const [selectedOption, setSelectedOption] = useState(0);
const [answered, setAnswered] = useState(false);
const handleOptionChange = (changeEvent) => {
setSelectedOption(Number(changeEvent.target.value));
};
const renderAnswers = () => {
return props.answers.map(function (answer, index) {
return (
<div className="answer" key={index}>
<input type="radio" value={index} checked={selectedOption === index} onChange={handleOptionChange} />
<label>{answer}</label>
</div>
);
});
};
const handleFormSubmit = (formSubmitEvent) => {
formSubmitEvent.preventDefault();
setAnswered(true);
props.result(selectedOption === props.correctAnswer, props.answers[selectedOption]);
};
const currentState = () => {
if (!answered) {
return (
<form onSubmit={handleFormSubmit.bind(this)}>
{renderAnswers()}
<button className="btn btn-default" type="submit">
Submit
</button>
</form>
);
} else {
return <div>{checkCorrectAnswer()}</div>;
}
};
const checkCorrectAnswer = () => {
if (selectedOption === props.correctAnswer) {
return `yes, ${props.answers[props.correctAnswer]} is the correct answer.`;
} else {
return `You answered ${props.answers[selectedOption]}. Sorry, but the correct answer is ${
props.answers[props.correctAnswer]
}.`;
}
};
return (
<div className="Mcq">
<p>{props.question}</p>
{currentState()}
</div>
);
}